Есть ли аддон, который вы можете проверить селекторы css в firefox?
Мне было интересно, есть ли такой аддон в firefox, где вы можете проверить пути css, чтобы проверить, находят ли они правильный элемент? Я искал что-то похожее на xpather для местоположений xpath.
13 ответов
FireFinder делает именно то, что вы ищете. Вы можете оценить выражения CSS или XPath, он перечислит соответствующие элементы, а также нарисует красную границу вокруг них.
Если вам просто нужно выполнить быстрое тестирование, вы также можете открыть Панель инструментов разработчика (F12) и использовать $$('selector') для быстрого поиска.
Да, вы можете пойти на Палий, универсальное дополнение для веб-разработки Firefox.
чтобы протестировать селектор CSS, перейдите на вкладку "консоль" и введите команду в нижней форме (подробнее о том, как найти командную строку).
внутри командной строки используйте $$("your CSS selector") синтаксис для проверки селекторов CSS, объясненный более подробно здесь. Например, используйте эту команду для выбора все:
$$("body")
вот как использовать встроенный селектор запросов CSS в Firefox:
на Инструменты > Веб-Разработчик > Веб-Консоль
кроме того, вы можете нажать ctrl shift i в Windows/Linux, или cmd opt i в Mac.
введите свой селектор CSS (используя традиционный $$() синтаксис) в самом нижнем левом углу.
список узлов объекта появится на правой панели приставка.
$$('div')
[object NodeList]
$$('div').length
42
это удобно для Selenium WebDriver экземпляров Firefox, где наличие расширения не представляется возможным.
Не уверен, что это помогает. Попробуйте Firebug. Позволяет выбрать элемент, и посмотреть, что это путь в CSS, а также CSS в настоящее время применяется.
можно сделать некоторые эксперименты в html / css прямо в браузере.
FireFinder хорош, но я начал с и предпочитаю FirePath для Firebug. Он работает аналогично, но может дать вам расширенный вид HTML вокруг соответствующих элементов без необходимости нажимать inspect, FriendlyFire и т. д.
поле, в котором вы тестируете локатор, также имеет проверку синтаксиса, где поле становится красным, если синтаксис плохой. Просто нажмите eval, чтобы проверить локатор и матчи показывают ниже с дополнительным HTML вокруг соответствующих элементов.
но для тестирования CSS locator, вы хотите, чтобы выпадающий вариант "шипение", а не CSS в FirePath. Опция CSS работает только для простых селекторов CSS, сложные работают только в режиме Sizzle (L, например:
div.namedService.фотосервис > див.photoBrowserContainer: nth-child (3) > div.albumName: содержит ('someName')
стандартная функция DOM document.querySelectorAll то, что вы хотите, современный браузер все его поддерживают. См. документ
https://developer.mozilla.org/en-US/docs/DOM/Document.querySelectorAll
вы можете вызвать его во встроенной веб-консоли. В консоли есть ярлык $$, называй это как $$('div a').
мне нравится firebug, потому что он может щелкнуть для прокрутки, чтобы просмотреть элемент. Он также может протестировать в панели "CSS".
кнопка "Найти" в Selenium IDE очень полезна для этого. Он использует тот же метод для поиска элементов, что и тесты, поэтому его можно использовать для поиска элементов с помощью любой из поддерживаемых стратегий.
jQuery
С помощью jQuery вы можете легко добавить большую красную границу к элементу с помощью селектора.
$(document).ready(function(){
$('#your-css-selector').css('border', '5px solid red');
});
Firebug (https://addons.mozilla.org/en-US/firefox/addon/1843) или Панель Инструментов Веб-Разработчика (https://addons.mozilla.org/en-US/firefox/addon/60). Оба показывают путь.
Firefinder отлично подходит для тестирования селекторов. Однако, если вы также хотите получить селектор CSS для элемента, попробуйте SelectorGadget.
Я нашел FirePath действительно отличным, он позволяет вам искать не только CSS, но и xPath. Хотел было что-то подобное для Chrome и IE, но увы!