Playwright предоставляет мощные возможности для тестирования веб-приложений, в том числе для проверки функциональности навигации с помощью клавиатуры. Этот аспект критически важен для обеспечения доступности и удобства использования веб-приложений для людей с ограниченными возможностями. Навигация с клавиатуры включает в себя использование клавиш, таких как Tab, Shift + Tab, Enter, Arrow keys и других, для перемещения между элементами на странице.
При тестировании с клавиатуры важно имитировать поведение реальных пользователей, которые используют только клавиши для навигации по интерфейсу. Это позволяет выявить проблемы с доступностью, такие как:
Playwright предоставляет разнообразные методы и возможности для реализации этих тестов, включая работу с фокусом, имитацию нажатия клавиш и проверку видимости элементов.
Playwright предоставляет API для эмуляции действий пользователя, включая нажатия клавиш и перемещения по элементам с помощью клавиатуры. Для начала работы с Playwright необходимо настроить проект и импортировать нужные модули:
const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
})();Один из основных способов перемещения по странице — это использование
клавиши Tab. Для имитации нажатия Tab в Playwright
используется метод page.keyboard.press().
await page.keyboard.press('Tab');Этот код имитирует нажатие клавиши Tab, что позволяет переместиться на следующий интерактивный элемент на странице. Для выполнения теста, где необходимо пройти через все доступные элементы, можно использовать цикл:
for (let i = 0; i < 5; i++) {
await page.keyboard.press('Tab');
await page.waitForTimeout(100); // Пауза для ожидания реакции UI
}После того как пользователь переместился по элементам с помощью
клавиши Tab, важно убедиться, что фокус был правильно перемещен на
нужный элемент. Для этого Playwright предоставляет возможность проверки
фокуса через page.$(':focus'), что позволяет проверить
текущий фокус на странице:
const focusedElement = await page.$(':focus');
const focusedElementTag = await focusedElement.evaluate(el => el.tagName);
console.log(focusedElementTag); // Выведет тип тега текущего фокусируемого элементаЭтот код позволит проверить, что фокус находится на правильном элементе после нажатия Tab.
Для перемещения по элементам в обратном порядке используется
сочетание клавиш Shift + Tab. Для тестирования
навигации назад в Playwright можно также использовать метод
page.keyboard.press():
await page.keyboard.press('Shift+Tab');Этот метод имитирует нажатие Shift + Tab и позволяет вернуться к предыдущему элементу на странице. В тестах это полезно для проверки, что навигация работает в обоих направлениях.
После того как фокус установлен на нужном элементе, следующим шагом
является тестирование ввода данных. Для этого Playwright предоставляет
метод page.keyboard.type().
await page.keyboard.type('Test input');Этот метод эмулирует набор текста в выбранное текстовое поле. Его можно использовать для тестирования форм, полей ввода и любых других элементов, принимающих текст.
Некоторые интерфейсы, например, выпадающие списки или карусели,
требуют навигации с помощью стрелок. В Playwright можно эмулировать
нажатия стрелок с помощью метода page.keyboard.press():
await page.keyboard.press('ArrowDown'); // Переход к следующему элементу в списке
await page.keyboard.press('ArrowUp'); // Переход к предыдущему элементуЭтот подход позволяет тестировать взаимодействие с элементами, где движение через интерфейс требует клавиш стрелок, например, при навигации по выпадающим спискам или галереям.
Рассмотрим пример теста, который проверяет, что можно перемещаться между полями формы с помощью клавиатуры и вводить данные:
const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('https://example.com/form');
// Навигация через поля формы с использованием Tab
await page.keyboard.press('Tab');
await page.waitForTimeout(100); // Небольшая пауза для удобства
// Проверка, что фокус находится на первом поле
const focusedElement = await page.$(':focus');
const focusedElementTag = await focusedElement.evaluate(el => el.tagName);
if (focusedElementTag === 'INPUT') {
console.log('Фокус на первом поле');
}
// Ввод данных в поле
await page.keyboard.type('John Doe');
await page.keyboard.press('Tab');
await page.keyboard.type('john.doe@example.com');
// Завершение теста
await browser.close();
})();Этот тест проверяет, что фокус переходит на элементы формы при нажатии Tab и что данные вводятся корректно.
Модальные окна и всплывающие окна требуют особого внимания при тестировании навигации с клавиатуры. Важно убедиться, что после появления модального окна фокус перемещается внутрь этого окна и не выходит за его пределы.
Для имитации таких действий можно использовать Playwright для проверки видимости модального окна и переключения фокуса:
// Ожидание появления модального окна
const modal = await page.waitForSelector('.modal');
// Проверка, что фокус внутри модального окна
await page.keyboard.press('Tab');
const modalFocusedElement = await modal.$(':focus');
const modalFocusedTag = await modalFocusedElement.evaluate(el => el.tagName);
console.log(modalFocusedTag); // Должно вернуть тег элемента внутри модального окнаЭтот код помогает проверить, что фокус не уходит за пределы модального окна.
Одной из целей тестирования навигации с клавиатуры является проверка доступности веб-приложений. Важно, чтобы все важные элементы были доступны через клавиатуру и что последовательность фокуса была логичной и удобной. Для этого можно использовать различные методы Playwright для имитации действий и проверки видимости элементов.
Дополнительно, можно использовать библиотеку axe-core для проверки доступности и интегрировать её с Playwright:
const axe = require('axe-core');
const { chromium } = require('playwright');
(async () => {
const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
const results = await page.evaluate(() => axe.run());
console.log(results.violations); // Вывод всех нарушений доступности
})();Этот подход позволяет выявить проблемы с доступностью, которые могут возникнуть в процессе навигации с клавиатуры.
Тестирование навигации с клавиатуры является важной частью обеспечения доступности и удобства использования веб-приложений. Playwright предоставляет мощные инструменты для имитации действий с клавиатурой, таких как перемещение по элементам с помощью Tab, Shift + Tab, стрелок и ввода данных. Использование этих методов помогает обнаружить проблемы с навигацией и фокусом, а также улучшить доступность интерфейса для пользователей с ограниченными возможностями.