Тестирование с параметром noWaitAfter в Playwright🕐

Параметр noWaitAfter в Playwright позволяет настроить, как обрабатываются действия, такие как клики по ссылкам, отправка форм или запуск сетевых запросов. Он определяет, должен ли Playwright ждать завершения вызванного события (навигации или перехода на другую страницу) перед тем, как перейти к следующему шагу.
➡️ noWaitAfter: false (по умолчанию): Playwright ждёт завершения действия перед переходом к следующему шагу.
➡️ noWaitAfter: true: Playwright немедленно переходит к следующему шагу, даже если действие ещё не завершено.

Сценарии использования:
💙 noWaitAfter: true в обработчиках локаторов
С версии Playwright 1.44 параметр noWaitAfter: true можно использовать с обработчиками локаторов. Это особенно полезно при работе с оверлеями или другими элементами, которые могут мешать выполнению действий.

test('Закрытие оверлея с noWaitAfter: true', async ({ page }) => {
    await page.goto('http://localhost:3000');
    
    // Локатор для оверлея
    const overlayLocator = page.locator('#overlay');
    
    // Добавляем обработчик локатора для закрытия оверлея
    await page.addLocatorHandler(overlayLocator, async overlay => {
        await overlay.locator('#closeButton').click(); // Закрытие оверлея
    }, { times: 3, noWaitAfter: true }); // Макс. 3 раза, без ожидания после клика
    
    // Взаимодействие с кнопкой после закрытия оверлея
    await page.click('#fetchWeatherButton');
    
    // Проверка отображения прогноза погоды
    await page.waitForSelector('#weatherDisplay:has-text("Прогноз погоды для Chennai")');
});

В этом примере обработчик кликает на кнопку закрытия оверлея, и благодаря noWaitAfter: true, тест продолжает выполнение, не дожидаясь исчезновения оверлея.

💙 noWaitAfter: false для получения данных
Когда требуется подождать завершения сетевого запроса, например, получения прогноза погоды, параметр noWaitAfter: false гарантирует, что Playwright дождётся завершения запроса.

test('Получение данных погоды с noWaitAfter: false', async ({ page }) => {
  await page.goto('http://localhost:3000');
  
  // Клик по кнопке "Получить прогноз погоды" и ожидание завершения запроса
  await page.click('#fetchWeatherButton', { noWaitAfter: false });
  
  // Проверка отображения данных после загрузки
  await page.waitForSelector('#weatherDisplay:has-text("Прогноз погоды для Chennai")');
  const weatherText = await page.textContent('#weatherDisplay');
  console.log(weatherText);
});

Здесь Playwright ждёт, пока данные полностью загрузятся, чтобы тест был надёжным.

💙 noWaitAfter: true для UI-манипуляций
Для операций, таких как переключение видимости элементов или обновление интерфейса, нет необходимости ждать завершения действий. Параметр noWaitAfter: true позволяет пропускать лишние ожидания.

test('UI-манипуляции с noWaitAfter: true', async ({ page }) => {
  await page.goto('http://localhost:3000');
  
  // Клик по кнопке без ожидания
  await page.click('#toggleButton', { noWaitAfter: true });
  await page.waitForSelector('#toggleElement.visible');
  
  // Симуляция быстрых кликов без ожидания
  await page.click('.rapidButton', { noWaitAfter: true });
  
  // Кастомное действие, активируемое таймером
  await page.click('#customActionButton', { noWaitAfter: true });
  await page.waitForSelector('#customActionResult:has-text("Действие завершено!")');
});

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

❓ Зачем использовать noWaitAfter?
➡️ Ускорение тестов. Пропуская ненужные ожидания, можно значительно повысить скорость выполнения тестов.
➡️ Обеспечение точности. Использование noWaitAfter: false гарантирует, что Playwright будет ждать завершения действий, требующих сетевых запросов или навигации, что снижает риск ложноположительных результатов.

⏰ Когда использовать noWaitAfter?
➡️ Используйте noWaitAfter: false для действий, связанных с навигацией или загрузкой данных.
➡️ Используйте noWaitAfter: true для манипуляций с интерфейсом и других действий, не требующих ожидания.

Теги: #playwright