What StyleSpy does
StyleSpy is a CSS and state inspector Chrome extension for developers and QA engineers. One click captures every element on the page — including the ones other tools miss. Unlike single-property pickers, StyleSpy reads the whole page at once and shows each element's computed colour, background, font family, size and weight, line-height, spacing, alignment and box model — then hands you copy-ready CSS selectors and XPath for Selenium, Playwright and Cypress.
Inspect what other tools can't
- Capture Page — read every element at once into a full, sortable table.
- Freeze & Force State — lock hover and focus states so you can inspect styles that normally vanish.
- Ghost DOM — reveal hidden and dynamically injected elements that standard inspectors skip.
- Mutation tracking — watch the DOM change in real time as the page updates.
- Locator health & WCAG contrast — grade the robustness of generated selectors and check colour contrast for accessibility.
Who it's for
QA engineers and SDETs writing UI automation who need reliable locators, and frontend developers debugging stubborn hover, focus or dynamically rendered styles. It pairs well with recorded UI scripts from FlowScribe and autonomous exploration from Pathfinder. Free on the Chrome Web Store; works in any Chromium browser.
FAQ
Can it inspect hover and focus styles? Yes — freeze or force a state and the normally-disappearing styles stay put for inspection.
Does it generate locators for test frameworks? Yes — copy-ready CSS selectors and XPath for Selenium, Playwright and Cypress, with locator health grading.
Can it find hidden elements? Yes — Ghost DOM reveals hidden and dynamically injected elements.
Is it free? Yes, free on the Chrome Web Store.