Для написания автотестов используются XPath и CSS-селекторы. Они помогают найти элемент на странице, чтобы потом с ним как-то взаимодействовать (кликнуть, ввести текст, или что-то другое).
Я видела много статей о том, что это вообще такое, но мне очень не хватало шпаргалки по разным селекторам, причем в разрезе «Вот он в CSS и он же в XPath» для сравнения.
А мне такое для студентов надо. Поэтому решила сделать сама. Вдохновлялась страничкой «Xpath cheatsheet», но сделала на свой вкус — под автоматизацию, а не XPath вообще. И с комментариями, с ними удобнее.
Пишите, если где-то накосячила. Хотя я все селекторы проверяла на тестовых страницах, но мало ли… И надеюсь, вам такая шпаргалка тоже пригодится! =)
Содержание
Поиск конкретного элемента
Поиск по атрибутам
Поиск по тексту элемента
Поиск по позиции элемента
Поиск потомков (обход дерева вниз)
Поиск предков (обход дерева вверх)
Поиск соседей
Поиск по комментариям
Поиск конкретного элемента
CSS | XPath | Комментарий |
* | //* | Найти любой элемент (используется обычно как часть более сложного запроса) |
div | //div | Найти элемент div |
div:nth-child(2) | //div[2] | Найти 2-ой элемент div под общим родителем (вместо 2 может быть любая цифра) В CSS используется псевдокласс, в firefox он не срабатывает, в хроме тоже может глючить. В этом сценарии xpath лучше |
Поиск по атрибутам
CSS | XPath | Комментарий |
Любой элемент | ||
.form-control | //*[@class="form-control"] | Элемент с классом form-control |
#sample_1 | //*[@id="sample_1"] | Элемент с атрибутом id = sample_1 |
[id] | //*[@id] | Элемент с атрибутом id, значение у атрибута любое |
Конкретный элемент (в примере это div, но искать можно любой) | ||
div.form-control | //div[@class="form-control"] | Именно div элемент с атрибутом class=form-control |
div#sample_1 | //div[@id="sample_1"] | Именно div элемент с атрибутом id = sample_1 |
div[id] | //div[@id] | Именно div элемент с атрибутом id |
div[attr]:nth-child(2) | //div[2][@attr] | 2-ой элемент div с атрибутом attr под общим родителем XPath найдет такой div, даже если между 2-мя div-ами будет что-то ещё. А вот CSS нет (см тут подробнее), только если подряд идут. Поэтому с потомками лучше через XPath |
h1:not([id]) | //h1[not(@id)] | Элемент h1, у которого нет атрибута id |
- | //a[@name or @href] | Элемент а, у которого есть или атрибут name, или href, или оба |
Сравнения по тексту атрибута (в примере это class, но атрибут может быть любым) | ||
Есть атрибут class, проверяем текст в нем. Допустим, у нас есть такие элементы: 1. class = “test-1 test-3 test-2” 2. class = “test-1” | ||
[class="test-1"] [class='test-1'] | //*[@class="test-1"] //*[@class='test-1'] | Текст четко равен "test-1" (тип кавычек не важен) Найдет элемент 2, но не найдет элемент 1. |
[class~="test-3"] | //*[contains(@class, 'test-3')] | Текст атрибута состоит из нескольких слов, разделенных пробелами, одно из них — искомое. В XPath такого нет, поэтому там просто contains — в тексте есть искомое значение Найдет элемент 1 |
[class|="test"] | //*[contains(@class, 'test')] | Полное соответствие или атрибут начинается как указано и потом идет "-" (U+002D) Найдет и элемент 1, и элемент 2 |
[class^="te"] | //*[starts-with(@class, 'te')] //*[substring-after(@class, 'te')] | Начинается на … Найдет и элемент 1, и элемент 2. В Xpath 2 варианта записи, substring-after ищет текст, который идет после указанного, то есть указанный должен быть. В CSS запись как в регулярных выражениях |
[class$="2"] | //*[substring-before(@class, '2')] | Заканчивается на … Найдет только элемент 1 В Xpath ещё должно быть выражение «ends-with», но оно не работает
Источник: https://habr.com/ru/articles/817555/ |
