diff --git a/web/llms.txt b/web/llms.txt new file mode 100644 index 0000000..f22b635 --- /dev/null +++ b/web/llms.txt @@ -0,0 +1,39 @@ +# InspectorBooster + +> Ultra CSS/XPath inspector for QA engineers — a smart selector engine that ranks testid, role, aria, placeholder, class, CSS, and XPath selectors by stability, with scopes, aliases, interaction recording, and one-click exports to Playwright and Cypress. + +InspectorBooster is a free, open-source Chrome extension (Manifest V3) built for QA engineers who are tired of guessing at CSS selectors. Open the side panel, hover any element, and it ranks every selector strategy it can find — testid, id, role, aria-label, placeholder, class, CSS path, XPath, and 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. + +## Selector engine + +The content script generates all viable selectors for the element under the cursor and scores each strategy (unique / non-unique): +- data-testid — 98 / 78 +- #id — 92 / 52 +- Role + accessible name — 88 / 65 +- aria-label — 83 / 56 +- placeholder — 75 / 55 +- Class chain — 72 / 30-65 +- CSS path — 62 / 35 +- Partial class (e.g. `[class*="product-card"]`) — 58 / 38 +- Text (exact) — 44 +- Text (contains) — 40 +- Absolute XPath — 28 + +A missing-testid warning flags elements that lack a `data-testid` attribute so flaky selectors get caught before they land in a test suite. + +## Workflow + +- **Inspect** — hover any element from the side panel; switch RAW / Playwright / Cypress display mode globally; copy the formatted string ready to paste into test code. +- **Library** — save elements into named, nestable scopes with human-readable aliases; set a scope container selector and framework exports chain through it automatically (`page.locator('[data-testid="card"]').getByTestId('buy-btn')`). +- **Record** — capture clicks, inputs, keypresses, and navigation with a live feed while recording; rename, exclude, or swap the active selector on any step afterward; export a recording as a Playwright `.spec.ts` or Cypress `.cy.js` file. +- **Export / Import** — 6 formats: JSON and YAML (scoped or flat map), Playwright TypeScript, Cypress JavaScript. Preview before download, or paste JSON/YAML back in to import. + +## Testing & stack + +Covered by 76 Playwright e2e tests across inspector, library, recording, export, and popup suites. Built with Chrome MV3 (ISOLATED + MAIN world content scripts), React 18, Zustand, TanStack Query v5, and Tailwind CSS, with IndexedDB (via `idb`) for local storage of scopes, elements, and recordings. + +## Contact / Links + +- GitHub: https://github.com/AxeForging/inspectorbooster +- Live site: https://axeforging.github.io/inspectorbooster/ +- More AxeForge tools: https://tools.axeforge.io