Фикстуры в Playwright на простом примере

Подпишитесь на наш ТЕЛЕГРАМ КАНАЛ ПО АВТОМАТИЗАЦИИ ТЕСТИРОВАНИЯ

Что такое фикстуры в Playwright?

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

Пояснение

Рассмотрим пример с фикстурой page. Вот код, демонстрирующий принцип ее работы:

import { test, expect } from '@playwright/test'; 

test('basic test', async ({ page }) => { 
  await page.goto('https://playwright.dev/'); 
  await expect(page).toHaveTitle(/Playwright/); 
});

В приведенном выше коде:

• объект page — это фикстура, предоставляемая Playwright;
• она создается автоматически для вашего теста и представляет собой страницу браузера (например, вкладку в Chrome или Firefox), которую вы можете использовать для взаимодействия с веб-сайтом;
• { page }: Playwright передает эту фикстуру в фигурных скобках {}. Это все равно, что сказать: «Эй, дай мне страницу браузера для работы!»;
• не нужно вручную открывать браузер или создавать новую вкладку — Playwright делает это автоматически с помощью фикстуры page.
  

Читайте также: Большой учебник по Playwright

Простой пример

Представьте, что вы тестируете простой веб-сайт, например, страницу логина. Вот как фикстуры page могут помочь:

import { test, expect } from '@playwright/test';
test('login page test', async ({ page }) => {
  
  await page.goto('https://example.com/login'); 
  await expect(page).toHaveURL(/login/); 
});

• Без фикстур: придется вручную писать код для запуска браузера, открытия новой вкладки и т.д.
• С фикстурами: Playwright как бы говорит: «Не волнуйтесь, я уже подготовил страницу!»
  

Зачем нужны фикстуры?

• Экономия времени: не нужно самостоятельно настраивать браузер или создавать страницу.
• Стабильность: каждый тест получает для работы новую страницу.
• Автоматическая очистка: Playwright автоматически закрывает браузер после завершения теста — вам не нужно это делать.
  

Другие фикстуры в Playwright

Помимо page, в Playwright есть и другие фикстуры, например:

• browser — предоставляет полноценный браузер;
• context — создает независимую сессию браузера с отдельными cookie и настройками;
• request — используется для отправки HTTP-запросов и тестирования API;
• browserName — сообщает, какой браузер используется при запуске теста.
  

Фикстура browser

Фикстура browser дает полный доступ ко всему экземпляру браузера (например, Chrome, Firefox). Эта фикстура полезна, если нужно управлять браузером напрямую или создавать несколько вкладок.

import { test, expect } from '@playwright/test';

test('check browser type', async ({ browser }) => {  
  // Open a new page manually using the browser fixture
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await expect(page).toHaveTitle(/Example/);
});

Когда использовать: если нужно напрямую управлять браузером или открыть несколько страниц в рамках одного теста.

Фикстура context

Фикстура context создает отдельную сессию браузера — с собственными cookie, localStorage и всеми настройками. Это полезно для тестирования логина или изолированных пользовательских сессий.

import { test, expect } from '@playwright/test';

test('check cookies in context', async ({ context }) => {
  // "context" fixture gives you a fresh browser session
  const page = await context.newPage();
  await page.goto('https://example.com');
  
  // Add a cookie to the context
  await context.addCookies([{ name: 'myCookie', value: 'hello', domain: '.example.com', path: '/' }]);
  console.log('Cookies:', await context.cookies()); // Prints the cookies
});

Когда использовать: для работы с cookie, local storage или тестирования нескольких независимых сессий.

Фикстура request

Фикстура request позволяет напрямую отправлять HTTP-запросы (такие как GET или POST), что очень удобно, если нужно протестировать API параллельно с веб-тестами.

import { test, expect } from '@playwright/test';

test('test an API', async ({ request }) => {
  // "request" fixture lets you send HTTP requests
  const response = await request.get('https://api.example.com/data');
  
  // Check if the API returns a successful status
  expect(response.ok()).toBe(true);
  
  // Check the response body
  const data = await response.json();
  console.log('API Response:', data);
});

