Несколько загрузок
Снимки создаются после независимых перезагрузок, поэтому случайно совпавший DOM не считается стабильным.
Расширение для Chrome · DOM-анализ
Надёжные селекторы для изменчивых страниц
StableHTMLFinder сравнивает структуру страницы после нескольких независимых загрузок и показывает, на какие элементы действительно можно опереться в автоматизации, тестах и правилах фильтрации.
Задача
Почему селектор перестаёт работать после перезагрузки
На многих сайтах используются обфускация HTML, динамически формируемые классы и идентификаторы, меняющаяся вложенность и служебные элементы. В частности, такие приёмы могут затруднять обнаружение и блокировку рекламных блоков. CSS-селектор, составленный по одной загрузке страницы, часто включает случайные значения и перестаёт находить элемент после обновления. StableHTMLFinder показывает структуру страницы вместе с признаками элементов, которые сохраняются между несколькими загрузками.
Карта стабильности
На карте видны устойчивые теги, имена и значения атрибутов, классы, текст и другие признаки структуры.
Сложные границы
В анализ включаются доступные iframe и Shadow DOM — с сохранением контекста, в котором найден элемент.
CSS и правила BlockIt
Расширение предлагает обычный CSS-селектор или правило BlockIt. Правила BlockIt дополняют синтаксис селекторов признаками, которые CSS выразить не может: количеством атрибутов и классов, собственным текстом, а также шаблоном в имени или значении атрибута.
Уникальность
Селектор строится по результатам нескольких загрузок
Большинство инструментов предлагает селектор для элемента в текущем состоянии DOM. На обычной странице этого может быть достаточно, но в обфусцированном HTML такой селектор нередко опирается на случайные классы, ID или положение элемента. StableHTMLFinder сначала показывает, какие признаки действительно сохранились между загрузками, и позволяет строить правило на их основе. При этом полезные признаки не ограничиваются возможностями CSS-селекторов.
Рабочий продукт
Расширение опубликовано и решает проверяемую задачу
StableHTMLFinder доступен в Chrome Web Store. Пользователь может установить расширение, провести несколько независимых загрузок страницы и проверить результат анализа на собственном DOM.
Публикация в магазине
Расширение прошло размещение в Chrome Web Store; карточка содержит описание функций, сведения о разработчике и обработке данных.
Не один снимок DOM
Карта строится по двум–пяти загрузкам, что позволяет отличить устойчивый признак от случайного совпадения.
Практический результат
Из подтверждённых признаков можно получить CSS-селектор или более точное правило BlockIt и проверить его на странице.
Сложная разметка
Анализ учитывает доступные iframe, Shadow DOM, динамические атрибуты, собственный текст и структурные связи.
Для кого
Инструмент для работы с реальным вебом
- Пользователи BlockIt, блокирующие элементы сайтов
- QA-инженеры и авторы UI-тестов
- Разработчики браузерных расширений
- Специалисты по веб-автоматизации
- Авторы фильтров и правил блокировки
Как работает
От страницы до проверенного ориентира
Снимки
Расширение собирает структуру страницы несколько раз с заданной паузой.
Анализ
Расширение определяет, какие части структуры сохраняются, а какие меняются от загрузки к загрузке.
Карта
Результат отображается как интерактивное дерево со стабильными и изменчивыми участками.
Селектор
Пользователь находит нужный элемент и получает селектор, опирающийся на подтверждённую структуру.
Технологии
Лёгкая архитектура без UI-фреймворка
Chrome Extension Manifest V3JavaScript ES ModulesChrome APIsDOM snapshot analysisiframe & Shadow DOMNode.js build scriptsNode.js + jsdom testsЛокализация на 8 языков