Lokátor – getByRole

Ebben a videóban a getByRole lokátort használjuk a gyakorlatban a login oldalon. A getByRole ARIA szerepkörök alapján keres, és a Playwright ezt ajánlja a leginkább, mert ez a legrobusztusabb lokátortípus.

A login oldal elemei

A teszt oldalunk login felületén három fontos elem van:

• Email mező – textbox role, neve: „Email address”
• Password mező – textbox role, neve: „Password”
• Sign in gomb – button role, neve: „Sign in”

Ezeket mind meg tudjuk találni anélkül, hogy megnéznénk a HTML szerkezetet – elegendő, amit a felhasználó lát.

Email mező keresése

const emailField = page.getByRole('textbox', { name: 'email address' });

Az IDE segít: amikor elkezdjük gépelni a getByRole-t, felajánlja az összes beépített lokátortípust. Az első paraméter a role (textbox), a második egy opcionális objektum, ahol a name tulajdonsággal szűkíthetjük a keresést.

Ha nem adjuk meg a name-et, a Playwright az oldalon az összes adott role-ú elemet megtalálja.

Password mező keresése

const passwordField = page.getByRole('textbox', { name: 'password' });

Ugyanúgy textbox role-t használunk, de más névvel.

Submit gomb keresése

const submitButton = page.getByRole('button', { name: 'Sign in ', exact: true });

Ha nem adjuk meg a nevet, az oldalon az összes gombot megtalálja (a példában 5 darabot). A name szűkíti az eredményt.

Az exact paraméter szerepe

• exact: false (alapértelmezett): nem case-sensitive, részmegyezést is elfogad
• exact: true: pontos egyezőséget keres (de a szóközt automatikusan levágja a Playwright)

// Kis betűvel is megtalálja (exact: false az alapértelmezett)
page.getByRole('button', { name: 'sign in' });

// Pontos egyezés – case-sensitive, de a trailing space nem számít
page.getByRole('button', { name: 'Sign in', exact: true });

Ellenőrzés a böngészőben

Ha a Playwright VS Code pluginjával futtatjuk a tesztet, a böngészőben vizuálisan is ellenőrizhetjük a lokátorokat: ha a kurzort egy adott sorra visszük a kódban, a plugin kiemeli a megtalált elemet az oldalon.

Teljes kód

import { test } from '@playwright/test';

test('locate by role', async ({ page }) => {
    await page.goto('http://localhost:3000/login');
    const emailField = page.getByRole('textbox', { name: 'email address' });
    const passwordField = page.getByRole('textbox', { name: 'password' });
    const submitButton = page.getByRole('button', { name: 'Sign in ', exact: true });
});