Een locator is een contract, geen coördinaat

page.locator('.panel > div:nth-child(3) > button.primary') werkt vandaag. Het werkt morgen. Het blijft werken totdat een ontwerper de knop één vakje naar links verplaatst, en dan faalt je suite op een functie die niemand heeft kapotgemaakt. Je hebt geen test geschreven. Je hebt een foto van de DOM geschreven.

Wat Playwright eigenlijk aanbeveelt

De documentatie van Playwright is hierover ongebruikelijk direct. De locatorengids beveelt aan om prioriteit te geven aan gebruikersgerichte attributen en expliciete contracten: getByRole, getByLabel, getByText, getByPlaceholder, getByTestId. Rollocators weerspiegelen hoe gebruikers en ondersteunende technologie de pagina waarnemen. Test-ID's creëren een afzonderlijk expliciet contract, maar zijn wel onzichtbaar voor gebruikers. Ze blijven alleen stabiel als ontwikkelaars dat contract behouden. CSS- en XPath-selectors zijn gedocumenteerd als kwetsbaar omdat ze gebonden zijn aan de DOM-structuur, en het is de DOM-structuur die verandert.

Twee eigenschappen van het raamwerk belonen de goede gewoonte. Locators worden vóór elke actie opnieuw opgelost, dus als u tussen twee stappen opnieuw rendert, blijft u niet met een oud element zitten. En locators zijn streng: als je selector overeenkomt met twee elementen, gooit de actie in plaats van stil op de eerste te klikken. Een strikte storing in CI is een middag lang vervelend. Een verkeerde klik in het verkeerde dialoogvenster is een bugrapport met uw naam erop.

Waarom generatoren eerst naar de slechte gewoonte grijpen

Een gegenereerde suite kan een selector bereiken die op de huidige pagina terechtkomt zonder na te denken over wat een herontwerp zal veranderen. Dat is een beoordelingsrisico, geen bewijs van de trainingsgegevens van een bepaald model. Tests die verband houden met de lay-out kunnen op de eerste dag slagen en mislukken na een front-endwijziging om redenen die niets te maken hebben met het productgedrag.

De mislukking is op een specifieke manier duur: de suite schreeuwt wolf bij elk herontwerp, het team leert rode builds te negeren, en de enige echte regressie vaart door een muur van vertrouwd geluid.

Een audit van vijftien minuten voor elke suite

Voer uw tests uit voor page.locator met CSS- of XPath-reeksen, en voor getByText gebruikt voor interactieve elementen. Stel voor elke treffer één vraag: geeft deze selector aan wat het element is, of waar het zich bevindt? Vervang coördinaten door contracten:

• Knoppen en links: getByRole met de toegankelijke naam.
• Formuliervelden: getByLabel, of getByPlaceholder als fallback.
• Herhaalde of dynamische inhoud: een data-testid overeengekomen met de ontwikkelaars.
• getByText: handig voor tekstinhoud; geven de voorkeur aan een rol en een toegankelijke naam wanneer u op een besturingselement klikt.

Je blijft zitten met een handvol werkelijk dubbelzinnige bedieningselementen. Dat zijn geen testproblemen. Ze vormen een toegankelijkheidsprobleem dat de tests zojuist gratis hebben gevonden.

De strengheidsval, en wanneer first() een bekentenis is

Toneelschrijvers zijn streng: een actie op een selector die twee elementen matcht, levert een overtreding op in plaats van te raden. Behandel elke strikte-modusfout als een ontwerpvraag. Als je .first() nodig hebt om de suite te laten slagen, is een van de twee dingen waar: de pagina geeft dubbele besturingselementen weer die duidelijk toegankelijke namen moeten hebben, of je selector is te breed. Beide zijn bevindingen, geen ongemakken. De oplossing is om het contract te beperken met een contract op naam, te filteren op een stabiele ouder of om een ​​test-ID te vragen. Door naar .nth(1) te grijpen omdat de tweede match deze week de juiste is, leren suites na de volgende release op de verkeerde dialoog te klikken.

Er is één legitiem ontsnappingsluik. locator.or() bestaat voor de gevallen waarin de pagina eerlijk een van twee statussen toont, zoals een inlogformulier of een reeds aangemelde banner. Gebruik het bewust, met beide alternatieven genoemd, en het leest als een vertakking. Gebruik het om dubbelzinnigheid te verdoezelen en het leest als schouderophalen.

Waar agenten passen

Laat de agent verkennen en opstellen; de locators zijn waar uw recensie zich bevindt. Een gegenereerde test met getByRole('button', { name: 'Save' }) vertelt u wat de pagina denkt te doen. Een gegenereerde test met div:nth-child(3) vertelt je niets behalve dat de DOM er ooit zo uitzag. Bewaar de eerste soort. Herschrijf de seconde voordat deze CI bereikt, omdat elke brosse locator die u accepteert een toekomstig vals alarm is waarvoor u al hebt betaald.