Keyboard navigation

Клавиатурная навигация является важным аспектом автоматизированного тестирования веб-приложений, особенно при проверке доступности интерфейсов и взаимодействия с элементами, управляемыми клавиатурой. Puppeteer предоставляет гибкий API для эмуляции нажатий клавиш, управления фокусом и последовательного ввода данных.

Эмуляция нажатий клавиш

Puppeteer позволяет симулировать нажатия клавиш с помощью методов keyboard.type, keyboard.press и keyboard.down/keyboard.up.

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

const puppeteer = require(&

(async () => {
  const browser = await puppeteer.launch({ headless: false });
  const page = await browser.newPage();
  await page.goto('https://example.com');

  const inputSelector = '#username';
  await page.focus(inputSelector);

  // Ввод текста
  await page.keyboard.type('test_user');

  await browser.close();
})();

Ключевые моменты:

  • Метод keyboard.type автоматически вводит текст по символам с задержкой между ними, имитируя естественный набор.
  • Перед использованием метода type необходимо установить фокус на нужный элемент (page.focus).

Симуляция специальных клавиш

Для нажатия функциональных клавиш и модификаторов используются методы keyboard.press и комбинации клавиш с модификаторами. 

await page.keyboard.press('Enter');
await page.keyboard.press('ArrowDown');
await page.keyboard.press('Tab');
await page.keyboard.press('Backspace');

Пример комбинаций с модификаторами: 

await page.keyboard.down('Shift');
await page.keyboard.press('Tab');
await page.keyboard.up('Shift');

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

  • keyboard.down(key) удерживает клавишу, keyboard.up(key) — отпускает.
  • Для комбинаций с Control, Alt или Meta необходимо точно контролировать порядок down и up.

Навигация по элементам с помощью клавиатуры

Клавиши Tab и Shift+Tab используются для перехода между интерактивными элементами страницы. Puppeteer позволяет проверять фокус и его изменение после нажатий. 

await page.keyboard.press('Tab'); // перемещение фокуса к следующему элементу
await page.keyboard.press('Shift+Tab'); // перемещение к предыдущему элементу

Для проверки фокуса удобно использовать метод page.evaluate: 

const activeElementId = await page.evaluate(() => document.activeElement.id);
console.log(activeElementId);

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

Работа с вводом текста и навигацией одновременно

При автоматизации форм и интерфейсов важно комбинировать ввод текста и навигацию между полями. 

await page.focus('#firstName');
await page.keyboard.type('Иван');
await page.keyboard.press('Tab');
await page.keyboard.type('Иванов');
await page.keyboard.press('Tab');
await page.keyboard.press('Enter'); // отправка формы

Рекомендации:

  • Использовать focus перед вводом текста, чтобы гарантировать попадание данных в нужное поле.
  • Проверять document.activeElement после Tab для корректного управления фокусом.
  • В сложных формах можно использовать массив селекторов и цикл для последовательного заполнения.

Обработка нестандартных клавиш и сочетаний

Для тестирования динамических элементов и сложных интерфейсов Puppeteer поддерживает:

  • keyboard.sendCharacter(char) — отправка произвольного символа, включая Unicode.
  • Комбинации клавиш с модификаторами (Ctrl+C, Ctrl+V) для эмуляции операций копирования и вставки.
  • Многоступенчатые сценарии с ожиданием реакции страницы. 
await page.keyboard.down('Control');
await page.keyboard.press('A');
await page.keyboard.up('Control'); 
await page.keyboard.press('Backspace'); // очистка поля

Контроль скорости и задержек

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

await page.keyboard.type('example', { delay: 100 }); // задержка 100 мс между символами

Зачем это нужно:

  • Тестирование UI с анимациями или автодополнением.
  • Эмуляция более реалистичного взаимодействия для проверки доступности.

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

Эмуляция клавиатурной навигации помогает тестировать доступность интерфейсов:

  • Проверка доступности всех интерактивных элементов через Tab.
  • Эмуляция Enter и Space для активации кнопок и чекбоксов.
  • Валидация последовательности фокуса и логики перехода между полями. 
const focusOrder = ['#username', '#password', '#loginButton'];

for (const selector of focusOrder) {
  await page.keyboard.press('Tab');
  const active = await page.evaluate(() => document.activeElement.id);
  console.assert(active === selector.slice(1), `Фокус не на ${selector}`);
}

Такой подход позволяет выявить нарушения доступности и ошибки в логике фокусировки.

Особенности использования в Headless и Headed режимах

В headless-режиме некоторые события клавиатуры могут вести себя иначе из-за отсутствия визуального рендеринга. Для полного тестирования интерактивных элементов рекомендуется запускать браузер в режиме headless: false. Это особенно важно для интерфейсов с JavaScript-анимациями или динамическими элементами.

Практические советы

  1. Всегда контролировать состояние фокуса перед вводом текста.
  2. Использовать задержки (delay) для имитации реального ввода.
  3. Проверять реакции страницы на функциональные клавиши (Enter, Escape).
  4. Комбинировать методы keyboard.press и keyboard.type для разных сценариев.
  5. Для комплексных тестов создавать последовательности нажатий клавиш и проверку активного элемента.

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

Оглавление