Нажатие кнопок клавиатуры

WebdriverIO предоставляет мощный инструмент для автоматизации взаимодействия с клавиатурой в браузере. Работа с клавишами включает как простые действия — нажатие одной клавиши, так и сложные комбинации с модификаторами (Shift, Control, Alt, Meta).

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

1. keys Метод keys позволяет отправлять одну или несколько клавиш в активный элемент или на страницу в целом. Синтаксис:

browser.keys('Enter'); // одиночное нажатие
browser.keys(['Control', 'a']); // комбинация клавиш

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

2. Использование специальных клавиш WebdriverIO поддерживает специальные клавиши через объект Key (можно импортировать через @wdio/sync или использовать напрямую строковые обозначения):

  • 'Enter' — подтверждение действий
  • 'Tab' — переход между элементами
  • 'Escape' — отмена или закрытие
  • 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight' — навигация
  • 'Control', 'Shift', 'Alt', 'Meta' — модификаторы

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

browser.keys(['Control', 'a']); // выделение всего текста в поле
browser.keys('Backspace'); // удаление выделенного текста

Работа с полями ввода

Нажатия клавиш особенно полезны при работе с текстовыми полями. Основные сценарии:

  • Ввод текста:
const input = await $('#username');
await input.click();
await browser.keys('admin');
  • Очистка поля с помощью клавиш:
await input.click();
await browser.keys(['Control', 'a']); // выделение всего текста
await browser.keys('Backspace'); // удаление
  • Навигация внутри текста:
await browser.keys('ArrowLeft'); // перемещение курсора влево
await browser.keys('ArrowRight'); // перемещение курсора вправо

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

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

Примеры:

// Копирование текста
await browser.keys(['Control', 'c']); 
// Вставка текста
await browser.keys(['Control', 'v']); 
// Выделение всех элементов
await browser.keys(['Control', 'a']);

Важно помнить, что последовательность нажатий влияет на поведение браузера: ['Control', 'a'] сначала нажимает Control, затем a, и только после этого отпускаются клавиши.

Использование с элементами, поддерживающими фокус

Для успешного взаимодействия с клавишами элемент должен быть активным или находиться в фокусе. Для этого применяется метод click() или focus():

const textarea = await $('#comment');
await textarea.focus(); // установка фокуса
await browser.keys('Hello World'); // ввод текста

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

Симуляция удержания клавиш

Для моделирования удержания клавиш используются последовательные вызовы keys:

await browser.keys('Shift'); // удержание Shift
await browser.keys('ArrowRight'); // выделение текста
await browser.keys('Shift'); // отпускание Shift

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

Особенности и подводные камни

  • В некоторых браузерах комбинации с Meta (Cmd на macOS) могут работать иначе, чем Control.
  • Нажатия клавиш могут конфликтовать с автоматическим фокусом. В сложных формах желательно сначала явно установить фокус.
  • Симуляция клавиш работает только с активным окном браузера; если окно неактивно, события могут не срабатывать.
  • Для динамически подгружаемых элементов важно дождаться их появления перед отправкой клавиш:
const input = await $('#dynamicInput');
await input.waitForDisplayed();
await input.click();
await browser.keys('Text');

Практические примеры

  • Отправка формы с помощью Enter:
const input = await $('#search');
await input.setValue('WebdriverIO');
await browser.keys('Enter');
  • Удаление нескольких символов:
await browser.keys(['Control', 'a']); 
await browser.keys('Backspace');
  • Навигация по меню с помощью стрелок:
await browser.keys('ArrowDown'); 
await browser.keys('ArrowDown'); 
await browser.keys('Enter');

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

Оглавление