Настройка Playwright с Next.js

Playwright — это фреймворк для тестирования, который позволяет автоматизировать работу с Chromium, Firefox и WebKit через единый API. Его можно использовать для написания сквозных тестов (E2E). В этом руководстве показано, как настроить Playwright с Next.js и написать первые тесты.

Быстрый старт

Самый быстрый способ начать — использовать create-next-app с примером with-playwright. Это создаст проект Next.js с предварительно настроенным Playwright.

Terminal

npx create-next-app@latest --example with-playwright with-playwright-app

Ручная настройка

Для установки Playwright выполните следующую команду:

Terminal

npm init playwright
# или
yarn create playwright
# или
pnpm create playwright

Это запустит серию подсказок для настройки и конфигурации Playwright в вашем проекте, включая добавление файла playwright.config.ts. Подробное руководство см. в документации Playwright по установке.

Создание первого E2E-теста на Playwright

Создайте две новые страницы Next.js:

app/page.tsx

import Link from 'next/link'

export default function Page() {
  return (
    <div>
      <h1>Главная</h1>
      <Link href="/about">О нас</Link>
    </div>
  )
}

app/about/page.tsx

import Link from 'next/link'

export default function Page() {
  return (
    <div>
      <h1>О нас</h1>
      <Link href="/">Главная</Link>
    </div>
  )
}

Затем добавьте тест для проверки работы навигации:

tests/example.spec.ts

import { test, expect } from '@playwright/test'

test('должен переходить на страницу "О нас"', async ({ page }) => {
  // Начинаем с главной страницы (baseURL задаётся через webServer в playwright.config.ts)
  await page.goto('http://localhost:3000/')
  // Находим элемент с текстом "О нас" и кликаем по нему
  await page.click('text=О нас')
  // Новый URL должен быть "/about" (baseURL используется здесь)
  await expect(page).toHaveURL('http://localhost:3000/about')
  // Новая страница должна содержать заголовок h1 с текстом "О нас"
  await expect(page.locator('h1')).toContainText('О нас')
})

Полезно знать: Вместо page.goto("http://localhost:3000/") можно использовать page.goto("/"), если добавить "baseURL": "http://localhost:3000" в конфигурационный файл playwright.config.ts.

Запуск тестов Playwright

Playwright будет имитировать действия пользователя в трёх браузерах: Chromium, Firefox и Webkit. Для этого требуется, чтобы сервер Next.js был запущен. Рекомендуется запускать тесты против production-кода, чтобы точнее имитировать поведение приложения.

Выполните npm run build и npm run start, затем в другом терминале запустите npx playwright test для выполнения тестов Playwright.

Полезно знать: Альтернативно можно использовать функцию webServer, чтобы Playwright сам запускал сервер разработки и ждал его полной готовности.

Запуск Playwright в Continuous Integration (CI)

По умолчанию Playwright запускает тесты в режиме без графического интерфейса (headless). Для установки всех зависимостей Playwright выполните npx playwright install-deps.

Дополнительные ресурсы о Playwright и Continuous Integration: