Skip to content

Playwright Selector Builder

Test getByRole, getByText, getByLabel, getByPlaceholder, CSS or XPath Playwright locators on pasted HTML, with match count and a stability score.

Playwright Selector Builder

HTML

Rendered preview

Locator

Result

Hit count
—
Stability
—

TypeScript

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

Updated . Provided as is. Check the output before you rely on it in production.

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.

Questions and answers

What is Playwright Selector Builder?
A Playwright locator is the query a test uses to find an element, ideally by what a user sees, such as role, label or text. This builder runs getByRole, getByText, getByLabel, getByPlaceholder, CSS or XPath locators against pasted HTML, shows the match count and a stability score, and outputs a TypeScript snippet.
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.
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.