End to End Testing c 30DaysOfPlaywright

? | Цели на сегодня

Добро пожаловать  на 1-й день челленджа #30DaysOfPlaywright!

Сегодня наша  цель – изучить руководство по началу работы с фреймворком, которое должно помочь настроить средство запуска Playwright Test в локальной среде разработки и подготовить его для  выполнения первого тестового прогона.

  • Часть 1.  Установите Playwright Test runner и проверьте, что все установилось, выполнив первый тестовый запуск с предоставленным образцом.
    Данный этап включает в себя:

  • Часть 2. Изучите основы тестирования Playwright и научитесь писать сложные тестовые сценарии. На этом этапе необходимо:

Сегодня будет рассмотрен первый этап, включающий в себя настройку, конфигурирование и проверку работы фреймворка для автоматизации тестирования.

1. Установка Playwright Test

Playwright Test написан на Node и устанавливается с помощью NPM. Делается это следующим образом:

$ npm i -D @playwright/test

Процесс установки Node и NPM довольно прост. Если вы работаете с Node впервые, рекомендую использовать Node Version Manager(NVM), чтобы легко инсталлировать и использовать разные версии Node.js.

2. Установка браузеров

По умолчанию Playwright Test запускается в headless режиме (во время тестирования нет видимого графического пользовательского интерфейса браузера), но его можно настроить для работы в режиме headed с помощью флага командной строки.

Каждая версия ​​Playwright требует определенные версии бинарников браузера. Приведенная ниже команда по умолчанию устанавливает все поддерживаемые двоичные файлы браузера.

$ npx playwright install

Бинарные файлы браузера по умолчанию устанавливаются в кеш-память  ОС. Полезно будет проверить этот каталог, чтобы увидеть, какие из них в настоящий момент установлены в вашей среде разработки. Далее приведен пример моего ПО с MacOS:

$ du -hs ~/Library/Caches/ms-playwright/*
343M    chromium-930007
345M    chromium-939194
199M    firefox-1297
200M    firefox-1304
213M    webkit-1564
211M    webkit-1578

3. Написание и запуск первого теста

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

const { test, expect } = require('@playwright/test');
test('basic test', async ({ page }) => {
  await page.goto('https://playwright.dev/');
  const title = page.locator('.navbar__inner .navbar__title');
  await expect(title).toHaveText('Playwright');
});

Сценарий тестирования вполне читабелен. Очевидно, что этот тест предполагает посещение указанной страницы (сайт Playwright) и выбор элемента с заданными классом. При этом в него ввели требование относительно содержания определенного текста: “Playwright”.

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

$ npx playwright test  
Running 1 test using 1 worker
  ✓  test.spec.js:3:1 › basic test (961ms)

  1 passed (1s)

Если же тест упадет, то произойдет следующее:

$ npx playwright test 
Running 1 test using 1 worker
  ✘  test.spec.js:3:1 › basic test (6s)
  1) test.spec.js:3:1 › basic test ============================
    Error: expect(received).toHaveText(expected)
    Expected string: "Play wright"
    Received string: "Playwright"
    Call log:
    ...

4. Запуск в Headed режиме

Средство выполнения тестов Playwright по умолчанию работает в headless  режиме. Но что, если вы хотите видеть пользовательский интерфейс браузера во время выполнения теста? Просто добавьте соответствующий флаг:

$ npx playwright test --headed

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

5. Настройка Test Runs

Вы могли заметить, что в режиме Head по умолчанию используется Chromium. Что, если нужно запустить тест в другом браузере (Firefox, WebKit) или провести кросс-браузерное тестирование с использованием разного софта в одном прогоне? Здесь могут помочь файлы конфигурации.

Руководство по началу работы с фреймворком содержит стандартный файл конфигурации. Обратите внимание на то, что в файле есть несколько проектов, каждый из которых можно отдельно настроить вместе с глобальными параметрами (retries), которые им предшествуют.

// playwright.config.js
// @ts-check
const { devices } = require('@playwright/test');

/** @type {import('@playwright/test').PlaywrightTestConfig} */
const config = {
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  use: {
    trace: 'on-first-retry',
  },
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },
    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },
  ],
};

