Комбинации клавиш

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

Основные методы работы с клавиатурой

Для эмуляции нажатий клавиш используется объект browser или элементы страницы через метод element.keys(). Основные методы:

  • browser.keys(value) — отправка одной или нескольких клавиш на текущий активный элемент.
  • element.setValue(value) — ввод текста в поле ввода с эмуляцией обычной печати.
  • element.addValue(value) — добавление текста к уже существующему значению элемента.

Аргумент value может быть строкой или массивом строк/специальных клавиш.

Специальные клавиши

WebdriverIO использует стандартные клавиши WebDriver, которые перечислены в объекте Key:

  • Enter — клавиша Enter
  • Tab — переключение фокуса
  • Shift, Control, Alt, Meta — модификаторы
  • ArrowUp, ArrowDown, ArrowLeft, ArrowRight — навигация
  • Backspace, Delete — удаление символов
  • Escape — выход из модальных окон

Пример отправки одной специальной клавиши:

browser.keys('Enter');

Отправка комбинаций клавиш

Для симуляции сочетаний клавиш используется массив с последовательностью нажатий и отпусканий клавиш. Основной принцип: сначала нажимается модификатор, затем основная клавиша, затем модификатор отпускается.

Пример комбинации Ctrl + A (выделить весь текст):

browser.keys(['Control', 'a', 'Control']);

Эта запись эквивалентна последовательности:

  1. Нажать Control
  2. Нажать a
  3. Отпустить Control

Для комбинаций с Shift или Alt используется аналогичный принцип.

Комбинирование текста и горячих клавиш

WebdriverIO позволяет смешивать ввод текста и нажатия клавиш в одной цепочке. Например, ввод текста с выделением:

const input = await $('#inputField');

await input.setValue('Тест');
await input.keys(['Shift', 'ArrowLeft', 'Shift']); // выделение последнего символа
await input.keys('Delete'); // удаление выделенного символа

Использование addValue для динамического ввода

Метод addValue полезен для последовательного ввода с имитацией печати и управления клавишами:

const input = await $('#inputField');
await input.addValue('Hello');
await input.addValue(['ArrowLeft', 'ArrowLeft', 'Backspace']);

В этом примере курсор перемещается влево на два символа и удаляет один символ.

Управление модальными окнами и диалогами

Комбинации клавиш активно применяются для закрытия модальных окон или диалогов, где кнопки управления недоступны напрямую:

browser.keys('Escape'); // закрытие модального окна
browser.keys(['Control', 'w', 'Control']); // закрытие вкладки

Навигация по спискам и таблицам

Для тестирования интерактивных компонентов, таких как таблицы, списки или выпадающие меню, удобно использовать клавиши стрелок:

const list = await $('#dropdownList');
await list.click();
await list.keys(['ArrowDown', 'ArrowDown', 'Enter']); // выбор третьего элемента

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

  • Всегда удостоверяться, что элемент активен перед отправкой клавиш. Методы click() или focus() помогут установить фокус.
  • Использовать массивы клавиш для сложных сочетаний, чтобы избежать ошибок при отпускании модификаторов.
  • Проверять совместимость комбинаций с браузерами, так как поведение некоторых горячих клавиш может отличаться.
  • Для симуляции текстового ввода использовать setValue и addValue, а не комбинации Shift + буква, если нет необходимости проверять именно работу модификаторов.

Особенности работы с несколькими модификаторами

Можно комбинировать несколько модификаторов одновременно. Пример Ctrl + Shift + N:

browser.keys(['Control', 'Shift', 'n', 'Shift', 'Control']);

Порядок важен: сначала нажимаются все модификаторы, затем основная клавиша, затем модификаторы отпускаются в обратном порядке.

Взаимодействие с формами

Комбинации клавиш часто применяются для автоматизации форм:

  • Tab — переход между полями
  • Enter — отправка формы
  • Shift + Tab — переход к предыдущему полю

Пример навигации по форме:

await browser.keys('Tab'); // переход к следующему полю
await browser.keys('Enter'); // отправка формы

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

Оглавление