Ответ 1

FireFinder делает именно то, что вы ищете. Вы можете оценить выражения CSS или XPath, отобразить соответствующие элементы, а также нарисовать вокруг них красную рамку.

Если вам просто нужно выполнить быстрое тестирование, вы также можете открыть панель инструментов разработчика (F12) и использовать $$('selector') для быстрого поиска.

Ответ 2

Да, вы можете пойти FireBug, универсальное дополнение к веб-разработке Firefox.

Чтобы проверить селектор CSS, перейдите на вкладку "Консоль" и введите команду в нижней форме (подробнее о том, как найдите командную строку).

Внутри командной строки используйте синтаксис $$("your CSS selector") для проверки селекторов CSS, более подробно описанных ниже здесь. Например, используйте эту команду, чтобы выделить все:

$$("body")

Ответ 3

Здесь, как использовать встроенный селектор запросов CSS в Firefox:

Перейдите в раздел Инструменты > Веб-разработчик > Веб-консоль

Кроме того, вы можете нажать ctrl shift i в Windows/Linux или cmd opt i на Mac.

Введите свой селектор CSS (используя традиционный синтаксис $$()) в самом нижнем левом углу.

Список объектов node появится на правой панели консоли.

$$('div')
[object NodeList]
$$('div').length
42

Это удобно для экземпляров Selenium Webdriver для Firefox, где расширение не представляется возможным.

Ответ 4

Попробуйте firebug. http://getfirebug.com/

Ответ 5

Не уверен, что это помогает. Попробуйте Firebug. Позволяет выбрать элемент и посмотреть, что это за путь css, а также используемый css.

Можно выполнить некоторые эксперименты в html/css прямо в браузере.

Ответ 6

FireFinder хорош, но я начал с FirePath Firebug и предпочел его. Он работает аналогичным образом, но может дать вам расширенный вид HTML вокруг соответствующих элементов без необходимости нажимать "проверять", "FriendlyFire" и т.д.

В поле, где вы проверяете локатор, также есть синтаксическая проверка, где поле становится красным, если синтаксис плохой. Просто нажмите eval, чтобы проверить локатор, и ниже показано ниже, с дополнительным HTML вокруг соответствующих элементов.

Но для тестирования CSS-локатора вам понадобится выпадающий вариант "Sizzle", а не CSS в FirePath. Опция CSS работает только для простых селекторов CSS, сложные работают только в режиме Sizzle (l, например:

div.namedService.photoService > div.photoBrowserContainer: nth-child (3) > div.albumName: содержит ('someName')

Ответ 7

В выпуске Selenium IDE 1.0.11 встроен строитель локатора CSS

Ответ 8

Стандартная функция DOM document.querySelectorAll - это то, что вы хотите, современный браузер поддерживает ее. См. Документ

https://developer.mozilla.org/en-US/docs/DOM/Document.querySelectorAll

Вы можете вызвать его во встроенной веб-консоли. В консоли есть ярлык $$, назовите его как $$('div a').

Мне нравится firebug, потому что он может щелкнуть, чтобы просмотреть элемент. Он также может тестироваться на панели "CSS".

Ответ 9

Кнопка "Найти" в Selenium IDE очень полезна для этого. Он использует тот же метод для поиска элементов, как и ваши тесты, поэтому их можно использовать для поиска элементов с помощью любой из поддерживаемых стратегий.

Ответ 10

JQuery

С помощью jQuery вы можете легко добавить большую красную границу к элементу с помощью селектора.

$(document).ready(function(){

  $('#your-css-selector').css('border', '5px solid red');

});

Ответ 11

Firebug (https://addons.mozilla.org/en-US/firefox/addon/1843) или Панель инструментов веб-разработчиков (https://addons.mozilla.org/en-US/firefox/addon/60). Оба показывают путь.

Ответ 12

Firefinder отлично подходит для тестирования селекторов. Однако, если вы также хотите получить селектор CSS для элемента, попробуйте SelectorGadget.

Ответ 13

Я нашел FirePath действительно отличным, он позволяет вам искать не только CSS, но и xPath. Хотелось бы что-то подобное для Chrome и IE, но, увы!