Поиск пути DOM позволяет вам навести указатель мыши на любой элемент на странице, чтобы выявить его уникальный селектор CSS, короткий селектор, XPath и готовый к вставке фрагмент querySelector. Щелкните для блокировки элемента, затем перемещайтесь с помощью кнопок Parent/Child/Sibling. Необходимо для пользователей Selenium, Puppeteer, Playwright и Cypress.
Написание тестов автоматизации, веб-скреперов или букмарклетов означает написание селекторов — но выяснение стабильного, уникального селектора для конкретного элемента утомительно. Вы открываете DevTools, проверяете, щелкаете правой кнопкой мыши, копируете селектор и надеетесь, что результат действительно уникален и стабилен. Поиск пути DOM делает это одним щелчком. Активируйте инструмент и наведите указатель мыши на любой элемент на странице — он выделяется фиолетовым при движении. Щелкните для блокировки, и панель заполнится четырьмя форматами селектора: уникальный селектор CSS на основе пути, короткий селектор (тег + классы или id), абсолютный XPath и фрагмент document.querySelector('...'), завернутый в код и готовый к вставке в скрипт. После блокировки вы можете перемещаться по дереву DOM с помощью кнопок Parent / First Child / Prev Sibling / Next Sibling без потери фокуса. Атрибуты data-testid обнаруживаются и приоритизируются, если присутствуют — идеально для Playwright/Cypress, которые используют их как якоря. Инструмент также показывает тег, id, классы, размер ограничивающего прямоугольника и свойства display/position для быстрого контекста.
Переместите мышь по странице, чтобы увидеть выделенные фиолетовым элементы. Щелкните для блокировки — инспектор DevTools не требуется.
Уникальный путь CSS, короткий селектор, абсолютный XPath и завернутый фрагмент querySelector. Выберите любой, который подходит вашему инструменту.
После блокировки используйте кнопки Parent / First Child / Prev / Next для перемещения по DOM без повторного выбора.
Каждый селектор имеет собственную кнопку копирования. Получите формат, необходимый вашему скрипту, и вставьте прямо в ваш тест или скребок.
Отображает тег, id, классы, размер, дисплей и позицию — быстрый обзор без повторной проверки.
Если элемент имеет id, уникальный CSS использует #id. Если присутствует data-testid, он выявляется для использования Playwright/Cypress.
Выберите тестируемый элемент, скопируйте его селектор и вставьте в тестовый код — больше не угадывайте уникальные пути.
Найдите структурный селектор для элементов списка на цели скребка. Используйте короткий или селектор на основе пути в зависимости от потребностей в стабильности.
Заблокируйте элемент и скопируйте его путь, чтобы исследовать, почему CSS не применяется — уникальный селектор показывает полное расположение элемента в дереве.
Скопируйте предварительно завернутый фрагмент document.querySelector(...) прямо в консоль DevTools для быстрой интерактивной отладки.
При аудите доступности используйте XPath для передачи элементов в axe-core или другие инструменты a11y, которые ожидают ссылок XPath.
Щелкните значок поиска пути в панели DevSuite Pro. Инструмент сразу же активируется в режиме выбора.
Переместите мышь по странице — каждый элемент выделяется фиолетовым при прохождении. Прокрутите по мере необходимости, чтобы найти свою цель.
Щелкните элемент, который хотите. Средство выбора остановится и панель заполнится форматами селектора, контекстом и кнопками копирования.
Используйте кнопки Parent/Child/Sibling для уточнения выделения или щелкните выбрать элемент, чтобы снова начать наведение мыши.
Щелкните копирование рядом с нужным форматом (CSS, XPath или querySelector). Вставьте прямо в ваш тест, скребок или консоль.
Установите DevSuite Pro бесплатно и разблокируйте более 64 инструментов разработчика для вашего браузера.
