Теория: Подготовка

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

Для варианта "с нуля" понадобится создать директорию, например hexlet-playwright. После этого можно устанавливать Playwright. Во время установки вас попросят ответить на несколько вопросов. Согласитесь с генерацией Github Actions workflow и установкой браузеров, это упростит нам работу в будущем.

npm init playwright@latest
Getting started with writing end-to-end tests with Playwright:
Initializing project in '.'
✔ Do you want to use TypeScript or JavaScript? · JavaScript
✔ Where to put your end-to-end tests? · tests
✔ Add a GitHub Actions workflow? (y/N) · true
✔ Install Playwright browsers (can be done manually via 'npx playwright install')? (Y/n) · true

JavaScript или TypeScript? С точки зрения кода разницы почти нет. Поэтому лучше выбирать TypeScript, но если вы хотите, то можете без проблем выбрать JavaScript. В этом курсе мы используем версию JavaScript, чтобы не усложнять жизнь тем, кто разрабатывает на чистом JavaScript.

Во время установки скачаются нужные браузеры и будет создана такая структура директорий:

playwright.config.js
package.json
package-lock.json
tests/
  example.spec.js
tests-examples/
  demo-todo-app.spec.js

Все дальнейшие тесты мы будем создавать в директории tests. Директория tests-examples содержит большое количество тестов приложения TodoMVC. Она нужна только для демонстрации, внутри можно посмотреть разнообразные примеры и подходы в работе с Playwright. Файл example.spec.js содержит простой тест, который поможет нам проверить, что все установилось корректно. Для этого запустим тесты:

npx playwright test

Running 6 tests using 4 workers
  6 passed (3.8s)

To open last HTML report run:

  npx playwright show-report

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

Во время разработки этот отчет помогает не сильно, проще зайди и посмотреть исходники теста. Поэтому старт отчета на ошибки можно отключить закомментировав в файле конфигурации playwright.config.js строчку reporter: 'html'.

Конфигурация

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

export default defineConfig({
  // другие опции
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },

    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },

    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },
  ],
})

Работу тестов можно ускорить закомментировав часть браузеров. Пока мы учимся, в этом нет никаких проблем.