Playwright lokatoriai: kaip rašyti stabilius E2E testus

Playwright lokatoriai yra vienas svarbiausių dalykų rašant patikimus automatinius testus. Jei testai dažnai lūžta po mažų UI pakeitimų, problema dažnai būna ne pačiame Playwright įrankyje, o neteisingoje lokatorių strategijoje.

Tinkamai parinkti lokatoriai sumažina flaky testų kiekį, pagerina CI/CD pipeline stabilumą ir leidžia komandai greičiau bei saugiau releasinti produktą.

Kas yra Playwright lokatorius?

Lokatorius yra būdas, kuriuo testas suranda konkretų UI elementą puslapyje: mygtuką, lauką, nuorodą, lentelės eilutę ar kitą komponentą. Kuo lokatorius aiškesnis ir stabilesnis, tuo mažesnė tikimybė, kad testas lūš dėl nereikšmingų HTML ar CSS pakeitimų.

Blogas lokatorius dažnai remiasi technine DOM struktūra. Geras lokatorius remiasi vartotojui prasminga informacija: role, label, tekstu arba stabiliu testavimo atributu.

Kodėl lokatoriai yra kritiškai svarbūs?

Automatizuotas testas yra toks stabilus, kokie stabilūs yra jo lokatoriai. Jei testas ieško elemento pagal atsitiktinę CSS klasę, ilgą XPath kelią arba elemento poziciją puslapyje, jis gali pradėti lūžti po bet kokio smulkaus dizaino pakeitimo.

Gera lokatorių strategija padeda:

sumažinti flaky testų kiekį;
greičiau suprasti, kodėl testas nepavyko;
lengviau prižiūrėti Page Object Model struktūrą;
stabiliau vykdyti testus CI/CD pipeline;
rašyti testus, kurie geriau atspindi realų vartotojo elgesį.

Rekomenduojama Playwright lokatorių prioriteto tvarka

Praktikoje verta turėti aiškią taisyklę, kokius lokatorius komanda naudoja pirmiausia. Tai sumažina chaosą ir padeda visiems rašyti testus vienodu stiliumi.

getByRole — geriausias pasirinkimas mygtukams, nuorodoms, antraštėms ir kitiems semantiniams elementams.
getByLabel — labai geras pasirinkimas formų laukams.
getByPlaceholder — tinka, kai placeholder tekstas stabilus ir aiškus.
getByText — naudinga, kai tekstas yra stabilus ir verslo prasme svarbus.
getByTestId — geras sprendimas, kai semantikos nepakanka arba UI tekstas dažnai keičiasi.
CSS arba XPath — naudoti tik tada, kai nėra geresnės alternatyvos.

Geras pavyzdys: getByRole

Vietoje trapios CSS selektoriaus grandinės geriau naudoti semantinį lokatorių:

await page.getByRole('button', { name: 'Apmokėti' }).click();

Toks lokatorius yra aiškus, lengvai skaitomas ir paremtas tuo, ką mato vartotojas. Jei mygtuko CSS klasė pasikeis, testas vis tiek veiks.

Blogas pavyzdys: trapus CSS selector

Šis variantas yra daug rizikingesnis:

await page.locator('.btn.primary:nth-child(2)').click();

Problema ta, kad testas priklauso nuo klasės pavadinimo ir elemento pozicijos. Jei dizainas arba HTML struktūra pasikeis, testas gali lūžti, nors produkto funkcionalumas veikia teisingai.

Kada naudoti getByTestId?

getByTestId verta naudoti tada, kai UI elementas neturi gero semantinio pavadinimo arba tekstas gali keistis dėl vertimų, dizaino ar verslo sprendimų.

await page.getByTestId('payment-submit-button').click();

Tai ypač naudinga kritiniuose verslo srautuose: prisijungime, mokėjime, užsakymo sukūrime, formų pateikime ar administravimo veiksmuose.

Filtering ir chaining

Kai puslapyje yra daug panašių elementų, naudinga naudoti filtravimą ir lokatorių grandines. Tai padeda testui surasti elementą konkrečiame kontekste.

const row = page.getByRole('row').filter({ hasText: 'Jonas Petrauskas' });
await row.getByRole('button', { name: 'Redaguoti' }).click();

Šis pavyzdys yra stabilesnis nei bandymas spausti trečią mygtuką lentelėje pagal indeksą.

Dažniausi anti-patternai

Naudoti labai ilgus XPath selektorius.
Remtis CSS klasėmis, kurios skirtos tik dizainui.
Naudoti nth() be aiškios priežasties.
Rašyti per plačius lokatorius, kurie randa kelis elementus.
Naudoti waitForTimeout vietoje Playwright auto-wait ir expect.
Maišyti daug skirtingų lokatorių strategijų viename projekte.

Kaip sumažinti flaky testus per vieną sprintą?

Greičiausias kelias — ne perrašyti visą testų bazę, o sutvarkyti dažniausiai lūžtančius testus. Pradėkite nuo top 20 flaky scenarijų ir patikrinkite, ar jie nenaudoja trapių CSS, XPath arba pozicinių lokatorių.

Praktinis planas:

Surinkite dažniausiai lūžtančius testus iš CI/CD rezultatų.
Patikrinkite jų lokatorius.
Pakeiskite trapius CSS/XPath į getByRole, getByLabel arba getByTestId.
Pašalinkite nereikalingus waitForTimeout.
Pridėkite aiškias expect validacijas.

Dažnai vien šis darbas ženkliai pagerina Playwright testų stabilumą be didelio framework refaktoringo.

Komandos lokatorių konvencija

Augant testų bazei, svarbu turėti bendrą taisyklę visai komandai. Pavyzdžiui:

pirmiausia naudoti getByRole;
formoms naudoti getByLabel;
kritiniams verslo veiksmams naudoti stabilų data-testid;
CSS ir XPath naudoti tik išimtiniais atvejais;
nenaudoti lokatorių, kurie priklauso nuo dizaino struktūros.

Tokia konvencija padeda ne tik testavimo komandai. Ji skatina ir kūrėjus rašyti geresnį, prieinamesnį ir testavimui draugiškesnį UI kodą.

DUK apie Playwright lokatorius

Ar getByRole visada geriausias pasirinkimas?

Dažniausiai taip, ypač mygtukams, nuorodoms, antraštėms ir kitiems semantiniams elementams. Tačiau jei elementas neturi aiškios role arba accessible name, gali reikėti getByLabel, getByText arba getByTestId.

Ar data-testid yra bloga praktika?

Ne. data-testid yra gera praktika, kai jis naudojamas sąmoningai. Jis ypač naudingas kritiniuose srautuose arba komponentuose, kurių tekstas dažnai keičiasi.

Ar verta naudoti XPath Playwright testuose?

XPath geriau laikyti paskutine išeitimi. Jis gali būti naudingas specifinėse situacijose, bet dažniausiai semantiniai Playwright lokatoriai yra aiškesni, stabilesni ir lengviau prižiūrimi.

Kodėl mano Playwright testai tampa flaky?

Dažniausios priežastys: trapūs lokatoriai, netinkami laukimai, per platus selector, asinchroniniai UI pokyčiai ir testai, kurie remiasi elemento pozicija vietoje aiškaus verslo konteksto.

Susiję straipsniai

Reikia pagalbos su Playwright testais?

Padedame komandoms susitvarkyti flaky E2E testus, sukurti tvarią Playwright lokatorių strategiją ir įdiegti patikimą automatizuoto testavimo procesą.

Susisiekite dėl Playwright testų →