Pickwright — Pick Playwright locators

Try it here.
Click anything.

This is the real thing, running in the page. Pick a field below — the popup, the ranking table further down, and the spec file all update from that one click.

your app under test PICKER ARMED ●

Click any element to pick it.

ada@example.com

Password

••••••••••

Continue with SSOdata-testid

Forgot your password?

// live output

Every pick lands in your spec file.

Pick, copy, paste. The extension writes the locator the way you would — the code on the right is generated from the elements you clicked above.

        login.spec.ts
        TypeScript
      
// locators picked with Pickwright
import { test, expect } from '@playwright/test';
 
test('user signs in', async ({ page }) => {
});

What it does.

Surfaces the Playwright locator the framework actually recommends — not just whatever CSS the browser can trace.

01 click-to-pick Hover any element to highlight it. Click to generate all locator strategies at once — best ranked first, alternatives listed below. Alt+Shift+L arms the picker without opening the popup. core

02 13 strategies getByTestId, getByRole, getByLabel, getByPlaceholder, getByAltText, getByText, getByTitle, and CSS tiers — all scored and ranked per Playwright's own preference order. locators

03 multi-pick Stay armed across clicks and collect a whole form in one pass, with a live count as you go. Every pick lands in history, ready to copy. workflow

04 dropdown picking Hold Shift and click to let the page open its own dropdowns and menus while the picker stays armed, then pick inside. interaction

05 shadow DOM Drills through open shadow roots to find the real element under your cursor. No manual shadow selector crafting needed. DOM

06 iframe support Detects same-origin iframes and prepends the correct frameLocator() chain automatically. frames

07 Angular-aware Ignores throwaway mat-, cdk- and ng-reflect-* noise, and prefers formcontrolname, which survives production builds. frameworks

08 history, your rules Your last 20 picks stay on your machine with the page they came from. Keep them, wipe them on every browser start, or record nothing at all. privacy

09 Chrome + Firefox One extension, two browsers. Same picking experience and locator quality on Chrome, Edge and Firefox 140+. cross-browser

Up in thirty seconds.

Download from GitHub Releases

From the GitHub Releases page: on Chrome or Edge, unzip pickwright-chrome-*.zip and load the folder unpacked. On Firefox 140+, install the signed .xpi directly. Chrome Web Store & Firefox Add-ons listings coming soon.

Open your app

Navigate to the page under test. Open Pickwright from the browser toolbar.

Click. Copy. Paste.

Hover to highlight, click to pick. Copy the locator directly into your Playwright test file.

// example output

          login.spec.ts
          TypeScript
        

// locators picked with Pickwright
import { test, expect } from
  '@playwright/test';

test('user signs in', async ({ page }) => {
  await page.goto('/');

  // ↓ picked — getByLabel
  await page
    .getByLabel('Email')
    .fill('user@example.com');

  // ↓ picked — getByRole
  await page
    .getByRole('button', {
      name: 'Sign in'
    })
    .click();
});

Pick the
right
locator.

Try it here.
Click anything.

What it does.

Playwright's ranking.
Strictly.

Up in thirty seconds.

// example output

Start picking locators
in under a minute.

Pick the right locator.

Try it here.Click anything.

What it does.

Playwright's ranking.Strictly.

Up in thirty seconds.

// example output

Start picking locatorsin under a minute.

Pick the
right
locator.

Try it here.
Click anything.

Playwright's ranking.
Strictly.

Start picking locators
in under a minute.