module.exports = config;

Вышесказанное позволяет запустить все конфигурации проекта в одном прогоне (например, кроссбраузерное тестирование), используя:

$ npx playwright test       
Using config at tests/playwright.config.js
Running 3 tests using 3 workers

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

Список поддерживаемых  устройств для эмуляции смотрите тут.

 {
      name: 'Mobile Chrome',
      use: { ...devices['Pixel 5'] },
    },

Вы также можете выбрать конкретную конфигурацию (из параметров проекта):

$ npx playwright test --project="Mobile Chrome"
Using config at tests/playwright.config.js
Running 1 test using 1 worker
  ✓  [Mobile Chrome] › test.spec.js:3:1 › basic test (1s)
  1 passed (1s)

При тестировании нескольких конфигураций в одном прогоне поведение по умолчанию выделяет свой рабочий поток для каждого проекта (таким образом, 4 теста приходятся на 4 воркера). Изменить это можно с помощью флага командной строки, контролирующего степень распараллеливания выполнения теста.

$ npx playwright test --workers=2
tests/playwright.config.js
Running 4 tests using 2 workers

Другие варианты конфигурации  будут рассмотрены в одной из следующих публикаций блога.

6. Изучение параметров командной строки

Рассмотренные исходники показывают простой вариант создания и выполнения прогона в Playwright с одним файлом тестового сценария. Однако посредством командной строки можно реализовывать и более сложные варианты.

Для просмотра и изучения доступных опций  используйте команду: 

$ npx playwright test --help
Usage: npx playwright test [options] [test-filter...]

Вы можете:

  • запускать тесты, которые совпадают по  регулярным выражениям (в командной строке);

  • ограничивать количество повторных попыток;

  • контролировать степень распараллеливания (с подсчетом воркеров);

  • выбирать тип репортера для отображения  результатов.

Cli примеры более подробно будут рассмотрены в одной из следующих публикаций блога.

7. Первичная настройка e2e тестов для проекта

Если вы смотрели  Introduction to Playwright Test runner, то должны были узнать, как пользоваться командой npm init playwright для проведения полной настройки e2e тестов.

Можно использовать пакет для быстрого старта create-playwright, введя всего одну команду, которая установит фреймворк (и его зависимости), а также настроит базовые файлы и конфигурации для рабочих процессов e2e-тестирования. С его помощью также можно инициализировать существующие проекты для реализации тестов в Playwright.

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

День 1: Обзор возможностей фреймворка и первичных настроек

Если вы зашли так далеко, поздравляю! Вот список задач, которые необходимо было выполнить:

  • ✅ Установка Playwright Test.

  • ✅ Создание простого теста.

  • ✅ Успешный запуск (headless) Playwright Test run.

  • ✅ Запуск (headless) Playright Test run с ошибкой.

  • ✅ Создание файла конфигураций с несколькими проектами.

  • ✅ Запуск Playwright Test в headed режиме.

  • ✅ Запуск Playwright Test в headed режиме с разными браузерами.

  • ✅ Запуск Playwright Test с разным количеством воркеров.

  • ✅ Изучение параметров командной строки в Playwright Test.

  • ✅ Создание Playwright Test (end-to-end) с помощью генератора create-playwright.

День 2: Продолжение изучения настроек фреймворка

Уже завтра будет опубликована вторая часть статьи. Подписывайтесь, чтобы не пропустить следующие этапы работы с фреймворком:

  • Написание assertions для проверки выполнения ожидаемого поведения. 

  • Test fixtures – создания правильного контекста page/browser context.

  • Test hooks – настройка и выполнение действий между тестами.