Локаторы CSS

Локаторы CSS являются одним из самых мощных и гибких инструментов для поиска элементов на веб-странице. Их преимущество в том, что они позволяют выбирать элементы по тегам, классам, идентификаторам, атрибутам, состояниям и иерархии DOM, что обеспечивает высокую точность и удобство при автоматизации тестирования.

Основы CSS-селекторов

CSS-селекторы состоят из паттернов, которые описывают, какие элементы нужно выбрать. В WebdriverIO они используются внутри команд поиска элементов:

const element = await $('css-селектор');
const elements = await $$('css-селектор');
  • $('selector') — возвращает первый найденный элемент.
  • $$('selector') — возвращает массив всех элементов, соответствующих селектору.

Селекторы по идентификатору

Выбор элемента по ID — самый быстрый и точный способ. Используется символ #.

const submitButton = await $('#submit');
await submitButton.click();

В этом примере ищется элемент с id="submit".

Селекторы по классу

Для выбора по классу используется точка .. Можно объединять несколько классов:

const activeItems = await $('.item.active');

Это выберет элемент с классами item и active.

Селекторы по тегу

Можно выбрать все элементы определённого типа:

const allButtons = await $$('button');

Такой подход полезен для групповых проверок или динамических элементов.

Атрибутные селекторы

Позволяют искать элементы по любому атрибуту, например name, type, data-*.

const emailField = await $('[name="email"]');
const firstInput = await $('input[type="text"]');
const customData = await $('[data-id="12345"]');

Ключевые варианты атрибутных селекторов:

  • [attr="value"] — точное совпадение;
  • [attr^="value"] — начинается с;
  • [attr$="value"] — заканчивается на;
  • [attr*="value"] — содержит.

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

CSS позволяет строить сложные цепочки, указывая иерархию или соседство элементов.

  • Прямой потомок (>)
const child = await $('div > span');

Выбирает только span, который является непосредственным потомком div.

  • Любой потомок (пробел)
const descendant = await $('div span');

Выбирает span внутри div на любой глубине.

  • Соседние элементы (+)
const next = await $('h2 + p');

Выбирает первый p, который идет сразу после h2.

  • Общий сосед (~)
const allNext = await $('h2 ~ p');

Выбирает все p, которые идут после h2 на одном уровне.

Псевдоклассы

CSS поддерживает динамическое состояние элементов через псевдоклассы.

  • :first-child, :last-child, :nth-child(n) — выбор по позиции внутри родителя.
  • :not(selector) — исключение элементов.
  • :hover, :checked, :disabled — состояние элемента.

Примеры:

const firstItem = await $('li:first-child');
const thirdButton = await $('button:nth-child(3)');
const enabledInput = await $('input:not([disabled])');

Комбинирование с WebdriverIO

В WebdriverIO селекторы CSS можно сочетать с командами для ожиданий, взаимодействий и проверки состояния элементов.

const loginButton = await $('#login');
await loginButton.waitForClickable({ timeout: 5000 });
await loginButton.click();

const errorMessage = await $('.error');
await errorMessage.waitForDisplayed({ timeout: 3000 });
const text = await errorMessage.getText();

Здесь CSS-селектор является основой поиска, а WebdriverIO обеспечивает управление состоянием и действия над элементом.

Производительность и лучшие практики

  • Использовать ID, если элемент уникален.
  • Для динамических списков или компонентов удобны классы и атрибуты.
  • Минимизировать сложные цепочки селекторов, чтобы снизить нагрузку на поиск элементов.
  • Избегать жёсткой зависимости от визуальной структуры, если возможно использовать data-* атрибуты.

Итоговые рекомендации по CSS-селекторам в WebdriverIO

  1. Выбирать уникальные и стабильные атрибуты, минимизируя зависимость от DOM-структуры.
  2. Использовать псевдоклассы для элементов с динамическим состоянием.
  3. Комбинировать селекторы для точного поиска элементов без лишних операций.
  4. Проверять локаторы в браузере через DevTools перед использованием в тестах.

Эффективное применение CSS-селекторов позволяет создавать надёжные, быстрые и поддерживаемые тесты, способные работать с любыми современными веб-приложениями.

Оглавление