How do I create a resilient locator for an element using Playwright's Locators API?

Answer

To create a resilient locator for an element using Playwright's Locators API, follow these steps:

1. Use Playwright's test generator

This tool helps you find the best locator by prioritizing role, text, and test id locators. It ensures that the locator uniquely identifies the target element, even if multiple elements match the locator.

2. Copy the locator into your test file

Click the "Pick Locator" button in the testing sidebar in VS Code. Then, click on the element in your browser that requires this locator. The locator will appear in the Pick Locator box in VS Code.

3. Use the locator in your test

In your test file, use the locator with the locator method from @playwright/test. For example, if you want to click a button with the text "Submit" on the https://ray.run/ domain, you can do the following:

import { test, expect } from '@playwright/test';

test('Click the Submit button', async ({ page }) => {
  await page.goto('https://ray.run/');
  
  const submitButton = page.locator('text=Submit');
  await submitButton.click();
  
  // Add your assertions here
});

By following these steps, you'll create a locator that is resilient to changes in the DOM, ensuring the robustness of your automated tests across different machines, operating systems, and browsers.