DEV Community

TestDino
TestDino

Posted on

Mistake 2/14: Your locators will break on the next deploy

Your locators are tied to exact DOM structure. A developer adds one wrapper div and your entire pipeline bleeds red.

We reviewed a suite last week. First thing we saw: page.locator('//div[@class="login-container"]/div[2]/form/button').

BEFORE - Brittle CSS = broken pipeline 

await page.locator('form-group input#email-field').fill('user@test');
await page.locator('/div[@class="login-form"]').fill('user@test');
await page.locator('/div[2]/form/button').click();
await page.locator('form-group.btn-primary.submit-btn').click();
Enter fullscreen mode Exit fullscreen mode

AFTER - Resilient, tied to what users see, not DOM structure 

await page.getByLabel('Email').fill('user@test');
await page.getByLabel('Password').fill('pass');
await page.getByRole('button', { name: 'Sign in' }).click();
Enter fullscreen mode Exit fullscreen mode

Playwright built accessibility locators to fix this. getByRole, getByLabel, getByText.

Priority: getByRole → getByLabel → getByText → getByTestId → CSS (last resort).

Do you enforce a locator strategy on your team, or is it a free-for-all? Drop it in the comments.

Top comments (0)