Skip to content
Add to Chrome (opens in a new tab)
PLAYWRIGHT LOCATOR GENERATOR

Find the element.
Choose the locator.

Inspect an element in Chrome and copy a Playwright locator. See what your selector depends on before you put it in a test.

Add to ChromeTry the example
Free extension for desktop Chrome. Try it before signing up.

One element. Three ways to find it.

INTERACTIVE EXAMPLE
studio.example / settingsSample app
ACME STUDIO

Team settings

Workspace
Acme Studio
Plan
Team 3 seats
TARGET ELEMENTdata-testid="team-save"

01 / CHOOSE A LOCATOR
Playwright locator
page.getByRole('button', { name: 'Save changes', exact: true })

Checking sample…in the sample HTML

One match in this example. Confirm it is the intended target before using it in a test.

DEPENDS ONA button named “Save changes”

Describes the action a person sees. A label change can change the match.

02 / CHANGE THE PAGE

One button. All three locators find it. The locator stays the same.

Counts come from this sample’s HTML, not a Playwright run. Verify it in your test

01 / FROM A MATCH TO A USEFUL TEST

One match.
Then the right outcome.

A locator finds the element. Your test still needs to prove the behavior.

  1. Confirm the target

    Check that the locator finds the intended element in the state your test will use. Narrow its scope if more than one element matches.

  2. Review what it depends on

    A button name, a maintained test ID, or a CSS attribute can be a useful contract. Choose one your team expects to keep.

  3. Assert the outcome

    Run the action in Playwright and check the result a user should see. Finding an element is only part of a useful test.

LOCATE → ACT → ASSERT
Playwright assertion example
const save = page.getByRole('button', {
  name: 'Save changes', exact: true,
});

await expect(save).toHaveCount(1);
await save.click();
await expect(page.getByRole('status'))
  .toHaveText('Team updated.');

Assumes Playwright Test’s page and expect. Use your own page setup and expected result.

Read Playwright’s locator guidance
INSIDE THE EXTENSION Illustrated with sample data
Save changes

button · studio.example

<button>
SELECTED ELEMENT
<button id="team-save">
Save changes
</button>

Alternative Selectors

CSS
#team-save
XPath
//button[@id='team-save']

Test Automation

Playwright snippet
await page.locator("#team-save");

CSS-based output from the element you inspect. Review it before adding actions or assertions.

02 / TAKE IT TO YOUR OWN APP

Start with the page
in front of you.

Inspect an element and review its selectors with our extension

  1. Inspect the live element

    Open your app in Chrome, activate the extension, and select the button or field you want to test.

  2. Review and copy

    Check the available selectors, then copy the CSS-based Playwright snippet from Test Automation. Consider a role or test ID locator when it better expresses your test’s intent.

  3. Keep the context close

    If a bug led you here, record the steps and share the relevant element with the receiving engineer so they can review the same behavior.

See the recording workflow
03 / KNOW WHAT TO KEEP

A little more context.
A better choice.

Compare locator tools
GUIDE / 01

Role or CSS? Make the tradeoff clear.

When accessible names help, and when a different contract fits.

GUIDE / 02

Give test IDs a little structure.

Naming, ownership, and uniqueness that make test IDs useful.

GUIDE / 03

Find why the locator broke.

Review what changed before replacing the selector.

BEFORE YOU TRY IT

Good questions.
Clear answers.

Troubleshoot a flaky test
How do I generate a Playwright locator with Samelogic?

Install the extension in desktop Chrome, open the page you want to inspect, and select an element. Review the available selectors and copy the Playwright snippet from Test Automation. The extension’s snippet uses a CSS selector with page.locator(). Review the target in your Playwright test before using it.

Should I use getByRole, getByTestId, or CSS?

Start with a role and accessible name when those describe the interaction you are testing. Use a test ID when your team maintains an explicit testing contract. Use CSS when a stable attribute is the appropriate target. Each choice has dependencies; the example above shows what happens when some of them change.

Does the extension generate getByRole and getByTestId automatically?

The current Test Automation output is a CSS-based Playwright locator. The role and test ID options on this page are educational examples you can copy and adapt. They are not a preview of automatic role or test ID generation in the extension.

Is a matching locator enough to prevent flaky tests?

No. A locator can match an element while the test still has timing, data, state, or network problems. Check the intended target, add an assertion for the expected outcome, and run the test in the relevant environment. The interactive example checks its sample HTML; it does not run Playwright.

Can I try it before creating an account?

Yes. This locator example works without an account, and you can install the Chrome extension to inspect elements and copy selectors before signing up. An account is needed for workspace features such as saving and sharing.

INSPECT FIRST. TEST WITH CONTEXT.

Your next locator starts
with the real element.

Open your app. Inspect the target. Take a locator you can review back to your test.

Add to ChromeFree for desktop Chrome.
Try it before signing up.Review recording privacy