Hover и фокусировка

Puppeteer — это мощный инструмент для автоматизации браузера, основанный на Node.js, который предоставляет разработчикам возможность взаимодействовать с веб-страницами через интерфейс программного кода. Одной из важных задач в процессе тестирования и автоматизации является моделирование действий пользователя, таких как наведение курсора мыши (hover) и фокусировка на элементах страницы.

Наведение курсора (Hover)

Одной из типичных задач при автоматизации тестирования веб-страниц является симуляция действий, которые происходят при наведении курсора мыши на элемент страницы. Например, это может быть открытие выпадающего меню, отображение подсказок или активация анимации. Puppeteer предоставляет метод для имитации этого поведения с помощью метода hover().

Пример использования метода hover() 
const puppeteer = require(&

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  
  await page.goto('https://example.com');
  
  // Наводим курсор на элемент с классом '.menu-item'
  await page.hover('.menu-item');
  
  // Дожидаемся, пока меню откроется
  await page.waitForSelector('.submenu', { visible: true });
  
  await browser.close();
})();

В этом примере создается новый браузер и открывается страница. Затем с помощью метода hover() происходит наведение на элемент с классом .menu-item. После этого с помощью waitForSelector() мы ожидаем появления подменю с классом .submenu, которое должно появиться в ответ на действие пользователя.

Метод hover() имитирует поведение пользователя, при этом важно учитывать, что элемент должен быть видимым и доступным для взаимодействия. Puppeteer автоматически скроллит страницу, если элемент находится вне области видимости.

Использование параметров для управления поведением

Метод hover() может принимать объект с дополнительными параметрами, которые позволяют более точно настроить его поведение:

  • x, y: Координаты, куда должен быть направлен курсор относительно элемента.
  • delay: Задержка в миллисекундах перед выполнением наведения.

Пример с использованием параметров: 

await page.hover('.menu-item', {
  x: 10, // Смещение курсора по оси X
  y: 20, // Смещение курсора по оси Y
  delay: 100 // Задержка перед действием
});

Эти параметры позволяют создавать более сложные сценарии, например, точное управление движением мыши.

Фокусировка на элементах

Фокусировка на элементах — это важная часть взаимодействия с веб-страницами, особенно при тестировании форм или элементов ввода. В Puppeteer есть метод focus(), который позволяет установить фокус на конкретный элемент страницы.

Пример использования метода focus() 
const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  
  await page.goto('https://example.com');
  
  // Устанавливаем фокус на поле ввода с id 'username'
  await page.focus('#username');
  
  // Пишем текст в поле
  await page.keyboard.type('testuser');
  
  await browser.close();
})();

В этом примере мы используем метод focus(), чтобы установить фокус на поле ввода с id #username. После этого с помощью keyboard.type() автоматически вводится текст в это поле.

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

Комбинированные действия: Hover и Focus

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

Пример: 

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  
  await page.goto('https://example.com');
  
  // Наводим курсор на элемент и устанавливаем фокус
  await page.hover('.menu-item');
  await page.focus('.input-field');
  
  // Вводим текст в поле после фокусировки
  await page.keyboard.type('testinput');
  
  await browser.close();
})();

Здесь сначала происходит наведение на элемент .menu-item, а затем фокусировка на поле .input-field. Это позволяет смоделировать более сложное поведение пользователя.

Проверка наличия фокуса

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

Пример: 

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  
  await page.goto('https://example.com');
  
  // Устанавливаем фокус на поле ввода
  await page.focus('#username');
  
  // Проверяем, что элемент с id 'username' в фокусе
  const isFocused = await page.evaluate(() => document.activeElement.id === 'username');
  
  console.log('Фокус установлен:', isFocused); // true или false
  
  await browser.close();
})();

В этом примере мы используем page.evaluate(), чтобы выполнить код в контексте страницы и проверить, является ли элемент с id username активным.

Задержки и таймауты

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

Пример с задержкой: 

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  
  await page.goto('https://example.com');
  
  // Наводим курсор с задержкой
  await page.hover('.menu-item');
  await page.waitForTimeout(500); // Ожидаем 500 миллисекунд
  
  await browser.close();
})();

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

Заключение

Наведение курсора и фокусировка на элементах — это ключевые действия при автоматизации тестирования веб-страниц с использованием Puppeteer. Методы hover() и focus() предоставляют разработчикам необходимые инструменты для моделирования пользовательского поведения, включая взаимодействие с меню, формами и другими динамическими элементами страницы. Использование этих методов в сочетании с задержками и проверками позволяет создавать более точные и стабильные тесты для веб-приложений.

Оглавление