Open the side panel, hover any element, and InspectorBooster ranks every selector strategy it can find — testid, id, role, aria-label, placeholder, class, CSS path, XPath, text — each scored 0-100 by stability and uniqueness. Organize what you find into scopes and aliases, record whole interaction flows, and export straight to Playwright or Cypress.
The content script generates all viable selectors for the element under your cursor, scores each one, and hands you the ranked list — not just the first one that happens to match.
Generates testid, id, role, aria-label, placeholder, class, CSS path, XPath, and text selectors for every element, each scored 0-100 by stability and uniqueness.
Flags elements that lack a data-testid attribute so flaky selectors get caught before they ship into a test suite.
Organize elements into named, nestable scopes (Login Page, Header, Product List) and give them human-readable aliases, searchable by name, description, or tag.
Captures clicks, inputs, keypresses, and navigation with full ranked selector options per step, then exports the whole flow as a test script.
Every strategy gets a score for a unique match and a lower score for a non-unique one, so the panel can auto-select your preferred type on every click.
| Strategy | Type | Score (unique/non-unique) | Example |
|---|---|---|---|
| data-testid | testid | 98 / 78 | [data-testid="login-btn"] |
| #id | id | 92 / 52 | #login-btn |
| Role + name | role | 88 / 65 | role=button[name="Sign In"] |
| aria-label | aria | 83 / 56 | button[aria-label="Close"] |
| placeholder | placeholder | 75 / 55 | input[placeholder="Search..."] |
| Class chain | css | 72 / 30-65 | button.btn.btn-primary |
| CSS path | css | 62 / 35 | #login-form > div > button |
| Partial class | css | 58 / 38 | [class*="product-card"] |
| Text (exact) | text | 44 | //button[normalize-space(.)="Sign In"] |
| Absolute XPath | xpath | 28 | //html/body/div[1]/form/button[1] |
Hover any element from the side panel to see its ranked selector options. Switch RAW / Playwright / Cypress display mode globally, and copy the formatted string ready to paste into test code.
Save elements into scopes and give them aliases. Set a scope container selector and framework exports chain through it automatically: page.locator('[data-testid="card"]').getByTestId('buy-btn').
Capture clicks, inputs, keypresses, and navigation with a live feed while recording. Rename, exclude, or swap the active selector on any step afterward.
Six formats: JSON and YAML (scoped or flat map), plus Playwright .spec.ts and Cypress .cy.js. Preview before download, or paste JSON/YAML back in to import.
Skip the class-name guesswork — the panel ranks the stable options first and warns when an element has no data-testid at all.
Switch the display mode to PW and every copy is already formatted, from a simple click target to a full role query.
page.getByRole('button', { name: 'Sign In' })
Click through the flow once with recording on, then export the whole interaction straight to a Playwright spec.
login-flow.spec.ts
Give a product card scope its own container selector, and every element inside exports chained through it — no duplicated boilerplate.
cy.get('[data-testid="card"]').find('[data-testid="buy-btn"]')
Build the extension
cd extension && npm install && npm run buildOpen chrome://extensions and enable Developer mode
Load unpacked — select extension/dist/
Open the side panel — click the extension icon, or open it from the panel button