Давайте подробно рассмотрим, как XPath и CSS-селекторы работают с элементами DOM, сравним их синтаксис и функциональные возможности.
Мы разберём наиболее важные аспекты, такие как выбор элементов по классу, идентификатору, атрибутам, иерархии и другим характеристикам. Для каждого случая приведём примеры, как это реализовать с помощью XPath и CSS-селекторов, а также примеры структуры DOM-дерева.
1. Выбор элемента по тегу
Пример DOM:
CSS-селектор:
div
XPath:
//div
Объяснение: В обоих случаях селектор просто выбирает все элементы с указанным тегом (div).
2. Выбор элемента по идентификатору (id)
Пример DOM:
CSS-селектор:
#main-content
XPath:
//*[@id='main-content']
Объяснение: В CSS-селекторах для выбора элемента по идентификатору используется символ #, а в XPath мы выбираем элементы с атрибутом id, равным "main-content".
3. Выбор элемента по классу
Пример DOM:
CSS-селектор:
.header
XPath:
//*[@class='header']
Объяснение: В CSS-селекторах для выбора элемента по классу используется символ ".", а в XPath мы выбираем элементы с атрибутом class, равным "header".
4. Выбор элемента по атрибуту
Пример DOM:
CSS-селектор:
input[type='text']
XPath:
//input[@type='text']
Объяснение: В CSS-селекторах можно выбрать элемент по атрибуту с помощью квадратных скобок [], в XPath используется аналогичная конструкция с @ перед именем атрибута.
5. Выбор элемента по частичному совпадению атрибута
Пример DOM:
CSS-селектор:
[class*='primary']
XPath:
//*[contains(@class, 'primary')]
Объяснение: В CSS-селекторах символ *= используется для поиска элементов, в которых атрибут содержит указанное значение. В XPath используется функция contains() для аналогичного поиска.
6. Выбор дочерних элементов
Пример DOM:
CSS-селектор:
div > span
XPath:
//div/span
Объяснение: В CSS-селекторах символ > указывает на выбор элемента, который является прямым потомком. В XPath используется аналогичная конструкция с косой чертой /.
7. Выбор всех потомков (вложенных элементов)
Пример DOM:
CSS-селектор:
div *
XPath:
//div//*
Этот XPath-селектор работает аналогично CSS-селектору div * и выбирает все элементы, которые являются потомками div, независимо от их типа и уровня вложенности.
Объяснение: В CSS и XPath можно выбрать все вложенные элементы, используя пробел в CSS и двойную косую черту // в XPath.
- Если целью является выбор всех элементов внутри родительского контейнера, то можно использовать универсальные селекторы: div * (CSS) или //div//* (XPath).
- Если нужно выбрать только элементы определённого типа (например, только span), то можно использовать селекторы, которые явно указывают на нужный тег. Например div span или //div//span
8. Выбор элемента по порядковому номеру (nth-child)
Пример DOM:
CSS-селектор:
ul li:nth-child(2)
XPath:
//ul/li[2]
Объяснение: В CSS используется псевдокласс :nth-child() для выбора элемента на основе его позиции среди всех дочерних элементов. В XPath квадратные скобки [2] указывают на выбор второго элемента.
9. Выбор элемента по текстовому содержимому
Пример DOM:
CSS-селектор:
/* CSS не поддерживает выбор по тексту */
XPath:
//p[text()='Important message!']
Объяснение: В CSS-селекторах нет возможности выбирать элементы на основе их текстового содержимого, в то время как XPath поддерживает такую функциональность с помощью конструкции text().
10. Выбор элемента по соседям ниже (братьям)
Пример DOM:
CSS-селектор:
- Селектор + — выбирает только следующий соседний элемент.
div + p
Этот селектор выберет только элемент <p>, который непосредственно следует за <div>.
- Селектор ~ — выбирает всех последующих соседей на том же уровне, которые следуют за <div>.
div ~ p
Этот селектор выберет все элементы <p>, которые располагаются после <div>, независимо от того, какие другие элементы находятся между ними. В данном случае, он также выберет элемент <p>, так как он идёт после <div>, но не обязательно сразу за ним.
XPath:
- Чтобы выбрать непосредственного соседа (аналог CSS-селектора +):
//div/following-sibling::p[1]
Этот XPath-селектор выберет только элемент <p>, который непосредственно следует за <div>.
- Чтобы выбрать всех последующих соседей (аналог CSS-селектора ~):
//div/following-sibling::p
Этот XPath-селектор выберет всех следующих братьев типа <p>, которые идут после <div>.
Объяснение:
- Селектор + в CSS выбирает только следующий соседний элемент (непосредственного брата).
- Селектор ~ в CSS выбирает всех последующих соседей на том же уровне (всех братьев, начиная с первого после элемента).
- В XPath для выбора непосредственного соседа используется following-sibling::element[1], а для всех последующих соседей — following-sibling::element.
11. Выбор предыдущих соседей (preceding-sibling)
Пример DOM:
Допустим, мы находимся на элементе <div>, и нам нужно выбрать его предыдущих соседей (все элементы, которые находятся перед ним на том же уровне вложенности).
CSS-селектор:
CSS не поддерживает выбор предыдущих соседей. В CSS можно выбирать только элементы, расположенные после указанного элемента (вперед по иерархии), с помощью селекторов + и ~, но выбрать предыдущих соседей невозможно.
XPath:
- Чтобы выбрать непосредственного предыдущего соседа (ближайшего брата):
//div/preceding-sibling::*[1]
Этот селектор выберет элемент <p>, который находится непосредственно перед <div>.
- Чтобы выбрать всех предыдущих соседей:
//div/preceding-sibling::*
Этот XPath-селектор выберет всех братьев, которые находятся перед <div>, то есть и <span>, и <p>.
12. Выбор последнего элемента
Пример DOM:
CSS-селектор:
ul li:last-child
XPath:
//ul/li[last()]
Объяснение: В CSS используется псевдокласс :last-child, в то время как в XPath используется функция last() для выбора последнего элемента.
13. Выбор родительского элемента
Пример DOM:
CSS-селектор:
/* CSS не поддерживает выбор родителя */1
XPath:
//span/parent::div
Объяснение: CSS-селекторы не поддерживают выбор родительских элементов, в то время как XPath позволяет это делать с помощью оси parent::.
Сравнительная таблица XPath и CSS-селекторов
Заключение
XPath и CSS-селекторы предоставляют разные возможности для поиска и работы с элементами DOM. CSS-селекторы более просты и быстры в большинстве случаев, но их функциональность ограничена. XPath предоставляет гораздо больше возможностей, таких как выбор родительских элементов, работа с текстом и сложные фильтры, но его синтаксис более сложный и он может работать медленнее.
В статье приведены не все возможности XPath и CSS селекторов. Пишите в комментариях, чего бы еще хотелось узнать.
Вместо оглавления. Что вы найдете на канале QA Helper - справочник тестировщика?
Не забудьте подписаться на канал, чтобы не пропустить полезную информацию: QA Helper - справочник тестировщика
Пишите в комментариях какой пункт было бы интересно рассмотреть более подробно.
Обязательно прочитайте: Что должен знать и уметь тестировщик
Также будет интересно почитать: Вопросы которые задают на собеседовании тестировщикам.
