Настройка первого проекта

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

1. Установка Node.js

Playwright является библиотекой для Node.js, поэтому перед его использованием нужно установить сам Node.js. Это можно сделать с помощью официального сайта nodejs.org или через пакетный менеджер, такой как nvm.

Для установки Node.js через nvm на Unix-подобных системах (Linux/macOS) выполните следующие команды:

nvm install node
nvm use node

Для Windows можно воспользоваться установщиком, доступным на сайте.

2. Создание проекта

После установки Node.js создается новый проект. Для этого необходимо создать директорию для проекта и инициализировать новый Node.js проект с помощью команды:

mkdir my-playwright-project
cd my-playwright-project
npm init -y

Это создаст файл package.json, который будет хранить все зависимости проекта.

3. Установка Playwright

Для установки Playwright используется npm, который автоматически добавит нужные зависимости в package.json. Для этого выполните следующую команду:

npm i playwright

Эта команда установит сам Playwright, а также зависимости для браузеров (Chromium, Firefox, WebKit). Вы можете установить только один из браузеров, если это необходимо:

npm i playwright-chromium
npm i playwright-firefox
npm i playwright-webkit

Однако для большинства проектов достаточно установить полный пакет.

4. Установка зависимостей для работы с тестами

В зависимости от того, как планируется запускать тесты, потребуется дополнительная настройка. Playwright хорошо интегрируется с такими фреймворками для тестирования, как Jest или Mocha. Рассмотрим установку и настройку с Jest.

Для начала установим Jest:

npm i --save-dev jest

Затем, нужно добавить в package.json скрипт для запуска тестов:

"scripts": {
  "test": "jest"
}

Теперь Jest готов к использованию. Чтобы интегрировать Playwright с Jest, необходимо установить дополнительные пакеты:

npm i --save-dev @playwright/test

5. Конфигурация проекта для работы с Playwright

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

Пример базовой конфигурации:

// playwright.config.js
module.exports = {
  timeout: 30000,
  use: {
    headless: false, // Запуск браузера в невидимом режиме
    browserName: 'chromium', // Указываем, с каким браузером будем работать
    baseURL: 'http://localhost:3000' // Устанавливаем базовый URL для тестов
  }
};

6. Написание первого теста

Теперь можно приступить к написанию первого теста. Для этого создаем новый файл, например, example.spec.js, и начинаем писать тесты:

const { test, expect } = require('@playwright/test');

test('проверка доступности главной страницы', async ({ page }) => {
  await page.goto('http://localhost:3000');
  await expect(page).toHaveTitle(/Главная страница/);
});

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

7. Запуск тестов

Запуск тестов осуществляется через команду:

npx playwright test

Эта команда выполнит все тесты, написанные с использованием API Playwright. Также можно указать конкретный файл, если нужно запустить только определённый тест:

npx playwright test example.spec.js

8. Структура проекта

Обычно для организации тестов создается следующая структура:

my-playwright-project/
│
├── node_modules/
│
├── tests/
│   ├── example.spec.js
│   └── another-test.spec.js
│
├── playwright.config.js
├── package.json
└── package-lock.json

Папка tests/ предназначена для хранения всех тестов. В корне проекта расположены конфигурационные файлы и зависимости.

9. Дополнительная настройка

Для удобства можно настроить запуск тестов на различных браузерах или в различных условиях. Например, Playwright поддерживает запуск тестов в облачных сервисах CI/CD, таких как GitHub Actions, GitLab CI или Jenkins. Также доступны параметры для эмуляции мобильных устройств, настройка сессий и обработка ошибок.

Кроме того, Playwright поддерживает расширенные возможности, такие как создание скриншотов или запись видео во время выполнения тестов. Пример добавления скриншотов:

test('проверка доступности главной страницы', async ({ page }) => {
  await page.goto('http://localhost:3000');
  await page.screenshot({ path: 'screenshot.png' });
  await expect(page).toHaveTitle(/Главная страница/);
});

10. Работа с CI/CD

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

Для GitHub Actions можно настроить файл workflow следующим образом:

name: Playwright Test

on: [push, pull_request]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '14'
      - name: Install dependencies
        run: npm install
      - name: Run tests
        run: npm test

Этот файл автоматически будет запускать тесты при каждом push или pull request в репозиторий.

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

Оглавление