Stop guessing locators. Playwright has a built-in tool that tells you exactly what locator to use for any element on the page. It is called the Playwright Inspector, and the "Pick Locator" feature is its most useful capability. Think of it as a locator cheat sheet for every page you test.
# Method 1: Codegen mode -- opens browser + inspector
npx playwright codegen https://www.testerrank.com
# Method 2: Debug mode -- opens inspector with step controls
npx playwright test --debug
# Method 3: From VS Code extension
# Open Testing sidebar > Click "Pick Locator" buttonOpen Codegen: npx playwright codegen https://www.testerrank.com/banking
Click the "Pick Locator" button in the Inspector toolbar (crosshair icon)
Hover over any element in the browser -- the Inspector shows the suggested locator in real time
Click the element -- the locator is copied to the Inspector panel
Copy the locator and paste it into your test code
Verify it works: add it to a test and run with --headed
The Inspector follows the same priority hierarchy. It tries getByRole first, then getByLabel, getByPlaceholder, getByText, and finally falls back to CSS. It always gives you the most resilient locator available.
| Element | Inspector Suggestion | Why |
|---|---|---|
| <button>Login</button> | getByRole('button', { name: 'Login' }) | Button with text -- role-based is best |
| <input id="email"> with <label>Email</label> | getByLabel('Email') | Input with label -- label-based |
| <input placeholder="Search..."> | getByPlaceholder('Search...') | No label, has placeholder |
| <p>Welcome to the app</p> | getByText('Welcome to the app') | Non-interactive text content |
| <div data-testid="card"> | getByTestId('card') | No role/text, has test ID |
| <div class="widget"> | locator('.widget') | Nothing else available, falls back to CSS |
When the Inspector is open (via --debug or page.pause()), you can type locators in the Locator input field at the bottom. Playwright highlights matching elements on the page in real time. This is the fastest way to test if your locator matches the right element.
// Add page.pause() to freeze the test and open Inspector
import { test, expect } from '@playwright/test';
test('explore locators', async ({ page }) => {
await page.goto('/shopping');
// Freeze here -- Inspector opens
// Type locators in the Locator field to test them
// Matching elements get highlighted on the page
await page.pause();
// After finding the right locator, use it in your test
await page.getByRole('button', { name: 'Add to Cart' }).first().click();
});VS Code extension users: you can pick locators directly in the editor without running a command. Open the Testing sidebar, click "Pick Locator," hover and click elements in the browser. The locator appears at your cursor position in the editor. Fastest workflow.
The Inspector runs in Chromium by default. If your app behaves differently in Firefox or Safari, make sure to test those locators separately. Most locators work across browsers, but edge cases exist with custom web components.
Q: How do you find the right locator for an element you have never seen before?
A: I use Playwright Codegen or the VS Code extension's Pick Locator feature. I hover over the element and the tool suggests the best locator, following the priority hierarchy. I verify it matches only one element by typing it in the Inspector's locator input field and checking the highlight count. If it matches multiple elements, I chain it with a parent container or add .filter() to narrow it down. Then I copy it into my test and run with --headed to confirm it works in the actual test context.
Key Point: Use Pick Locator in Codegen, --debug mode, or VS Code extension. The Inspector suggests the best locator and highlights matches in real time.