メインコンテンツへスキップ

ライブラリ

はじめに​

Playwright Libraryは、ブラウザの起動と操作のための統一されたAPIを提供し、Playwright Testはこれに加え、完全に管理されたエンドツーエンドのテストランナーとエクスペリエンスを提供します。

ほとんどの場合、エンドツーエンドテストには@playwright/test (Playwright Test) を使用することをお勧めします。playwright (Playwright Library) を直接使用する必要はありません。Playwright Testを始めるには、はじめにガイドを参照してください。

ライブラリ使用時の違い​

ライブラリの例​

以下は、Playwright Libraryを直接使用してChromiumを起動し、ページに移動してそのタイトルを確認する例です

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

(async () => {
  // Setup
  const browser = await chromium.launch();
  const context = await browser.newContext(devices['iPhone 11']);
  const page = await context.newPage();

  // The actual interesting bit
  await context.route('**.jpg', route => route.abort());
  await page.goto('https://example.com/');

  assert(await page.title() === 'Example Domain'); // 👎 not a Web First assertion

  // Teardown
  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とinitの違いに注意
ブラウザのインストール@playwright/browser-chromium、@playwright/browser-firefox、または@playwright/browser-webkitをインストールしますnpx 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が、他の組み込みフィクスチャとともに、各テストにそのまま提供されます。明示的な作成は不要です。テストの引数で参照された場合、テストランナーがそれらをテストのために作成します。(つまり、遅延初期化)
アサーション組み込みのWebファーストアサーションなしWebファーストアサーション、例:条件が満たされるまで自動で待機し、リトライします。
タイムアウトほとんどの操作で30秒がデフォルトです。ほとんどの操作はタイムアウトしませんが、各テストには失敗させるためのタイムアウトがあります（デフォルトで30秒）。
クリーンアップ明示的に行う必要があること
  1. browserContext.close()でコンテキストを閉じる
  2. browser.close()でブラウザを閉じる
組み込みフィクスチャを明示的に閉じる必要はありません。テストランナーが処理します。
実行ライブラリを使用する場合、コードはNodeスクリプトとして実行され、場合によってはまずコンパイルが必要です。テストランナーを使用する場合、npx playwright testコマンドを使用します。設定と合わせて、テストランナーはコンパイル、実行するものの選択、実行方法を処理します。

上記に加えて、Playwright Testはフル機能のテストランナーとして、以下を含みます

使用方法​

npmまたはYarnを使用して、Node.jsプロジェクトにPlaywrightライブラリをインストールします。システム要件を参照してください。

npm i -D playwright

ブラウザもインストールする必要があります。手動で行うか、自動的にインストールしてくれるパッケージを追加することも可能です。

# Download the Chromium, Firefox and WebKit browser
npx playwright install chromium firefox webkit

# Alternatively, add packages that will download a browser upon npm install
npm i -D @playwright/browser-chromium @playwright/browser-firefox @playwright/browser-webkit

その他のオプションについては、ブラウザの管理を参照してください。

インストール後、Node.jsスクリプトでPlaywrightをインポートし、3つのブラウザ（chromium、firefox、webkit）のいずれかを起動できます。

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

(async () => {
  const browser = await chromium.launch();
  // Create pages, interact with UI elements, assert values
  await browser.close();
})();

PlaywrightのAPIは非同期であり、Promiseオブジェクトを返します。コード例では、可読性を高めるためにasync/awaitパターンを使用しています。コードは、自身を呼び出す無名の非同期アロー関数でラップされています。

(async () => { // Start of async arrow function
  // Function code
  // ...
})(); // End of the function and () to invoke itself

最初のスクリプト​

最初のスクリプトでは、https://playwright.dokyumento.jp/に移動し、WebKitでスクリーンショットを撮ります。

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

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

デフォルトでは、Playwrightはブラウザをヘッドレスモードで実行します。ブラウザのUIを表示するには、ブラウザ起動時にheadless: falseフラグを渡します。また、slowMoを使用して実行速度を落とすこともできます。詳細はデバッグツールセクションを参照してください。

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

スクリプトの記録​

コマンドラインツールは、ユーザーインタラクションを記録し、JavaScriptコードを生成するために使用できます。

npx playwright codegen wikipedia.org

ブラウザのダウンロード​

Playwrightブラウザをダウンロードするには、以下を実行します

# Explicitly download browsers
npx playwright install

または、パッケージインストール時に、対応するブラウザを自動的にダウンロードするために、@playwright/browser-chromium、@playwright/browser-firefox、および@playwright/browser-webkitパッケージを追加できます。

# Use a helper package that downloads a browser on npm install
npm install @playwright/browser-chromium

ファイアウォールまたはプロキシ経由でのダウンロード

プロキシ経由でダウンロードするには、HTTPS_PROXY環境変数を渡します。

# Manual
HTTPS_PROXY=https://192.0.2.1 npx playwright install

# Through @playwright/browser-chromium, @playwright/browser-firefox
# and @playwright/browser-webkit helper packages
HTTPS_PROXY=https://192.0.2.1 npm install

成果物リポジトリからのダウンロード

デフォルトでは、PlaywrightはMicrosoftのCDNからブラウザをダウンロードします。代わりに、内部の成果物リポジトリからダウンロードするには、PLAYWRIGHT_DOWNLOAD_HOST環境変数を渡します。

# Manual
PLAYWRIGHT_DOWNLOAD_HOST=192.0.2.1 npx playwright install

# Through @playwright/browser-chromium, @playwright/browser-firefox
# and @playwright/browser-webkit helper packages
PLAYWRIGHT_DOWNLOAD_HOST=192.0.2.1 npm install

ブラウザのダウンロードをスキップ

ブラウザのバイナリが個別に管理されているため、ブラウザのダウンロードを完全に避けたい場合があります。これは、パッケージをインストールする前にPLAYWRIGHT_SKIP_BROWSER_DOWNLOAD変数を設定することで可能です。

# When using @playwright/browser-chromium, @playwright/browser-firefox
# and @playwright/browser-webkit helper packages
PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 npm install

TypeScriptのサポート​

PlaywrightにはTypeScriptの組み込みサポートが含まれています。型定義は自動的にインポートされます。IDEエクスペリエンスを向上させるために、型チェックを使用することをお勧めします。

JavaScriptの場合​

VS CodeまたはWebStormで型チェックを行うには、JavaScriptファイルの先頭に以下を追加します。

// @ts-check
// ...

または、JSDocを使用して変数に型を設定することもできます。

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

TypeScriptの場合​

TypeScriptのサポートはすぐに利用できます。型は明示的にインポートすることも可能です。

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