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

Описание и применение

CSS‑селекторы часто перестают работать из‑за динамических изменений DOM. StableHTMLFinder собирает несколько снимков страницы, строит карту стабильности DOM и показывает только элементы и атрибуты, которые остаются неизменными, облегчая создание надёжных селекторов.

Задача

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

Результат

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.

Рабочий процесс

• 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.

Доказательства

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

Источник

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

Источник

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

Источник