Puppeteer からの移行

移行の原則

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

• ほとんどの Puppeteer API はそのまま使用できます
• ElementHandle の使用は推奨されません。Locator オブジェクトとweb-firstアサーションを使用してください。
• Playwright はクロスブラウザ対応です
• 明示的な待機は必要ないでしょう

チートシート

Puppeteer	Playwrightライブラリ
await puppeteer.launch()	await playwright.chromium.launch()
puppeteer.launch({product: 'firefox'})	await playwright.firefox.launch()
WebKit は Puppeteer でサポートされていません	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-firstアサーションを使用してください。

ロケーターは、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 のコードスニペットのインラインコメントを参照)

1. 各 Playwright ライブラリファイルには、chromium の明示的なインポートがあります。他のブラウザ webkit や firefox も使用できます。
2. ブラウザの状態分離には、ブラウザコンテキストを検討してください。
3. setViewport は setViewportSize になります。
4. 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'
    );
  });
});

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

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

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

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

Playwright Test のスーパーパワー

Playwright Test に移行すると、多くの機能が手に入ります！

• 完全なゼロ構成 TypeScript サポート
• すべてのウェブエンジン (Chrome、Firefox、Safari) で、すべての一般的なオペレーティングシステム (Windows、macOS、Ubuntu) でテストを実行
• 複数のオリジン、(i)フレーム、タブとコンテキストを完全にサポート
• 複数のブラウザで並列に、隔離された環境でテストを実行します
• 組み込みのテストアーティファクト収集

Playwright Test にバンドルされているこれらすべての ✨素晴らしいツール✨ も手に入ります。

• Playwright インスペクター
• Playwright Test のコード生成
• 事後デバッグのためのPlaywright Tracing

さらに読む

Playwright Test ランナーについて詳しく学ぶ

• はじめに
• フィクスチャ
• ロケーター
• アサーション
• 自動待機