Skip to content

Playwright Selector Builder

Paste HTML, build getByRole/getByText/getByLabel/CSS/XPath locators, see hit count and a stability score for brittle selectors, copy the ready-to-paste TypeScript snippet.

Playwright Selector Builder

Playwright Selector Builder

Paste HTML, build a locator, and read hit count plus a heuristic stability score before pasting into your spec file.

HTML

Rendered preview

Locator

Result

Hit count
0
Stability
0
  • • Could not parse HTML

TypeScript

await page.getByRole("button", { name: "Sign in" }).click();

Last updated:

This tool is provided as-is for convenience. Output should be verified before use in any production or critical context.

For AI agents: how to call this tool

Machine-readable contract, endpoints and examples. Humans can ignore this section.

Best Path For Builders

Browser workflow

Runs instantly in the browser with private local processing and copy/export-ready output.

Browser Workflow

This tool is optimized for instant in-browser execution with local data handling. Run it here and copy/export the output directly.

/playwright-selector-builder/

For automation planning, fetch the canonical contract at /api/tool/playwright-selector-builder.json.

How to Use Playwright Selector Builder

  1. 1

    Paste your HTML

    Drop the HTML snippet you want to test against into the left textarea, or click Load sample to start with a login form. The rendered preview shows what Playwright will see.

  2. 2

    Pick a locator strategy

    Choose between getByRole, getByText, getByLabel, getByPlaceholder, CSS, or XPath. The recommended order matches Playwright's official guidance — role-based first, raw selectors last.

  3. 3

    Tune the locator

    For role-based locators, pick a role and (optionally) an accessible name. For CSS or XPath, type the selector. Toggle exact match for stricter name matching.

  4. 4

    Read hit count and stability

    The Result card shows how many elements match (1 is ideal) and a stability score. Warnings flag nth-child, hashed class names, and other brittle patterns. Copy the TypeScript snippet when you're happy.

Frequently Asked Questions

What is Playwright Selector Builder?
Playwright Selector Builder lets you paste HTML, construct getByRole, getByText, getByLabel, getByPlaceholder, CSS, or XPath locators, and see hit count plus a stability score before pasting the snippet into your Playwright spec.
How is the stability score calculated?
A heuristic deducts points for nth-child, deep tag chains, hashed class names, numeric XPath indices, and zero-or-many match counts. Role-based locators with exactly one match score highest because they survive structural refactors.
Does it actually run Playwright?
No. The matching engine runs in your browser using DOMParser plus a Playwright-compatible accessible-name and role calculation. The generated snippet is what you would paste into a real Playwright test.
Does it send my HTML to a server?
No. Parsing, matching, and stability scoring all happen client-side. Your HTML — which may include internal markup — never leaves the browser tab.
Which roles does getByRole support?
Twenty common ARIA roles including button, link, textbox, combobox, heading, dialog, navigation, and form, with implicit role detection for native elements such as button, anchor, input, and heading levels h1 through h6.