Проверка доступности элементов

Проверка доступности элементов является одной из ключевых задач автоматизированного тестирования интерфейсов. Playwright предоставляет мощные инструменты для определения видимости, состояния и интерактивности элементов на странице. Важность этой проверки заключается в том, что тесты должны оперировать с элементами только тогда, когда они доступны для взаимодействия, что предотвращает ошибки во время выполнения сценариев.

Видимость элемента

Метод isVisible() позволяет определить, отображается ли элемент на странице. Под видимостью подразумевается не только наличие элемента в DOM, но и его реальная видимость для пользователя: элемент не скрыт стилями, не находится за пределами видимой области и не имеет прозрачности 0.

const button = page.locator('#submit');
const visible = await button.isVisible();

if (visible) {
    await button.click();
}

Особенности:

  • Возвращает true, если элемент видим.
  • Возвращает false, если элемент скрыт через CSS (display: none, visibility: hidden) или не существует в DOM.
  • Отличается от проверки наличия элемента с помощью count() или locator() — элемент может быть в DOM, но невидим.

Наличие элемента в DOM

Метод count() или проверка через locator() позволяет определить, присутствует ли элемент в DOM, независимо от его видимости.

const items = page.locator('.menu-item');
const itemCount = await items.count();

console.log(`Найдено элементов: ${itemCount}`);

Важно: наличие элемента в DOM не гарантирует его доступность для взаимодействия. Часто используется вместе с isVisible() для комплексной проверки.

Проверка активности элемента

Метод isEnabled() проверяет, можно ли взаимодействовать с элементом (например, кнопкой или полем ввода).

const submitButton = page.locator('#submit');
if (await submitButton.isEnabled()) {
    await submitButton.click();
}

Характерные моменты:

  • Для <input>, <button>, <select> проверяется атрибут disabled.
  • Для других элементов может возвращать true, если атрибут disabled отсутствует.
  • В комбинации с isVisible() позволяет убедиться, что элемент готов к взаимодействию.

Проверка состояния выбора

Для элементов формы, таких как чекбоксы и радио-кнопки, важна проверка состояния checked.

const checkbox = page.locator('#accept-terms');
const isChecked = await checkbox.isChecked();

if (!isChecked) {
    await checkbox.check();
}

Особенности:

  • isChecked() возвращает true, если элемент выбран.
  • Методы check() и uncheck() автоматически выполняют клик только если состояние нужно изменить, предотвращая лишние действия.

Ожидание доступности элемента

Playwright поддерживает ожидания, что особенно важно для динамических страниц с асинхронной загрузкой данных. Методы waitForSelector() и встроенные опции locator() позволяют дождаться доступности элемента:

await page.waitForSelector('#username', { state: 'visible', timeout: 5000 });
await page.fill('#username', 'admin');

Возможные состояния:

  • attached — элемент добавлен в DOM.
  • detached — элемент удалён из DOM.
  • visible — элемент отображается.
  • hidden — элемент скрыт.

Проверка текста и атрибутов для доступности

Для подтверждения интерактивности элементов нередко требуется проверка текста или атрибутов:

const submitButton = page.locator('#submit');
const text = await submitButton.textContent();
const ariaDisabled = await submitButton.getAttribute('aria-disabled');

if (text === 'Отправить' && ariaDisabled !== 'true') {
    await submitButton.click();
}
  • textContent() возвращает текст внутри элемента.
  • getAttribute() позволяет проверить ARIA-атрибуты и другие свойства, влияющие на доступность.

Сочетание проверок

Для надежной автоматизации проверку доступности элементов стоит комбинировать:

const loginButton = page.locator('#login');

if (await loginButton.isVisible() && await loginButton.isEnabled()) {
    await loginButton.click();
}

Такой подход гарантирует, что клик произойдет только по видимому и активному элементу, что минимизирует риск ошибок в тестах.

Особенности работы с динамическими элементами

  • Отложенная загрузка: элементы могут появляться после AJAX-запросов или анимаций. Методы waitForSelector() и встроенные таймауты locator() помогают дождаться появления элемента.
  • Плавающие элементы и модальные окна: проверка видимости должна учитывать перекрытие другими элементами, которое можно выявить через isVisible() и визуальный скриншот.
  • Стейты disabled и readonly: кнопки и поля могут быть недоступны для ввода, что проверяется через isEnabled() и атрибуты disabled / readonly.

Практические рекомендации

  1. Всегда проверять видимость перед взаимодействием — предотвращает ошибки Element is not attached to the DOM.
  2. Использовать встроенные ожидания Playwright вместо явных setTimeout() — повышает стабильность тестов.
  3. Комбинировать проверки состояния (isVisible(), isEnabled(), isChecked()) для надежной автоматизации.
  4. Учитывать динамику страницы — элементы могут появляться с задержкой, поэтому проверки с таймаутами обязательны.

Проверка доступности элементов в Playwright — фундаментальный навык для построения устойчивых, точных и безопасных тестов пользовательских интерфейсов. Она позволяет гарантировать взаимодействие только с готовыми элементами, обеспечивая корректное поведение сценариев и снижение числа ошибок.

Оглавление