CSS-селекторы — это ключевой механизм для идентификации и работы с элементами веб-страницы. В тестировании с использованием Playwright правильно настроенные селекторы помогают эффективно взаимодействовать с элементами UI, проверять их видимость, проверять данные и выполнять другие проверки. Важно понимать, какие базовые типы селекторов существуют и как их использовать для работы с HTML-элементами на странице.
#id)Один из самых простых и эффективных типов селекторов — это селектор
по идентификатору. Каждый HTML-элемент может иметь атрибут
id, который является уникальным в пределах страницы.
Селектор по id позволяет точно и быстро находить
элемент.
Пример:
<div id="submit-button">Отправить</div>await page.click('#submit-button');В данном примере Playwright будет искать элемент с атрибутом
id="submit-button" и выполнит клик по нему.
.class)Классовые селекторы позволяют находить элементы, которые имеют определённый класс. В отличие от селекторов по идентификатору, классы могут быть не уникальными и могут применяться к множеству элементов.
Пример:
<button class="btn-primary">Отправить</button>await page.click('.btn-primary');Этот селектор найдет все элементы с классом btn-primary
и кликнет по первому из них.
[attribute])Селекторы по атрибутам позволяют находить элементы по любому атрибуту
HTML. Это может быть полезно, когда у элемента нет уникального
id или класса, но есть другие атрибуты, которые можно
использовать для его идентификации.
Пример:
<input type="text" placeholder="Введите ваше имя" />await page.fill('[placeholder="Введите ваше имя"]', 'Дмитрий');Здесь используется атрибут placeholder для того, чтобы
найти поле ввода и ввести значение.
tagname)Селектор по тегу позволяет найти все элементы определённого типа. Этот тип селектора подходит для работы с множеством однотипных элементов, например, с ссылками или кнопками.
Пример:
<button>Отправить</button>
<button>Отмена</button>await page.click('button');Этот код кликнет по первому элементу <button>,
который встретится на странице.
:hover, :focus и другие)Псевдоклассы позволяют выбирать элементы, которые находятся в определённом состоянии. Это может быть полезно, например, для тестирования поведения интерфейса при наведении курсора или фокусе на элементе.
Пример:
<button class="btn">Нажми на меня</button>await page.hover('.btn');В этом примере Playwright выполнит наведение курсора на кнопку с
классом .btn.
Для более точной и гибкой работы с элементами можно использовать комбинацию различных типов селекторов. Например, комбинированные селекторы позволяют искать элементы, которые соответствуют нескольким условиям одновременно.
Пример:
<input type="text" class="form-control" placeholder="Email" />
<input type="password" class="form-control" placeholder="Пароль" />await page.fill('input.form-control[placeholder="Email"]', 'user@example.com');Этот селектор ищет элемент input, который имеет класс
form-control и атрибут placeholder, равный
“Email”, что позволяет точно указать, в какое поле нужно ввести
данные.
Когда на странице несколько однотипных элементов, можно использовать
индексы, чтобы выбрать определённый элемент. В Playwright это делается с
помощью nth-of-type, nth-child и других
подобных конструкций.
Пример:
<ul>
<li>Первый элемент</li>
<li>Второй элемент</li>
<li>Третий элемент</li>
</ul>await page.click('ul > li:nth-child(2)');Этот код кликнет по второму элементу списка.
В Playwright можно использовать селекторы, которые ориентируются на текстовое содержимое элементов. Это позволяет искать элементы, основываясь на их видимом тексте.
Пример:
<button>Отправить</button>
<button>Отмена</button>await page.click('button:text("Отправить")');Здесь Playwright найдёт кнопку с текстом “Отправить” и кликнет по ней.
Часто бывает нужно выбрать элемент, исходя из его родителя. Это позволяет выстраивать более сложные селекторы для выбора элементов, находящихся в определённых контекстах.
Пример:
<div class="form-group">
<label for="name">Имя</label>
<input type="text" id="name" />
</div>await page.fill('.form-group input', 'Дмитрий');Этот селектор ищет input внутри элемента с классом
form-group и заполняет его значением.
Селекторы с псевдоэлементами позволяют работать с частями элементов, например, с их передней или задней частью. Это не всегда требуется для тестирования интерфейсов, но может быть полезным в некоторых случаях.
Пример:
<p>Текст <span class="highlight">выделенный</span></p>await page.hover('span.highlight::after');Этот код пытается навести курсор на псевдоэлемент
::after элемента с классом highlight.
Для более точного и гибкого выбора элементов можно комбинировать различные селекторы. Например, можно использовать сочетание классов, атрибутов, индексов и псевдоклассов.
Пример:
<div class="menu-item" data-type="main">
<a href="#">Главная</a>
</div>await page.click('.menu-item[data-type="main"] a');Этот селектор точно выберет ссылку внутри элемента с классом
menu-item и атрибутом data-type, равным
“main”.
id, когда это возможно, так как
они наиболее быстрые и уникальные.placeholder, name или
data-*.Правильный выбор и использование селекторов в Playwright значительно ускоряют процесс тестирования и позволяют создавать более точные и устойчивые автоматизированные проверки интерфейса.