Answer

Best Practices for Using Locators in Playwright

When it comes to automated testing with @playwright/test, locators play a crucial role. They help you identify and interact with elements on a web page. However, not all locators are equal. Some are more resilient to changes in the DOM, making them less likely to break when the page structure changes.

User-Facing Attributes Over XPath or CSS Selectors

One best practice is to prefer user-facing attributes over XPath or CSS selectors. Your DOM can change, and if your tests depend on your DOM structure, they can fail. For instance, if you select a button by its CSS classes and the designer changes something, your test might break.

Chaining and Filtering

Another best practice is to use chaining and filtering when selecting elements. Locators can be chained together to narrow down the search to a particular part of the page. You can also filter locators by text or by another locator.

Playwright's Codegen Feature

Playwright has a test generator that can generate tests and pick locators for you. It prioritizes role, text, and test id locators. If multiple elements match with the locator generated by the codegen command, it will improve it, making it resilient and uniquely identify the target element.

// Example of using Playwright's codegen feature
import { test } from '@playwright/test';

test('use codegen feature', async ({ page }) => {
  await page.goto('https://ray.run/');
  // Use codegen to generate resilient locators
});

New Selector Engines

Playwright provides several new selector engines, such as the nth selector engine, visible selector engine, React selectors, and Vue selectors.

In conclusion, using resilient user-facing attributes, chaining/filtering techniques, and Playwright's codegen feature will help create robust automated testing scripts. Even if there are changes in web pages' structure over time, you won't have to worry about failing due to incorrect selection of elements.