Навигация с клавиатуры

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

WebdriverIO предоставляет несколько способов взаимодействия с элементами веб-страницы с использованием клавиш. Важнейшими инструментами для этого являются методы keys(), addValue(), setValue() и selectByValue(). Каждое из этих действий может быть использовано для имитации реальных действий пользователей и проверки корректности работы интерфейса.

Использование метода keys()

Метод keys() является основным инструментом для эмуляции нажатия клавиш. С помощью этого метода можно передавать клавиши на уровне браузера и взаимодействовать с элементами страницы. Для того чтобы симулировать нажатие конкретной клавиши, достаточно передать её название в качестве аргумента метода.

Пример:

const { remote } = require('webdriverio');

async function navigate() {
  const browser = await remote({
    capabilities: {
      browserName: 'chrome'
    }
  });

  await browser.url('https://example.com');
  const inputField = await $('#inputField'); // Поиск поля ввода
  await inputField.click(); // Клик по полю для фокуса

  // Нажатие клавиши 'Enter'
  await browser.keys('Enter');
  
  await browser.deleteSession();
}

navigate();

В этом примере метод keys('Enter') имитирует нажатие клавиши Enter после того, как поле ввода получает фокус. keys() поддерживает не только стандартные символы клавиш, такие как буквы и цифры, но и функциональные клавиши, такие как Enter, Tab, Backspace и другие.

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

WebdriverIO также поддерживает сочетания клавиш, что может быть полезно для более сложных сценариев, например, при эмуляции нажатия нескольких клавиш одновременно (например, Ctrl+C, Shift+Tab).

Для этого можно передавать массив клавиш в метод keys(), что позволяет выполнять более сложные взаимодействия.

Пример:

const { remote } = require('webdriverio');

async function navigate() {
  const browser = await remote({
    capabilities: {
      browserName: 'chrome'
    }
  });

  await browser.url('https://example.com');
  const inputField = await $('#inputField');
  await inputField.click();

  // Использование комбинации клавиш Ctrl+A
  await browser.keys(['Control', 'a']);
  
  await browser.deleteSession();
}

navigate();

В данном случае комбинация клавиш Ctrl+A будет выполнена через массив, где первый элемент — это клавиша Control, а второй — a. Это позволяет эмулировать действия пользователя, требующие комбинации нескольких клавиш.

Взаимодействие с полями ввода

Для тестирования форм и других элементов ввода в WebdriverIO используются методы addValue(), setValue() и clearValue(). Эти методы позволяют заполнять поля, очищать их или отправлять данные, как это делает пользователь с клавиатуры.

  • addValue() добавляет значение в существующее содержимое поля ввода.
  • setValue() полностью заменяет содержимое поля.
  • clearValue() очищает поле ввода.

Пример:

const { remote } = require('webdriverio');

async function formTest() {
  const browser = await remote({
    capabilities: {
      browserName: 'chrome'
    }
  });

  await browser.url('https://example.com');
  const inputField = await $('#inputField');

  // Заполнение поля ввода
  await inputField.setValue('Test Value');
  
  // Очистка поля
  await inputField.clearValue();
  
  // Добавление значения в поле
  await inputField.addValue('New Value');

  await browser.deleteSession();
}

formTest();

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

Переключение фокуса с помощью Tab

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

Пример:

const { remote } = require('webdriverio');

async function tabNavigation() {
  const browser = await remote({
    capabilities: {
      browserName: 'chrome'
    }
  });

  await browser.url('https://example.com');
  
  const firstField = await $('#firstField');
  const secondField = await $('#secondField');

  await firstField.click(); // Клик по первому полю
  await browser.keys('Tab'); // Переключение на второе поле

  // Проверка, что фокус находится на втором поле
  const isFocused = await secondField.isFocused();
  console.log(isFocused); // true, если фокус на втором поле

  await browser.deleteSession();
}

tabNavigation();

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

Эмуляция прокрутки страницы

Прокрутка страницы с помощью клавиатуры также является важной частью автоматизации. Веб-браузеры позволяют пользователю прокручивать страницу с помощью клавиш PageUp, PageDown, стрелок вверх и вниз. В WebdriverIO это можно реализовать через метод keys().

Пример:

const { remote } = require('webdriverio');

async function scrollTest() {
  const browser = await remote({
    capabilities: {
      browserName: 'chrome'
    }
  });

  await browser.url('https://example.com');
  
  // Прокрутка страницы вниз
  await browser.keys('PageDown');
  
  // Прокрутка страницы вверх
  await browser.keys('PageUp');
  
  await browser.deleteSession();
}

scrollTest();

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

Взаимодействие с выпадающими списками

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

Пример:

const { remote } = require('webdriverio');

async function dropdownTest() {
  const browser = await remote({
    capabilities: {
      browserName: 'chrome'
    }
  });

  await browser.url('https://example.com');
  const dropdown = await $('#dropdown');
  await dropdown.click(); // Клик по выпадающему списку

  // Навигация по элементам списка
  await browser.keys('ArrowDown'); // Перемещение вниз по списку
  await browser.keys('Enter'); // Выбор первого элемента

  await browser.deleteSession();
}

dropdownTest();

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

Заключение

Навигация с клавиатуры в WebdriverIO является мощным инструментом для тестирования пользовательского взаимодействия с веб-страницами. Возможность эмуляции различных клавиш и сочетаний клавиш позволяет протестировать интерфейсы на полноту и корректность взаимодействия. Методы keys(), addValue(), setValue() и другие функции WebdriverIO обеспечивают гибкость в автоматизации тестирования и имитации действий пользователей.

Оглавление