Skip to main content

Миграция с Puppeteer

Принципы миграции​

Это руководство описывает миграцию на Playwright Library и Playwright Test с Puppeteer. API имеют сходства, но Playwright предлагает гораздо больше возможностей для тестирования веб-приложений и кросс-браузерной автоматизации.

  • Большинство API Puppeteer можно использовать как есть
  • Использование [ElementHandle] не рекомендуется, вместо этого используйте объекты [Locator] и утверждения, ориентированные на веб.
  • Playwright поддерживает кросс-браузерность
  • Вероятно, вам не нужны явные ожидания

Шпаргалка​

PuppeteerPlaywright Library
await puppeteer.launch()await playwright.chromium.launch()
puppeteer.launch({product: 'firefox'})await playwright.firefox.launch()
WebKit не поддерживается Puppeteerawait playwright.webkit.launch()
await browser.createIncognitoBrowserContext(...)await browser.newContext(...)
await page.setViewport(...)await page.setViewportSize(...)
await page.waitForXPath(XPathSelector)await page.waitForSelector(XPathSelector)
await page.waitForNetworkIdle(...)await page.waitForLoadState('networkidle')
await page.$eval(...)Assertions часто могут быть использованы вместо этого для проверки текста, атрибута, класса...
await page.$(...)Не рекомендуется, используйте Locators вместо этого
await page.$x(xpath_selector)Не рекомендуется, используйте Locators вместо этого
Нет методов, посвященных чекбоксам или радио-кнопкамawait page.locator(selector).check()
await page.locator(selector).uncheck()
await page.click(selector)await page.locator(selector).click()
await page.focus(selector)await page.locator(selector).focus()
await page.hover(selector)await page.locator(selector).hover()
await page.select(selector, values)await page.locator(selector).selectOption(values)
await page.tap(selector)await page.locator(selector).tap()
await page.type(selector, ...)await page.locator(selector).fill(...)
await page.waitForFileChooser(...)
await elementHandle.uploadFile(...)		await page.locator(selector).setInputFiles(...)
await page.cookies([...urls])await browserContext.cookies([urls])
await page.deleteCookie(...cookies)await browserContext.clearCookies()
await page.setCookie(...cookies)await browserContext.addCookies(cookies)
page.on(...)page.on(...)
Для перехвата и изменения запросов, см. page.route()

page.waitForNavigation и page.waitForSelector остаются, но во многих случаях не будут необходимы благодаря авто-ожиданию.

Использование [ElementHandle] не рекомендуется, вместо этого используйте объекты [Locator] и утверждения, ориентированные на веб.

Локаторы являются центральной частью авто-ожидания и возможности повторных попыток в Playwright. Локаторы строгие. Это означает, что все операции с локаторами, которые подразумевают некоторый целевой элемент DOM, вызовут исключение, если более одного элемента соответствует данному селектору.

Примеры​

Пример автоматизации​

Puppeteer:

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.setViewport({ width: 1280, height: 800 });
  await page.goto('https://playwright.dev/', {
    waitUntil: 'networkidle2',
  });
  await page.screenshot({ path: 'example.png' });
  await browser.close();
})();

Построчная миграция на Playwright:

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

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage(); // 2
  await page.setViewportSize({ width: 1280, height: 800 }); // 3
  await page.goto('https://playwright.dev/', {
    waitUntil: 'networkidle', // 4
  });
  await page.screenshot({ path: 'example.png' });
  await browser.close();
})();

Основные моменты миграции (см. комментарии в коде Playwright):

  1. Каждый файл Playwright Library имеет явный импорт chromium. Можно использовать другие браузеры webkit или firefox.
  2. Для изоляции состояния браузера рассмотрите контексты браузера
  3. setViewport становится setViewportSize
  4. networkidle2 становится networkidle. Обратите внимание, что в большинстве случаев это не полезно благодаря авто-ожиданию.

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

Puppeteer с Jest:

import puppeteer from 'puppeteer';

describe('Playwright homepage', () => {
  let browser;
  let page;

  beforeAll(async () => {
    browser = await puppeteer.launch();
    page = await browser.newPage();
  });

  it('contains hero title', async () => {
    await page.goto('https://playwright.dev/');
    await page.waitForSelector('.hero__title');
    const text = await page.$eval('.hero__title', e => e.textContent);
    expect(text).toContain('Playwright enables reliable end-to-end testing'); // 5
  });

  afterAll(() => browser.close());
});

Построчная миграция на Playwright Test:

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

test.describe('Playwright homepage', () => {
  test('contains hero title', async ({ page }) => { // 2, 3
    await page.goto('https://playwright.dev/');
    const titleLocator = page.locator('.hero__title'); // 4
    await expect(titleLocator).toContainText( // 5
        'Playwright enables reliable end-to-end testing'
    );
  });
});
  1. Каждый файл Playwright Test имеет явный импорт функций test и expect
  2. Функция теста помечена как async
  3. Playwright Test получает page в качестве одного из своих параметров. Это один из многих полезных фикстур в Playwright Test. Playwright Test создает изолированный объект [Page] для каждого теста. Однако, если вы хотите использовать один объект [Page] между несколькими тестами, вы можете создать его в test.beforeAll() и закрыть в test.afterAll().
  4. Создание локатора с помощью page.locator() является одним из немногих методов, которые являются синхронными.
  5. Используйте утверждения для проверки состояния вместо page.$eval().

Тестирование​

Для улучшения тестирования рекомендуется использовать Локаторы и веб-ориентированные Утверждения. См. Написание тестов

В Puppeteer часто используется page.evaluate() или page.$eval() для инспекции [ElementHandle] и извлечения значения текстового содержимого, атрибута, класса... Веб-ориентированные Утверждения предлагают несколько матчеров для этой цели, они более надежны и читаемы.

Playwright Test является нашим рекомендованным тестовым раннером для использования с Playwright. Он предоставляет несколько функций, таких как модель объектов страницы, параллелизм, фикстуры или репортеры.

Суперспособности Playwright Test​

Как только вы начнете использовать Playwright Test, вы получите много преимуществ!

  • Полная поддержка TypeScript без конфигурации
  • Запуск тестов на всех веб-движках (Chrome, Firefox, Safari) на любой популярной операционной системе (Windows, macOS, Ubuntu)
  • Полная поддержка нескольких источников, (i)фреймов, вкладок и контекстов
  • Запуск тестов в изоляции параллельно в нескольких браузерах
  • Встроенный сбор артефактов тестирования

Вы также получите все эти ✨ потрясающие инструменты ✨, которые поставляются в комплекте с Playwright Test:

Дополнительное чтение​

Узнайте больше о тестовом раннере Playwright: