CSS Selectors продвинутые техники

CSS-селекторы — мощный инструмент для выбора элементов на странице при автоматизации с использованием WebDriverIO. Они позволяют делать выборку элементов по различным атрибутам, состояниям и структуре DOM. В этой части рассмотрены более сложные техники использования CSS-селекторов для улучшения производительности и увеличения гибкости тестов.

1. Комбинированные селекторы

Одной из сильных сторон CSS является возможность комбинирования различных типов селекторов для создания более точных и специфичных запросов.

Селекторы потомков

Селектор потомков (descendant) используется для нахождения элементов, которые являются потомками другого элемента. Для этого применяются пробелы между селекторами.

Пример:

$('#parent div .child')

Этот запрос выберет все элементы с классом .child, которые находятся внутри элементов с классом div, которые в свою очередь находятся внутри элемента с id="parent". Это полезно для ситуаций, когда требуется найти вложенные элементы с точной иерархией.

Селекторы детей

Селектор прямых детей (>), в отличие от обычного потомка, выбирает только те элементы, которые являются прямыми детьми указанного родителя.

Пример:

$('#parent > .child')

Этот селектор выберет только элементы с классом .child, которые являются прямыми детьми элемента с id="parent". Это позволяет избежать ошибок при нахождении вложенных элементов, которые находятся на глубоком уровне.

Селекторы общего предка

Селекторы общего предка (+ и ~) позволяют находить элементы, которые следуют непосредственно или на одном уровне с другим элементом.

Пример использования + (сосед):

$('#first + #second')

Это выберет элемент с id="second", который идет сразу после элемента с id="first".

Пример использования ~ (сосед по группе):

$('#first ~ div')

Этот запрос выберет все элементы div, которые идут после элемента с id="first" на одном уровне.

2. Использование атрибутов

Селекторы по атрибутам позволяют выбирать элементы не только по их классу или id, но и по значению атрибутов, что дает большую гибкость.

Селекторы с точным значением атрибута

Для поиска элемента по точному значению атрибута используется селектор [].

Пример:

$('input[name="username"]')

Этот запрос выберет все элементы input с атрибутом name="username".

Селекторы с частичным значением атрибута

В CSS также существуют селекторы для поиска элементов, у которых атрибут содержит определенную подстроку.

  • *= — атрибут содержит подстроку:

    $('a[href*="login"]')

    Этот запрос найдет все ссылки, содержащие в атрибуте href строку login.

  • ^= — атрибут начинается с подстроки:

    $('img[src^="https"]')

    Этот селектор найдет все изображения, чьи источники начинаются с https.

  • $= — атрибут заканчивается подстрокой:

    $('a[href$=".pdf"]')

    Этот запрос найдет все ссылки, заканчивающиеся на .pdf.

  • |= — атрибут имеет конкретное значение или начинается с него:

    $('div[lang|="en"]')

    Этот селектор выберет все элементы div, у которых атрибут lang имеет значение en или начинается с этого значения (например, en-US).

3. Псевдоклассы и псевдоэлементы

CSS-псевдоклассы и псевдоэлементы позволяют обращаться к элементам в различных состояниях и манипулировать их внешним видом.

:nth-child()

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

Пример:

$('ul li:nth-child(2)')

Этот запрос выберет второй элемент li в списке ul. Псевдокласс поддерживает различные типы аргументов, включая формулы для выборки элементов по числовым правилам.

:nth-of-type()

Псевдокласс :nth-of-type() аналогичен :nth-child(), но учитывает только элементы одного типа.

Пример:

$('ul li:nth-of-type(2)')

Этот селектор выберет второй элемент li среди всех li в родительском элементе ul, игнорируя другие типы элементов.

:first-child и :last-child

Псевдоклассы :first-child и :last-child позволяют выбрать первый или последний элемент среди дочерних.

Пример:

$('ul li:first-child')

Этот запрос выберет первый элемент li в списке.

:not()

Псевдокласс :not() используется для исключения элементов из выборки, которые соответствуют определенному селектору.

Пример:

$('div:not(.active)')

Этот запрос выберет все элементы div, не имеющие класса active.

4. Оптимизация селекторов

При написании тестов с использованием WebDriverIO важно учитывать производительность. Чем более специфичен и точен селектор, тем быстрее будет выполняться поиск элемента. Но при этом необходимо избегать чрезмерно сложных селекторов, которые могут привести к замедлению выполнения тестов.

Простота и читаемость

Чем проще и чище будет селектор, тем легче будет поддерживать код в будущем. Например, выбор элементов с помощью класса или ID обычно быстрее, чем сложные комбинированные селекторы с множеством потомков.

Селекторы с ID

ID являются наиболее быстрыми селекторами. Поэтому при возможности следует использовать их в тестах. Например, селектор:

$('#submit-button')

является наиболее производительным, так как поиск по ID имеет минимальные затраты.

Избегание универсальных селекторов

Использование универсального селектора * может замедлить поиск, так как он проверяет каждый элемент на странице. В случае, если необходимо выбрать все элементы, это следует делать очень осторожно.

Пример, который следует избегать:

$('div *')

5. Практические советы

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

В WebDriverIO важно использовать CSS-селекторы не только для точного выбора элементов, но и для оптимизации производительности тестов. Комплексное использование этих техник помогает создавать более эффективные и поддерживаемые автотесты.

Оглавление