SuriScope

The problem

A failing acceptance test always asks the same question: is it the product, the test, or the environment? And when the test is right, you still have to check what actually leaves towards analytics, because a tracking plan is rarely validated by eye.

SuriScope came from that double observation: existing picker tools hand you a selector without saying whether it will last, and dataLayer checks happen in the console, by hand, every release.

What I decided

Chrome Manifest V3, React and Zustand, and above all no remote service: everything is computed in the tab. A test tool that ships the client’s page somewhere is not a tool you can use at a client’s site.

The selector is produced by 34 internal CSS strategies, 13 XPath strategies and three libraries, then scored out of 100: strategy class, DOM position, dependence on text, generated classes, sibling order. The score is not decorative: it is explained in the panel, with ranked alternatives.

Then a stability test: fifteen plausible DOM changes (class rename, inserted sibling, added wrapper) are applied and reverted, and we count how many break the selector. One that survives twelve out of fifteen is one you can put in CI.

What broke

The first scoring was binary: the selector held or it did not. On real pages it lied — a `data-testid` and a `div:nth-child(3) > span` scored the same if neither broke during the test.

The second scoring was too generous with frameworks. Detecting React, Vue or Angular (21 frameworks recognised) says nothing about selector stability: it only says the page is hydrated. Those points became displayed information, not a bonus.

The real lesson: a score must be contestable. Every lost point is shown with its reason, otherwise the tool becomes a black box that agrees with whoever reads it.

The rest of the workbench

Around the selector: Playwright code generation (readable `getByTestId`, `getByRole` locators), Cypress, Selenium Java and Python, Page Object; whole-script checking from a single paste; a library of annotated, exportable selectors; element tools (real styles, computed contrast, click test).

And page freeze: freezing the DOM to inspect a menu that only opens on hover. It is the most mundane feature and the one used most often.