How do I use the pick locator on a debug browser window when a test has hit a breakpoint in Playwright?

Answer

Sure, you can use the pick locator in @playwright/test's debug mode. When your test hits a breakpoint, click on the "Pick Locator" button next to the current locator field. Hover over any element in the browser window to see its locator code. Clicking on an element will add its locator to the field.

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

test('my test', async ({ page }) => {
  await page.goto('https://ray.run/');
  // Add your breakpoint here
  // Use the pick locator feature
});

You can tweak or copy this locator into your code. Playwright will analyze your page and determine the best locator based on role, text, and test id locators. If multiple elements match this locator, Playwright will improve it to make it resilient and uniquely identify the target element.

In addition to live editing locators, Playwright also offers actionability logs and trace viewer. Actionability logs provide information about what happened during your test and what actions Playwright performed or attempted. The trace viewer is a GUI tool that allows you to explore recorded Playwright traces of your tests. It provides a visual representation of each action along with DOM snapshots and action details such as time, parameters, return value, and log messages.

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

test('my test', async ({ page }) => {
  await page.goto('https://ray.run/');
  // Add your breakpoint here
  // Use the pick locator feature
  // Check the actionability logs and trace viewer
});

These debugging capabilities make it easier for you to identify issues during testing by providing insights into the element selection process, actionability checks, and detailed logs.