+ 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
+