E2E-тестирование с Playwright

Playwright — это инструмент для автоматизированного тестирования веб-приложений, который позволяет выполнять E2E (End-to-End) тесты с использованием различных браузеров (Chromium, Firefox и WebKit). В отличие от многих других инструментов для тестирования, таких как Selenium, Playwright поддерживает современный веб и предоставляет множество возможностей для тестирования, включая эмуляцию мобильных устройств, обработку сетевых запросов, тестирование с различными браузерами и многое другое.

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

Основы E2E-тестирования

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

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

Интеграция Playwright с HTMX

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

Тестирование приложений, использующих HTMX, имеет свои особенности. В отличие от традиционных веб-приложений, где обновления контента происходят за счет полной перезагрузки страницы, с HTMX контент может обновляться частично, что делает тестирование более сложным, но и более точным. Playwright идеально подходит для тестирования таких приложений, так как позволяет контролировать и ожидать изменения, происходящие внутри части страницы, без необходимости перезагружать её полностью.

Настройка Playwright для тестирования HTMX

Перед тем как начать тестирование, необходимо установить Playwright. Для этого можно использовать npm:

npm install playwright

После этого необходимо создать базовый скрипт для запуска тестов. Пример базовой конфигурации Playwright для работы с браузером Chromium:

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('http://localhost:3000'); // Адрес приложения
  // Тестирование логики
  await browser.close();
})();

Тестирование динамических обновлений с HTMX

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

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

Пример теста, который проверяет, что контент обновляется после клика на кнопку, использующую HTMX:

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('http://localhost:3000'); // Адрес вашего приложения

  // Находим кнопку с HTMX-атрибутом
  const button = await page.$('button[data-hx-get="/new-content"]');

  // Кликаем по кнопке
  await button.click();

  // Ожидаем, пока появится новый контент
  await page.waitForSelector('#new-content'); // id элемента, который должен обновиться

  // Проверяем, что новый контент появился на странице
  const newContent = await page.innerText('#new-content');
  console.log(newContent);

  await browser.close();
})();

Работа с асинхронными запросами и загрузкой данных

HTMX активно использует AJAX-запросы для динамической загрузки контента, что требует дополнительного контроля за асинхронностью в тестах. Для Playwright это не является проблемой, так как библиотека предоставляет мощные средства для работы с ожиданием сетевых запросов.

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

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

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('http://localhost:3000'); // Адрес приложения

  // Создаём слушателя для перехвата сетевых запросов
  page.on('response', response => {
    if (response.url().includes('/new-content')) {
      console.log('Запрос на новый контент завершён');
    }
  });

  // Находим и кликаем на кнопку, которая инициирует запрос
  const button = await page.$('button[data-hx-get="/new-content"]');
  await button.click();

  // Ожидаем обновления контента после завершения запроса
  await page.waitForSelector('#new-content');

  const newContent = await page.innerText('#new-content');
  console.log(newContent);

  await browser.close();
})();

Обработка ошибок и проверка отклонений в запросах

При тестировании с Playwright важно не только проверять успешные случаи, но и обрабатывать ошибки. HTMX может вернуть ошибку, например, при неверном запросе на сервер. Playwright предоставляет возможности для отслеживания и проверки ошибок HTTP-запросов.

Пример проверки ошибок HTTP-запросов:

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('http://localhost:3000'); // Адрес вашего приложения

  // Создаём слушателя для перехвата сетевых ошибок
  page.on('response', async response => {
    if (response.status() >= 400) {
      console.log('Ошибка при загрузке контента: ', response.status());
    }
  });

  // Инициируем запрос через HTMX
  const button = await page.$('button[data-hx-get="/new-content"]');
  await button.click();

  await page.waitForSelector('#new-content'); // Ожидаем появления нового контента

  await browser.close();
})();

Тестирование мобильных устройств и эмуляция

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

Пример тестирования на мобильном устройстве:

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  
  // Эмулируем мобильное устройство
  const context = await browser.newContext({
    viewport: { width: 375, height: 667 },
    deviceScaleFactor: 2,
    isMobile: true
  });

  const mobilePage = await context.newPage();
  await mobilePage.goto('http://localhost:3000');

  // Тестируем взаимодействие с кнопкой, которая использует HTMX
  const button = await mobilePage.$('button[data-hx-get="/new-content"]');
  await button.click();

  await mobilePage.waitForSelector('#new-content');

  await browser.close();
})();

Заключение

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