Замедление выполнения действий

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

Зачем нужно замедление

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

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

Использование slowMo

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

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

const puppeteer = require(&

(async () => {
  const browser = await puppeteer.launch({
    headless: false,
    slowMo: 100  // Задержка 100 миллисекунд между командами
  });
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.click('#someButton');
  await page.type('#inputField', 'Test input');
  await browser.close();
})();

В приведённом примере используется параметр slowMo с задержкой в 100 миллисекунд между каждым действием. Это замедляет выполнение команд, позволяя наблюдать их в реальном времени. Такой подход полезен, когда необходимо увидеть, как выполняются сложные действия, такие как клики, ввод данных или переходы по страницам.

Замедление отдельных действий

Иногда требуется замедлить выполнение только конкретных действий, а не всех подряд. Для этого можно использовать методы page.waitForTimeout() или page.waitForSelector(). Оба этих метода могут быть полезны, если необходимо подождать перед следующим шагом или подождать до появления определённого элемента на странице.

Пример с waitForTimeout 
await page.goto('https://example.com');
await page.click('#someButton');
await page.waitForTimeout(500);  // Задержка 500 миллисекунд
await page.type('#inputField', 'Test input');

Задержка в 500 миллисекунд позволит отложить выполнение следующих команд и дать странице время для обновлений после клика на кнопку.

Пример с waitForSelector

Если требуется подождать появления элемента на странице, можно использовать метод waitForSelector(): 

await page.goto('https://example.com');
await page.click('#someButton');
await page.waitForSelector('#inputField', { visible: true });  // Ожидание появления поля
await page.type('#inputField', 'Test input');

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

Установка пауз в взаимодействиях с элементами

Замедление можно использовать не только для синхронизации шагов теста, но и для имитации реальных пользовательских действий, таких как медленный ввод текста или медленный клик. Для этого можно использовать комбинацию методов type() и click() с дополнительными опциями для замедления.

Медленный ввод текста

При тестировании форм важно убедиться, что данные вводятся корректно, и проверка должна учитывать скорость ввода. Для этого в методе page.type() можно использовать параметр delay: 

await page.goto('https://example.com');
await page.type('#inputField', 'Test input', { delay: 100 });  // Задержка 100 миллисекунд между каждым символом

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

Медленный клик

Можно также замедлить выполнение клика, но для этого нужно использовать кастомную реализацию с page.mouse.click(). В Puppeteer нет прямой опции для замедленного клика, но можно использовать задержки между событиями: 

await page.goto('https://example.com');
await page.click('#someButton');  // Быстрый клик
await page.mouse.move(100, 100);  // Перемещение мыши
await page.mouse.down();          // Начало клика
await page.waitForTimeout(200);   // Задержка 200 миллисекунд
await page.mouse.up();            // Завершение клика

Этот подход позволяет реализовать медленный и контролируемый клик с задержкой.

Управление асинхронностью

Важно понимать, что замедление выполнения не всегда означает замедление асинхронных операций, таких как загрузка данных через запросы. Для синхронизации таких процессов рекомендуется использовать различные методы ожидания: например, waitForRequest() или waitForResponse().

Пример ожидания ответа на запрос: 

await page.goto('https://example.com');
await page.click('#loadDataButton');
await page.waitForResponse(response => response.url().includes('data') && response.status() === 200);

В этом примере мы ожидаем, пока запрос на загрузку данных не вернёт успешный ответ, прежде чем продолжить выполнение теста.

Отладка с помощью замедления

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

await page.goto('https://example.com');
await page.click('#someButton');
await page.waitForTimeout(500);
console.log('Кнопка была нажата');
await page.type('#inputField', 'Test input');
await page.waitForTimeout(500);
console.log('Данные введены');

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

Заключение

Замедление выполнения в Puppeteer предоставляет мощный инструмент для улучшения точности тестирования, отладки и синхронизации действий. Оно позволяет сделать тесты более детализированными, замедляя действия, чтобы иметь возможность наблюдать за каждым моментом их выполнения. Важно применять замедление не только для устранения синхронных проблем, но и для точной имитации реальных пользовательских взаимодействий, таких как ввод текста или клик.

Оглавление