Why CSS Selectors Break — and How I Built StableHTMLFinder to Analyze DOM Stability

Description and use

CSS selectors often break due to dynamic DOM changes. StableHTMLFinder collects multiple page snapshots, builds a DOM stability map, and highlights only elements and attributes that remain unchanged, simplifying reliable selector creation.

Problem

CSS selectors often fail after page reloads because dynamic classes, IDs, and DOM structures change, making selectors unreliable for automation, scraping, or blocking elements.

Outcome

StableHTMLFinder provides a visual stability map that distinguishes fully stable, relatively stable, and unstable DOM parts, allowing users to craft selectors that remain valid across page reloads.

Workflow

• 1. Load target page multiple times in Chrome extension.
• 2. Capture DOM snapshots for each load.
• 3. Compare snapshots to identify elements that persist across loads.
• 4. Build a stability map showing stable elements, relatively stable elements, and islands of stability.
• 5. Use the map to select reliable CSS selectors for automation or blocking.

Evidence

I encountered this problem while developing BlockIt, a Chrome extension for blocking unwanted elements on web pages.

Source

StableHTMLFinder is a free Chrome extension that analyzes multiple consecutive page loads and builds a stability map from the collected DOM snapshots.

Source

The stability map can therefore distinguish between several situations: An element, its attributes, and their values are stable.

Source