Как пользоваться картой стабильности
StableHTMLFinder сравнивает несколько загрузок страницы и показывает элементы и признаки, которые сохранились во всех наблюдениях. Это помогает продвинутому пользователю подобрать селектор, не опираясь на случайно меняющиеся классы, id и структуру.
Страница StableHTMLFinder Установить StableHTMLFinder из Chrome Web Store
Обычный сценарий
- Откройте страницу, где нужно найти элемент.
- Выберите число загрузок. Двух обычно достаточно для быстрого просмотра; большее число делает карту точнее.
- Запустите анализ. После каждой загрузки расширение ждёт заданное время, чтобы страница успела построить обычное содержимое.
- Найдите элемент на карте: раскрывайте ветки или воспользуйтесь поиском.
- Откройте меню ⋮ у нужного узла, прочитайте словесное описание признаков и скопируйте CSS-селектор либо правило BlockIt.
- Вставьте результат в соответствующее поле BlockIt и проверьте его на странице.
Чем больше загрузок, тем меньше риск принять случайное совпадение за постоянный признак. Например, две одинаковые буквы в динамическом id могут случайно совпасть два раза, но обычно не переживут ещё несколько загрузок.
Как читать карту стабильности
Каждая строка карты соответствует HTML-элементу. Вложенность строк повторяет подтверждённую структуру страницы: элементы с отступом являются потомками расположенного выше элемента. Карта показывает только признаки, стабильность которых удалось подтвердить во всех загрузках. Если привычного класса, атрибута или участка дерева нет на карте, это не обязательно означает, что его нет на странице: он мог изменяться между наблюдениями.
<div>,<a>,<section>— стабильное имя тега.id="menu"— имя атрибута и всё его значение совпали во всех загрузках.data-*,*-label,*test*— стабильна только часть имени атрибута: оно соответственно начинается сdata-, заканчивается на-labelили содержитtest.id^="prefix"— значение атрибута начинается с указанного текста;id$="suffix"— заканчивается им;id*="part"— содержит его. Знак=без^,$или*означает полное совпадение.- Имя атрибута без значения означает, что стабильно само наличие атрибута, но его значение менялось или не было подтверждено.
class(3 класса) означает стабильное количество классов при нестабильных названиях или полном значении атрибутаclass.- Текст справа от атрибутов — стабильный собственный текст элемента. Кнопка «развернуть» показывает его полностью.
iframe,iframe documentи#shadow-rootотмечают границы особых вложенных частей страницы. Их содержимое продолжается отдельной веткой карты.<...>обозначает изменявшийся или неуверенно сопоставленный участок структуры. Под ним может находиться снова подтверждённый стабильный фрагмент.
Зелёные строки обозначают подтверждённые элементы. Более светлый зелёный используется для вероятного сопоставления или стабильного фрагмента после изменявшегося участка. Оранжевая рамка отмечает совпадение с поисковым запросом, а более яркая рамка — текущее совпадение, к которому перешёл пользователь.
После нажатия ⋮ словесное описание селектора или правила может показать дополнительные подтверждённые признаки: точное количество атрибутов, количество классов, собственный текст, положение среди соседних элементов, номер среди результатов поиска, а также связь с родителем, предком, ребёнком, потомком или соседним элементом. Эти признаки могут использоваться для уточнения результата, даже если отдельной подписи для них нет в самой строке карты.
Поиск по карте
Одно поле поиска умеет искать по отображаемому тексту узла: названию тега, атрибутам, значениям и тексту элемента. В него также можно вставить HTML, скопированный из DevTools: расширение сопоставит его с ветками карты. Обычный CSS-селектор ищется в последнем сохранённом снимке страницы и подсвечивает связанные с ним элементы карты.
Стрелки рядом с полем переходят к следующему и предыдущему совпадению. Поиск не скрывает остальное дерево: так можно сразу изучить родителей и потомков результата.
CSS-селектор или правило BlockIt?
Предпочитайте CSS-селектор, если он использует понятные и устойчивые признаки: стабильный id, имя атрибута, постоянное значение или ясную структуру. Обычный CSS проще и обычно работает быстрее.
Правило BlockIt нужно, когда CSS недостаточно: например, необходимо учитывать число классов или атрибутов, динамическое имя атрибута, собственный текст либо номер среди результатов. Правила мощнее, но могут работать немного медленнее.
Карта генерирует варианты автоматически, но эта функция ещё развивается. Не полагайтесь на неё без проверки: читайте человеческое описание того, что ищет правило. Жирное предупреждение означает, что уникальность результата не удалось подтвердить.
Почему исходный репозиторий не публикуется
Расширение создано, чтобы помогать пользователям разбираться с меняющейся разметкой сайтов. Открытый репозиторий с подробным описанием алгоритмов упростил бы сервисам намеренное усложнение кода именно против карты стабильности. Поэтому исходный репозиторий не публикуется. Это не отменяет проверки расширения магазином Chrome и не является обещанием полной технической секретности.
Связь с BlockIt
StableHTMLFinder помогает найти устойчивые признаки; BlockIt применяет созданное правило и скрывает или удаляет совпавшие элементы. Вместе они полезны, когда обычный селектор из DevTools ломается после обновления страницы.
BlockIt является отдельным расширением и не требуется для построения карты.