QA-SDET

Playwright — это современный инструмент для автоматизации тестирования веб-приложений, который поддерживает работу с несколькими браузерами, такими как Chromium, Firefox и WebKit. Он предоставляет мощный API для управления браузерами, страницами, элементами и сетевыми запросами. В этой статье мы подробно рассмотрим, как работать с браузерами в Playwright, настройку окружения, запуск тестов в разных браузерах и примеры использования.

---

1. Что такое Playwright?

Playwright — это библиотека для автоматизации веб-браузеров, разработанная Microsoft. Она поддерживает:

• Мультибраузерность: Chromium, Firefox, WebKit.
• Мультиплатформенность: Windows, macOS, Linux.
• Мультиязычность: JavaScript/TypeScript, Python, Java, .NET.

Playwright позволяет автоматизировать сценарии тестирования, такие как навигация по страницам, заполнение форм, клики, скриншоты, эмуляция устройств и многое другое.

---

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

Для начала работы с Playwright необходимо установить его в вашем проекте. Рассмотрим установку для Node.js (JavaScript/TypeScript).

Установка через npm:

npm init playwright@latest

Эта команда создаст новый проект Playwright, установит все необходимые зависимости и загрузит браузеры (Chromium, Firefox, WebKit).

---

3. Поддержка браузеров в Playwright

Playwright поддерживает три основных браузера:

1. Chromium: Основа для Google Chrome и Microsoft Edge.
2. Firefox: Открытый браузер от Mozilla.
3. WebKit: Движок, используемый в Safari.

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

---

4. Запуск тестов в разных браузерах

Playwright позволяет легко запускать тесты в разных браузерах. Рассмотрим пример на TypeScript.

Пример 1: Запуск теста в Chromium

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

test('Open Google in Chromium', async ({ browser }) => {
  const context = await browser.newContext();
  const page = await context.newPage();
  await page.goto('https://www.google.com');
  await expect(page).toHaveTitle('Google');
});

Пример 2: Запуск теста в Firefox

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

test('Open Google in Firefox', async ({ browserName }) => {
  test.skip(browserName !== 'firefox', 'This test is only for Firefox');
  const context = await browser.newContext();
  const page = await context.newPage();
  await page.goto('https://www.google.com');
  await expect(page).toHaveTitle('Google');
});

Пример 3: Запуск теста в WebKit

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

test('Open Google in WebKit', async ({ browserName }) => {
  test.skip(browserName !== 'webkit', 'This test is only for WebKit');
  const context = await browser.newContext();
  const page = await context.newPage();
  await page.goto('https://www.google.com');
  await expect(page).toHaveTitle('Google');
});

---

5. Настройка браузеров

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

5.1. Запуск в headless-режиме

По умолчанию Playwright запускает браузеры в headless-режиме (без графического интерфейса). Чтобы запустить браузер с графическим интерфейсом, используйте опцию headless: false.

const browser = await chromium.launch({ headless: false });

5.2. Эмуляция устройств

Playwright позволяет эмулировать мобильные устройства, такие как iPhone или Android.

const iPhone = playwright.devices['iPhone 12'];
const context = await browser.newContext({ ...iPhone });
const page = await context.newPage();
await page.goto('https://www.google.com');

5.3. Прокси и сетевые настройки

Вы можете настроить прокси для браузера.

const browser = await chromium.launch({
  proxy: { server: 'http://myproxy.com:3128' }
});

5.4. Язык и региональные настройки

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

const context = await browser.newContext({ locale: 'fr-FR' });
const page = await context.newPage();
await page.goto('https://www.google.com');

---

6. Примеры использования браузеров

Пример 4: Автоматизация формы входа

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

test('Login form test', async ({ page }) => {
  await page.goto('https://example.com/login');
  await page.fill('#username', 'testuser');
  await page.fill('#password', 'password123');
  await page.click('#login-button');
  await expect(page).toHaveURL('https://example.com/dashboard');
});

Пример 5: Скриншот страницы

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

test('Take a screenshot', async ({ page }) => {
  await page.goto('https://www.google.com');
  await page.screenshot({ path: 'google.png' });
});

Пример 6: Эмуляция сети

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

test('Network emulation', async ({ page }) => {
  await page.goto('https://www.google.com');
  await page.route('**/*', route => route.fulfill({ status: 404 }));
  await page.reload();
  await expect(page.locator('body')).toContainText('404');
});

---

7. Параллельный запуск тестов в нескольких браузерах

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

Пример конфигурации:

import { PlaywrightTestConfig } from '@playwright/test';

const config: PlaywrightTestConfig = {
  projects: [
    { name: 'Chromium', use: { browserName: 'chromium' } },
    { name: 'Firefox', use: { browserName: 'firefox' } },
    { name: 'WebKit', use: { browserName: 'webkit' } },
  ],
};

export default config;

Теперь тесты будут автоматически запускаться во всех указанных браузерах.

---

8. Отладка тестов

Playwright предоставляет удобные инструменты для отладки:

• Запуск с графическим интерфейсом: Используйте headless: false.
• Инспектор Playwright: Запустите тест с флагом --debug.
• Скриншоты и видео: Автоматически записываются при ошибках.

---

9. Заключение

Playwright — это мощный инструмент для автоматизации тестирования веб-приложений, который поддерживает работу с несколькими браузерами. В этой статье мы рассмотрели, как настроить и использовать Playwright для работы с Chromium, Firefox и WebKit, а также привели примеры тестов. Используя Playwright, вы можете создавать надежные и эффективные тесты для ваших веб-приложений.