Введение в платформу тестирования драматургов

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

Что это?

Начнем с того, что такое Драматург. Playwright — это тестовая среда для проведения e2e-тестирования. С Playwright мы можем писать e2e-тесты и запускать их в разных браузерах, таких как Chrome, Firefox и Webkit. Мы можем запускать наши тесты на многих платформах, таких как Windows, Mac, Linux или CI, и мы можем писать тесты на Typescript, Javascript, Java, Phyton или .Net.

Если вы откроете официальный веб-сайт, вы сможете найти следующие характеристики:

* Любой браузер Любая платформа Один API * Устойчивость Нет ненадежных тестов * Без компромиссов Без ограничений * Полная изоляция Быстрое исполнение * Мощные инструменты

На мой взгляд, инструмент отражает все эти характеристики.

Приложение Крестики-нолики

В этой серии я хочу использовать приложение TicTacToe, созданное с помощью vite + react. И вы можете найти его здесь.

Как видите, приложение простое, но с его помощью мы можем начать двигаться к первым шагам с Playwright.

Установить драматурга

Первым шагом для использования Playwright является его установка, это очень просто. Откройте терминал и введите npm init playwright@latest (я использую npm, но если вы хотите использовать yarn или pnpm, прочтите документы). Хорошо, теперь установка задает вам несколько вопросов:

1. Где размещать сквозные тесты? Параметр по умолчанию — tests, но я предпочитаю использовать папку e2e.
2. Добавить рабочий процесс GitHub Actions? Параметр по умолчанию — false; в этой демонстрации я пока оставляю для этого параметра значение false.
3. Установить браузеры Playwright (можно выполнить вручную с помощью «npx playwright install»)? Параметр по умолчанию — true, и я использовал это значение

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

Первый просмотр

Установка создала в вашем репозитории 3 новых файла:

* драматург.config.ts * e2e/example.spec.ts * тесты-примеры/demo-todo-app.spec.ts

Начнем с последнего, самого простого 😊 Этот файл содержит список примеров того, как можно писать тесты с помощью Playwright. В нем используется приложение, созданное командой драматургов (простое приложение для ведения дел), и показано, как вы можете взаимодействовать со своей страницей.

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

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

Проведите свой первый тест

Пришло время увидеть Playwright в действии, поэтому снова откройте терминал и выполните следующую команду npx playwright test. Результат примерно такой

Драматург в этом отчете показывает вам результат его выполнения, и вы можете проверить, все ли прошло нормально. В отчете показан результат для каждого браузера, указанного в конфигурации, в данном случае: Chromium, Firefox и Webkit.

Напишите свой первый тест

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

const config: PlaywrightTestConfig = {
  ...
  webServer: {
    command: "npm run dev",
    port: 5173,
  },
  ...
};

Н.Б. проверьте свой порт, выполнив команду npm run dev, вы должны использовать тот же порт, что и vite.

А теперь пришло время для вашего первого теста. Откройте файл e2e/example.spec.ts и переименуйте его в e2e/tit-tac-toe.spec.ts. Затем почистите все в файле и оставьте только строку импорта import { expect, test } from "@playwright/test";.

Теперь добавьте свой первый тест

test("show tic tac toe page", async ({ page }) => {
  await page.goto("/");

  await expect(page).toHaveTitle("Tic Tac Toe");
});

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

Теперь пришло время проверить, работает ли тест в Playwright, но перед этим вы можете упростить взаимодействие с Playwright, добавив новый скрипт в package.json, как показано здесь

   ....
   "scripts": {
    ...
    "e2e": "playwright test"
  },

Теперь в вашем терминале вы можете ввести npm run e2e и вуаля, ваш тест пропал ✅

Добавив еще один скрипт в ваш package.json, вы сможете открыть результат отчета в своем браузере

   ....
   "scripts": {
    ...
    "e2e": "playwright test",
    "e2e:report": "playwright show-report"
  },

И теперь, если вы запустите команду npm run e2e:report в своем браузере, вы увидите результат своего первого теста.

Хорошо, думаю, пока все. Из этого поста вы узнали:

* Как установить Драматург * Как запустить тест * Как написать свой первый тест с Playwright

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

До свидания

пс. Вы можете найти результат этого поста по этой ссылке