Показаны сообщения с ярлыком CSS. Показать все сообщения
Показаны сообщения с ярлыком CSS. Показать все сообщения

среда, 29 мая 2024 г.

Шпаргалка по XPath и CSS-селекторам

Для написания автотестов используются XPath и CSS-селекторы. Они помогают найти элемент на странице, чтобы потом с ним как-то взаимодействовать (кликнуть, ввести текст, или что-то другое).

Я видела много статей о том, что это вообще такое, но мне очень не хватало шпаргалки по разным селекторам, причем в разрезе «Вот он в CSS и он же в XPath» для сравнения. 

А мне такое для студентов надо. Поэтому решила сделать сама. Вдохновлялась страничкой «Xpath cheatsheet», но сделала на свой вкус — под автоматизацию, а не XPath вообще. И с комментариями, с ними удобнее. 

Пишите, если где-то накосячила. Хотя я все селекторы проверяла на тестовых страницах, но мало ли… И надеюсь, вам такая шпаргалка тоже пригодится! =)

(там таблички нормально отрисовываются и есть содержание кликабельное)

воскресенье, 26 мая 2024 г.

CSS, XPath: локаторы или селекторы? Разбираемся в терминах

 Я обычно слышу такие словосочетания для поиска элементов на HTML-странице:

  • CSS-селекторы
  • XPath-локаторы
Но как правильно их называть? 



Можно ли и то, и то назвать селекторами? Или локаторами? Сходила за уточнениями к Алексею Баранцеву, разработчику инструмента Selenium и автору курсов по автоматизации тестирования (где селекторы и применяем). Итак:

Почему XPath лучше для поиска N-ого элемента, чем nth-child в CSS

В CSS есть псевдокласс :nth-child() — он находит один или более элементов, основываясь на их позиции среди группы соседних элементов. ©

Но у него есть ряд минусов:

  • не срабатывает в firefox (даже когда в хроме всё нормально);
  • срабатывает с оговорками — и поэтому xpath выражение для поиска будет лучше.
Давайте посмотрим на примере.

Создадим такой html-файл (можно сделать текстовый файлик и потом переименовать расширение в «.html»):

<html>
   <body>
          <div attr='1'>Блок 1</div>
  <p>Блок 1</div>
  <div attr='2'>Блок 2</div>
  <div attr='3'>Блок 3</div>
   </body>
</html>

Открываем файлик в хроме (это важно!). 

А теперь попробуем найти второй div. Попробуем через XPath:

//div[2]

Всё работает! Найдет один элемент, второй по счету div:


Теперь попробуем через CSS: