Основное руководство по приспособлениям в драматургии
testing playwright e2e

Основное руководство по приспособлениям в драматургии

10 февраля 2023 г.

Привет,

Сегодня я хочу поговорить о Fixtures, жизненно важном друге, если вы собираетесь работать с Playwright и хотите обмениваться данными между своими тестами или создавать собственные исполнения.

Начнем с простого примера.

test('should win the player "X"', async ({ page }) => {
  await page.goto("/");
  await page.locator("button:nth-child(1)").click();
  await page.locator("button:nth-child(5)").click();
  await page.locator("button:nth-child(6)").click();
  await page.locator("button:nth-child(7)").click();
  await page.locator("button:nth-child(3)").click();
  await page.locator("button:nth-child(9)").click();
  await page.locator("button:nth-child(2)").click();

  const winnerParagraph = await page.getByText(/winner/i);
  await expect(winnerParagraph).toContainText("X");
});

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

Таким образом, первый рефакторинг перед введением функции фиксации может быть таким.

test('should win the player "X"', async ({ page }) => {
  const playerXWinMoves = [1, 5, 6, 7, 3, 9, 2];

  for (const move of playerXWinMoves) {
    await page.locator(`button:nth-child(${move})`).click();
  }

  const winnerParagraph = await page.getByText(/winner/i);
  await expect(winnerParagraph).toContainText("X");
});

Как вы можете заметить, все шаги по воспроизведению ходов игроков содержатся в переменных playerXWinMoves. Тест лаконичен, но самое главное, что все действия находятся в одной переменной. Теперь пришло время представить светильники.

Прежде чем продолжить, позвольте мне описать, что такое приборы.

Что такое светильники

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

После этого определения вы можете подумать, что фикстуры можно заменить хуками до/после, но у фикстур есть несколько преимуществ перед этими хуками:

* Фикстуры инкапсулируют установку и демонтаж в одном месте, что упрощает написание. * Фикстуры повторно используются между тестовыми файлами — вы можете определить их один раз и использовать во всех своих тестах. Вот как работает встроенная в Playwright фикстура page. * Светильники по запросу — вы можете определить столько приспособлений, сколько хотите, и Playwright Test настроит только те, которые необходимы для вашего теста, и ничего больше. * Фикстуры являются составными — они могут зависеть друг от друга, обеспечивая сложное поведение. * Светильники гибкие. Тесты могут использовать любую комбинацию приборов, чтобы точно настроить необходимую им среду, не затрагивая другие тесты. * Светильники упрощают группировку. Вам больше не нужно оборачивать тесты в describe, которые настраивают среду, и вместо этого вы можете группировать тесты по их значению.

Отлично, после этой скучной теоретической части пришло время запачкать руки приспособлениями в Playwright.

Чтобы начать объяснение, я хочу начать с конечного результата.

import { expect, test as base } from "@playwright/test";

type TestFixtures = {
  playerXWinMoves: [number, number, number, number, number, number, number];
};

const test = base.extend<TestFixtures>({
  playerXWinMoves: async ({}, use) => {
    await use([1, 5, 6, 7, 3, 9, 2]);
  },
});

test('should win the player "X"', async ({ page, playerXWinMoves }) => {
  for (const move of playerXWinMoves) {
    await page.locator(`button:nth-child(${move})`).click();
  }

  const winnerParagraph = await page.getByText(/winner/i);
  await expect(winnerParagraph).toContainText("X");
});

Как видите, чтобы построить нашу фикстуру, вам нужно расширить тестовый объект, предоставленный Playwright. Внутри этой функции вы можете создать объект, представляющий ваши приборы. В этом случае я добавил свойство playerXWinMoves, чтобы поделиться шагами по воспроизведению выигрыша Player X. Кроме того, просто потому, что мне нравится работать с Typescript, я добавил тип TestFixtures для описания своих фикстур. Важно отметить, что внутри прибора вы должны использовать метод use, чтобы установить значение для ваших приборов.

Хорошо, продолжайте, а теперь давайте посмотрим на тест. Вы можете заметить, что вы можете получить фикстуру playerXWinMoves непосредственно из объекта, переданного вашему тесту. И теперь, если вы удалите предыдущую переменную и используете новую из параметров, вы создадите свой первый тест с Playwright, используя фикстуру.

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

Но прежде чем закрыть, позвольте мне оставить вас еще немного. С фикстурами вы также можете переопределить объект, отображаемый непосредственно Playwright. Например, вы можете переопределить объект страницы и вместо создания хука beforeEach для перехода на домашнюю страницу, вы можете переопределить страницу и добавить этот шаг в фикстуру, чтобы каждый тест перед его выполнение, выполняет шаги для перехода на домашнюю страницу.

И как мы можем это сделать? Просто так.

const test = base.extend<TestFixtures>({
  page: async ({ baseURL, page }, use) => {
    baseURL && (await page.goto(baseURL));
    await use(page);
  },
});

Делая это, теперь каждый тест, когда он начинает свое выполнение, переходит к baseURL, а затем запускает весь код. Невероятно нет? Теперь вы можете удалить хук beforeEach в тестовом файле и повторно запустить тесты, чтобы проверить результат.

Ну вот и все!

Сегодня вы узнали, как работают светильники Playwright и как их собрать.

Надеюсь, вам понравился этот пост, и если у вас есть какие-либо сомнения, не стесняйтесь обращаться ко мне; Я буду рад помочь вам.

До скорой встречи

До свидания 👋

пс. вы можете ознакомиться с кодом этой статьи здесь

Оригинал

Recent Post

Categories

PREVIOUS ARTICLE
NEXT ARTICLE