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

ライブラリ

はじめに​

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

ほとんどの場合、エンドツーエンドのテストには、playwright (Playwrightライブラリ) を直接使用するのではなく、@playwright/test (Playwright Test) を使用することをお勧めします。Playwright Testを開始するには、「はじめにガイド」に従ってください。

ライブラリを使用する場合の相違点​

ライブラリの例​

以下は、Playwrightライブラリを直接使用して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 をインストールします。1つだけの場合は 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は、フル機能のテストランナーとして、以下を含みます。

使用法​

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

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アロー関数でラップされています。

(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;