Когда использовать: для тестирования бэкэнд-API или эмуляции ответов без необходимости запускать браузер.

Фикстура browserName

Фикстура browserName сообщает, в каком браузере выполняется тест (например, «chromium», «firefox» или «webkit»). Это удобно для написания тестов, специфичных для конкретного браузера.

import { test, expect } from '@playwright/test';

test('check browser name', async ({ browserName }) => {
  // "browserName" fixture tells you the browser being used
  console.log('Running in:', browserName);
  
  if (browserName === 'chromium') {
    console.log('This is Chrome or Edge!');
  } else if (browserName === 'firefox') {
    console.log('This is Firefox!');
  }
});

Лучшие практики использования фикстур в Playwright

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

Используйте встроенные фикстуры вместо ручной настройки

Встроенные фикстуры Playwright (такие как page, context, browser) оптимизированы и самостоятельно выполняют настройку и очистку. Избегайте ручного создания ресурсов, если в этом нет крайней необходимости.

// Bad: Manually launching a browser
import { chromium } from '@playwright/test';
test('manual setup', async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await browser.close();
});

// Good: Use the built-in fixtures
import { test, expect } from '@playwright/test';
test('using fixture', async ({ page }) => {
  await page.goto('https://example.com');
});

Зачем? Фикстура page автоматически управляет запуском и завершением работы браузера, избавляя вас от лишнего кода и обеспечивая единообразие в тестах.

Используйте фикстуры только при необходимости

Не добавляйте в сигнатуру теста фикстуры, которые вы не используете. Это делает код чище и ускоряет выполнение тестов.

// Bad: Including unused fixtures
test('simple test', async ({ page, browser, context, request }) => {
  await page.goto('https://example.com'); // Only "page" is used
});

// Good: Only include what you need
test('simple test', async ({ page }) => {
  await page.goto('https://example.com');
});

Зачем? Неиспользуемые фикстуры по-прежнему инициализируются, что может немного замедлить тесты и засорить код.

Используйте context для изоляции

Фикстура context создает новый контекст браузера (например, с отдельными cookie и локальным хранилищем). Это удобно, когда нужно протестировать независимые сессии — например, вход разных пользователей.

test('test two users', async ({ context }) => {
  const page1 = await context.newPage();
  await page1.goto('https://example.com/login');
  await page1.fill('#user', 'user1');

  // New context for a second user
  const newContext = await context.browser().newContext();
  const page2 = await newContext.newPage();
  await page2.goto('https://example.com/login');
  await page2.fill('#user', 'user2');
});

Зачем? context гарантирует, что каждая сессия изолирована и не мешает другим (например, общие файлы cookie).

Создавайте собственные фикстуры для многократного использования

Если в тестах часто повторяется одна и та же логика (например, вход в систему), создайте настраиваемую фикстуру, чтобы соблюдался принцип DRY (Don’t Repeat Yourself).

// Define a custom fixture
const { test: base } = require('@playwright/test');
const test = base.extend({
  loggedInPage: async ({ page }, use) => {
    await page.goto('https://example.com/login');
    await page.fill('#username', 'testuser');
    await page.fill('#password', 'password123');
    await page.click('button[type="submit"]');
    await use(page); // Pass the logged-in page to the test
  },
});

// Use the custom fixture
test('use logged-in page', async ({ loggedInPage }) => {
  await loggedInPage.goto('https://example.com/dashboard');
  await expect(loggedInPage).toHaveURL(/dashboard/);
});

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

Заключение

Фикстуры в Playwright — это удобные объекты, которые упрощают тестирование. Это все равно что взять уже открытую тетрадь, чтобы записать свои тесты, вместо того чтобы начать с пустого листа. Вам остается лишь писать — все остальное Playwright сделает сам.

Перевод статьи «Fixtures (Built-in Fixtures) in Playwright with basic example».