Skip to main content

Библиотека

Введение​

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

В большинстве случаев для сквозного тестирования вам следует использовать @playwright/test (Playwright Test), а не playwright (Playwright Library) напрямую. Чтобы начать работу с Playwright Test, следуйте руководству по началу работы.

Различия при использовании библиотеки​

Пример использования библиотеки​

Ниже приведен пример использования библиотеки Playwright напрямую для запуска Chromium, перехода на страницу и проверки ее заголовка:

import { chromium, devices } from 'playwright';
import assert from 'node:assert';

(async () => {
  // Настройка
  const browser = await chromium.launch();
  const context = await browser.newContext(devices['iPhone 11']);
  const page = await context.newPage();

  // Основная часть
  await context.route('**.jpg', route => route.abort());
  await page.goto('https://example.com/');

  assert(await page.title() === 'Example Domain'); // 👎 не Web First утверждение

  // Завершение
  await context.close();
  await browser.close();
})();

Запустите его с помощью node my-script.js.

Пример теста​

Тест для достижения аналогичного поведения будет выглядеть следующим образом:

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

test.use(devices['iPhone 11']);

test('should be titled', async ({ page, context }) => {
  await context.route('**.jpg', route => route.abort());
  await page.goto('https://example.com/');

  await expect(page).toHaveTitle('Example');
});

Запустите его с помощью npx playwright test.

Основные различия​

Основные различия, которые следует отметить, следующие:

БиблиотекаТест
Установкаnpm install playwrightnpm init playwright@latest - обратите внимание на install vs. init
Установка браузеровУстановите @playwright/browser-chromium, @playwright/browser-firefox и/или @playwright/browser-webkitnpx playwright install или npx playwright install chromium для одного из них
import изplaywright@playwright/test
ИнициализацияНеобходимо явно:
  1. Выбрать браузер для использования, например, chromium
  2. Запустить браузер с помощью browserType.launch()
  3. Создать контекст с помощью browser.newContext(), и передать любые параметры контекста явно, например, devices['iPhone 11']
  4. Создать страницу с помощью browserContext.newPage()
Изолированные page и context предоставляются каждому тесту из коробки, вместе с другими встроенными фикстурами. Нет явного создания. Если они упоминаются в аргументах теста, Test Runner создаст их для теста. (т.е. ленивое создание)
УтвержденияНет встроенных Web-First утвержденийWeb-First утверждения такие как: которые автоматически ждут и повторяют попытки, чтобы условие было выполнено.
Тайм-аутыПо умолчанию 30 секунд для большинства операций.Большинство операций не имеют тайм-аута, но каждый тест имеет тайм-аут, который заставляет его завершиться с ошибкой (по умолчанию 30 секунд).
ОчисткаНеобходимо явно:
  1. Закрыть контекст с помощью browserContext.close()
  2. Закрыть браузер с помощью browser.close()
Нет явного закрытия встроенных фикстур; Test Runner позаботится об этом.
ЗапускПри использовании библиотеки вы запускаете код как скрипт node, возможно, с предварительной компиляцией.При использовании Test Runner вы используете команду npx playwright test. Вместе с вашим конфигом, Test Runner обрабатывает любую компиляцию и выбирает, что и как запускать.

В дополнение к вышеуказанному, Playwright Test, как полнофункциональный тестовый раннер, включает:

Использование​

Используйте npm или Yarn для установки библиотеки Playwright в ваш проект Node.js. См. системные требования.

npm i -D playwright

Вам также потребуется установить браузеры - либо вручную, либо добавив пакет, который сделает это за вас автоматически.

# Загрузите браузеры Chromium, Firefox и WebKit
npx playwright install chromium firefox webkit

# Или добавьте пакеты, которые загрузят браузер при установке npm
npm i -D @playwright/browser-chromium @playwright/browser-firefox @playwright/browser-webkit

См. управление браузерами для получения дополнительных опций.

После установки вы можете импортировать Playwright в скрипт Node.js и запустить любой из 3 браузеров (chromium, firefox и webkit).

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  // Создавайте страницы, взаимодействуйте с элементами интерфейса, проверяйте значения
  await browser.close();
})();

API Playwright являются асинхронными и возвращают объекты Promise. Наши примеры кода используют паттерн async/await для упрощения чтения. Код обернут в неназванную асинхронную стрелочную функцию, которая вызывает саму себя.

(async () => { // Начало асинхронной стрелочной функции
  // Код функции
  // ...
})(); // Конец функции и () для вызова самой себя

Первый скрипт​

В нашем первом скрипте мы перейдем на https://playwright.dev/ и сделаем скриншот в WebKit.

const { webkit } = require('playwright');

(async () => {
  const browser = await webkit.launch();
  const page = await browser.newPage();
  await page.goto('https://playwright.dev/');
  await page.screenshot({ path: `example.png` });
  await browser.close();
})();

По умолчанию Playwright запускает браузеры в безголовом режиме. Чтобы увидеть интерфейс браузера, передайте флаг headless: false при запуске браузера. Вы также можете использовать slowMo, чтобы замедлить выполнение. Узнайте больше в разделе инструменты отладки.

firefox.launch({ headless: false, slowMo: 50 });

Запись скриптов​

Инструменты командной строки могут использоваться для записи взаимодействий пользователя и генерации JavaScript-кода.

npx playwright codegen wikipedia.org

Загрузка браузеров​

Чтобы загрузить браузеры Playwright, выполните:

# Явная загрузка браузеров
npx playwright install

В качестве альтернативы, вы можете добавить пакеты @playwright/browser-chromium, @playwright/browser-firefox и @playwright/browser-webkit, чтобы автоматически загружать соответствующий браузер во время установки пакета.

# Используйте вспомогательный пакет, который загружает браузер при установке npm
npm install @playwright/browser-chromium

Загрузка за файрволом или через прокси

Передайте переменную окружения HTTPS_PROXY, чтобы загрузить через прокси.

# Вручную
HTTPS_PROXY=https://192.0.2.1 npx playwright install

# Через вспомогательные пакеты @playwright/browser-chromium, @playwright/browser-firefox
# и @playwright/browser-webkit
HTTPS_PROXY=https://192.0.2.1 npm install

Загрузка из репозитория артефактов

По умолчанию Playwright загружает браузеры с CDN Microsoft. Передайте переменную окружения PLAYWRIGHT_DOWNLOAD_HOST, чтобы загрузить из внутреннего репозитория артефактов.

# Вручную
PLAYWRIGHT_DOWNLOAD_HOST=192.0.2.1 npx playwright install

# Через вспомогательные пакеты @playwright/browser-chromium, @playwright/browser-firefox
# и @playwright/browser-webkit
PLAYWRIGHT_DOWNLOAD_HOST=192.0.2.1 npm install

Пропуск загрузки браузера

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

# При использовании вспомогательных пакетов @playwright/browser-chromium, @playwright/browser-firefox
# и @playwright/browser-webkit
PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 npm install

Поддержка TypeScript​

Playwright включает встроенную поддержку TypeScript. Определения типов будут импортированы автоматически. Рекомендуется использовать проверку типов для улучшения работы в IDE.

В JavaScript​

Добавьте следующее в начало вашего JavaScript-файла, чтобы получить проверку типов в VS Code или WebStorm.

// @ts-check
// ...

В качестве альтернативы, вы можете использовать JSDoc для установки типов для переменных.

/** @type {import('playwright').Page} */
let page;

В TypeScript​

Поддержка TypeScript будет работать из коробки. Типы также могут быть импортированы явно.

let page: import('playwright').Page;