Методы для взаимодействия со страницей

WebdriverIO предоставляет богатый набор методов для управления элементами на веб-странице, выполнения действий пользователя и проверки состояния интерфейса. Эти методы делятся на несколько категорий: поиск элементов, взаимодействие с ними, получение данных и выполнение действий над страницей.

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

Для работы с элементами используется функция $ для одного элемента и $$ для коллекции элементов.

const loginButton = $('#login'); // Один элемент по CSS-селектору
const menuItems = $$('.menu-item'); // Массив элементов

Особенности поиска:

  • Можно использовать CSS-селекторы, XPath, селекторы по тексту.
  • $ возвращает объект Element, который поддерживает методы WebdriverIO.
  • $$ возвращает массив объектов Element, позволяющий работать с коллекциями.

Совет: для динамически меняющихся элементов лучше использовать методы ожидания (waitForExist, waitForDisplayed).

Взаимодействие с элементами

Основные действия над элементами:

  1. Клик
const submitButton = $('#submit');
submitButton.click();
  • Метод click() симулирует нажатие.
  • Поддерживает клики мышью и тач-события.
  • Можно использовать element.scrollIntoView() перед кликом, если элемент может быть вне видимой области.
  1. Ввод текста
const usernameInput = $('#username');
usernameInput.setValue('user123');
  • setValue очищает поле перед вводом текста.
  • Для добавления текста к уже существующему используется addValue.
  1. Очистка поля
const searchInput = $('#search');
searchInput.clearValue();
  • Метод удаляет текущее значение поля ввода.
  1. Выбор значения из выпадающего списка
const select = $('#country');
select.selectByVisibleText('Россия');
select.selectByAttribute('value', 'ru');
select.selectByIndex(0);
  • Поддерживается выбор по видимому тексту, атрибуту или индексу.

Получение данных с элементов

  1. Текст элемента
const title = $('#title').getText();
  • Возвращает видимый текст элемента.
  1. Значение поля ввода
const value = $('#email').getValue();
  • Возвращает текущее значение поля.
  1. Атрибуты и CSS-свойства
const type = $('#password').getAttribute('type');
const color = $('#header').getCSSProperty('color');
  • getAttribute получает значение указанного атрибута.
  • getCSSProperty возвращает объект с данными о CSS-свойстве (value, parsed, property).
  1. Состояние элементов
const isDisplayed = $('#modal').isDisplayed();
const isEnabled = $('#submit').isEnabled();
const isSelected = $('#checkbox').isSelected();
  • Позволяет проверить видимость, доступность и выбор элементов.

Выполнение действий над страницей

  1. Навигация
browser.url('https://example.com');
browser.back();
browser.forward();
browser.refresh();
  • url открывает страницу.
  • back и forward управляют историей браузера.
  • refresh обновляет текущую страницу.
  1. Работа с окнами и вкладками
const handles = browser.getWindowHandles();
browser.switchToWindow(handles[1]);
browser.closeWindow();
  • getWindowHandles возвращает массив идентификаторов окон.
  • switchToWindow переключает фокус на выбранное окно.
  • closeWindow закрывает активное окно.
  1. Работа с алертами
browser.acceptAlert();
browser.dismissAlert();
const alertText = browser.getAlertText();
browser.sendAlertText('Ответ');
  • Методы позволяют взаимодействовать с alert, confirm и prompt.

Выполнение сложных действий

WebdriverIO предоставляет API actions для эмуляции сложных пользовательских сценариев.

browser.performActions([{
    type: 'pointer',
    id: 'mouse1',
    parameters: { pointerType: 'mouse' },
    actions: [
        { type: 'pointerMove', duration: 0, x: 100, y: 200 },
        { type: 'pointerDown', button: 0 },
        { type: 'pointerUp', button: 0 }
    ]
}]);
browser.releaseActions();
  • Поддерживаются движения мыши, нажатия кнопок, скроллинг, drag-and-drop.
  • releaseActions сбрасывает активные действия.

Ожидания и синхронизация

Для стабильных тестов крайне важно использовать ожидания:

const loginButton = $('#login');
loginButton.waitForDisplayed({ timeout: 5000 });
loginButton.click();
  • waitForDisplayed ждёт появления элемента на странице.
  • waitForExist проверяет наличие в DOM.
  • waitUntil позволяет задать кастомное условие.

Работа с фреймами

const frame = $('#frameId');
browser.switchToFrame(frame);
// действия внутри фрейма
browser.switchToParentFrame();
  • switchToFrame переключает контекст на iframe.
  • switchToParentFrame возвращает к основному документу.

Скроллинг и прокрутка

const element = $('#footer');
element.scrollIntoView();
browser.execute(() => window.scrollBy(0, 500));
  • scrollIntoView прокручивает страницу до элемента.
  • execute позволяет выполнять произвольный JS-код для сложных сценариев.

Итоговая схема взаимодействия

  1. Поиск элементов $ / $$.
  2. Проверка состояния элементов (isDisplayed, isEnabled, isSelected).
  3. Взаимодействие (click, setValue, selectBy…).
  4. Получение данных (getText, getValue, getAttribute).
  5. Ожидания (waitForDisplayed, waitUntil) для стабильности.
  6. Работа с окнами, фреймами и алертами.
  7. Сложные действия через performActions.
  8. Скроллинг и выполнение JS-кода при необходимости.

Эта структура позволяет строить устойчивые, читаемые и расширяемые тесты на WebdriverIO для любых веб-приложений.

Оглавление