Beépített lokátorok
Az előző videókban az XPath és CSS selectorokat használtuk a page.locator() metódussal. Ezek a hagyományos lokátortípusok azonban törékenyek lehetnek – ha a HTML szerkezet megváltozik, a selectorok könnyen elromolhatnak. Az olvashatóság is sérülhet, például a CSS label + input nem feltétlenül egyértelmű első olvasásra.
A Playwright ezért saját, beépített lokátortípusokat kínál, amelyek a felhasználói nézőponton alapulnak: úgy keresünk elemeket, ahogy a felhasználó interakcióba lép velük.
Beépített lokátortípusok áttekintése
getByRole – szerepkör alapú keresés
A legerősebb és leginkább ajánlott lokátortípus. ARIA szerepkörök alapján keres — ez az akadálymentességhez (accessibility) kapcsolódik, de nem helyettesíti az accessibility tesztelést.
page.getByRole('button', { name: 'Sign in' });
page.getByRole('textbox', { name: 'Email address' });
page.getByRole('checkbox', { name: 'Remember me' });
page.getByRole('link', { name: 'Forget your password?' });
Leggyakoribb role-ok:
| Role | Mikor használjuk |
|---|---|
button | Gombok |
textbox | Input mezők |
checkbox | Jelölőnégyzetek |
radio | Rádiógombok |
link | Hivatkozások (<a> tag) |
combobox | Legördülő listák (<select>) |
getByLabel – label alapú keresés
Formok kitöltésénél ideális. A label szövege alapján találja meg a hozzá tartozó input mezőt:
page.getByLabel('Full Name');
Nem csak a <label> tag-et nézi, hanem az aria-label attribútumot is.
getByPlaceholder – placeholder alapú keresés
A beviteli mező placeholder szövege alapján keres:
page.getByPlaceholder('Enter your email');
getByText – szöveg alapú keresés
Bármilyen szöveget megtalál az oldalon:
page.getByText('Email');
Óvatosan kell használni, mert könnyen több találatot is adhat, ha a szöveg többször szerepel az oldalon.
getByAltText – alt attribútum alapú keresés
Képek azonosítására szolgál az alt attribútum alapján:
page.getByAltText('Product image');
getByTitle – title attribútum alapú keresés
A title attribútum alapján keres, amely tooltip-ként jelenik meg, ha az egeret felvisszük az elemre:
page.getByTitle('Input field for email');
getByTestId – test ID alapú keresés
Alapértelmezetten a data-testid attribútumot keresi:
page.getByTestId('email-input');
A keresett attribútum nevét meg lehet változtatni a playwright.config.ts fájlban a testIdAttribute opcióval. Például ha a fejlesztők az id attribútumot használják, beállíthatjuk, hogy a getByTestId azt keresse.
Az exact paraméter
A szöveges keresést végző lokátoroknál (pl. getByRole name, getByText, getByLabel, getByPlaceholder, getByAltText, getByTitle) elérhető az exact opció:
exact: false(alapértelmezett) – részleges, nem case-sensitive egyezésexact: true– teljes (nem részleges) egyezést keres
page.getByRole('button', { name: 'Sign in', exact: true });
Melyiket válasszam?
A Playwright a getByRole-t ajánlja elsődlegesen, mert ez a legrobusztusabb. Formok esetén a getByLabel nagyon kényelmes. A getByTestId akkor hasznos, ha a fejlesztők kifejezetten teszteléshez helyeztek el attribútumokat.