Puppeteer からの移行

移行の原則

このガイドでは、Puppeteer から Playwright ライブラリと Playwright Test への移行について説明します。APIは類似していますが、Playwright はウェブテストとクロスブラウザ自動化のためのより多くの可能性を提供します。

ほとんどのPuppeteer APIはそのまま使用できます
ElementHandle の使用は推奨されません。代わりに Locator オブジェクトと Webファーストのアサーションを使用してください。
Playwright はクロスブラウザ対応です
明示的な待機は必要ないかもしれません

チートシート

Puppeteer	Playwright ライブラリ
`await puppeteer.launch()`	`await playwright.chromium.launch()`
`puppeteer.launch({product: 'firefox'})`	`await playwright.firefox.launch()`
Puppeteer は WebKit をサポートしていません	`await 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(...)`	アサーションは、テキスト、属性、クラスなどの検証によく使用できます。
`await page.$(...)`	非推奨です。代わりにロケーターを使用してください。
`await page.$x(xpath_selector)`	非推奨です。代わりにロケーターを使用してください。
チェックボックスまたはラジオ入力に特化したメソッドはありません	`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 オブジェクトと Webファーストのアサーションを使用してください。

ロケーターは 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.dokyumento.jp/', {
    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.dokyumento.jp/', {
    waitUntil: 'networkidle', // 4
  });
  await page.screenshot({ path: 'example.png' });
  await browser.close();
})();

移行のハイライト (Playwrightコードスニペットのインラインコメントを参照)

各 Playwright ライブラリファイルには chromium が明示的にインポートされています。他のブラウザ webkit または firefox も使用できます。
ブラウザの状態分離には、ブラウザコンテキストを検討してください。
setViewport は setViewportSize になります
networkidle2 は networkidle になります。自動待機のおかげで、ほとんどの場合これは役に立たないことに注意してください。

テストの例

Jest と Puppeteer

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.dokyumento.jp/');
    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.dokyumento.jp/');
    const titleLocator = page.locator('.hero__title'); // 4
    await expect(titleLocator).toContainText( // 5
        'Playwright enables reliable end-to-end testing'
    );
  });
});

各 Playwright Test ファイルには test 関数と expect 関数が明示的にインポートされています
テスト関数は async でマークされています
Playwright Test は、そのパラメーターの1つとして page を受け取ります。これは Playwright Test の多くの便利なフィクスチャの1つです。Playwright Test は、各テストのために独立した Page オブジェクトを作成します。ただし、複数のテスト間で単一の Page オブジェクトを再利用したい場合は、test.beforeAll() で独自の Page オブジェクトを作成し、test.afterAll() で閉じることができます。
page.locator() を使用したロケーターの作成は、同期メソッドの数少ない1つです。
page.$eval() の代わりにアサーションを使用して状態を検証します。

テスト

テストを改善するには、ロケーターと Webファーストのアサーションを使用することをお勧めします。テストの記述を参照してください。

Puppeteer では、page.evaluate() または page.$eval() を使用して ElementHandle を検査し、テキストコンテンツ、属性、クラスなどの値を抽出するのが一般的です。Webファーストのアサーションはこの目的のためにいくつかのマッチャーを提供しており、より信頼性が高く読みやすいです。

Playwright Test は、Playwright とともに使用することを推奨するファーストパーティのテストランナーです。ページオブジェクトモデル、並列処理、フィクスチャ、レポーターなどのいくつかの機能を提供します。

Playwright Test の強力な機能

Playwright Test を使用すると、多くのメリットが得られます！

完全なゼロコンフィグレーション TypeScript サポート
すべてのウェブエンジン (Chrome、Firefox、Safari) で、あらゆる主要なオペレーティングシステム (Windows、macOS、Ubuntu) 上でテストを実行できます。
複数のオリジン、(i)フレーム、タブ、コンテキストを完全にサポート
複数のブラウザでテストを並列に分離して実行
組み込みのテスト成果物収集

さらに、Playwright Test にバンドルされているこれらすべての ✨素晴らしいツール✨も利用できます

さらに読む

Playwright Test ランナーについてさらに学ぶ

移行の原則​

チートシート​

例​

自動化の例​

テストの例​

テスト​

Playwright Test の強力な機能​

さらに読む​