Rayrun
← Back to Discord Forum

Is it possible to use the pick locator on a debug browser window?

I use the playwright debug functionality a lot when creating tests, but a common issue I hit is trying to figure out the correct locator for an element. The built in pick locator functionality is extremely useful, but I need to open a new window, replicate the same state as the test that I am writing, and then get the correct locator.

This workflow gets boring pretty quick, and it seems like it should be possible to run a pick locator on the debug browser window when test has hit a breakpoint.

This thread is trying to answer question "Is it possible to use the pick locator on a debug browser window when test has hit a breakpoint?"

0 replies

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.

Related Discord Threads

TwitterGitHubLinkedIn
AboutQuestionsDiscord ForumBrowser ExtensionTagsQA Jobs

Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email [email protected].