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

ブラウザ

はじめに​

Playwrightの各バージョンは、動作するために特定のバージョンのブラウザバイナリを必要とします。これらのブラウザをインストールするには、Playwright CLIを使用する必要があります。

リリースごとに、Playwrightはサポートするブラウザのバージョンを更新し、常に最新のPlaywrightが最新のブラウザをサポートするようにします。つまり、Playwrightを更新するたびに、install CLIコマンドを再実行する必要がある場合があります。

ブラウザをインストールする​

Playwrightはサポートされているブラウザをインストールできます。引数なしでコマンドを実行すると、デフォルトのブラウザがインストールされます。

npx playwright install

引数を指定することで、特定のブラウザをインストールすることもできます。

npx playwright install webkit

サポートされているすべてのブラウザを見る

npx playwright install --help

システム依存関係をインストールする​

システム依存関係は自動的にインストールできます。これはCI環境で役立ちます。

npx playwright install-deps

引数として渡すことで、単一のブラウザの依存関係をインストールすることもできます。

npx playwright install-deps chromium

install-depsとinstallを組み合わせて、ブラウザとOSの依存関係を単一のコマンドでインストールすることも可能です。

npx playwright install --with-deps chromium

公式にサポートされているオペレーティングシステムについては、システム要件を参照してください。

Playwrightを定期的に更新する​

Playwrightのバージョンを常に最新の状態に保つことで、新機能を使用したり、最新のブラウザバージョンでアプリをテストしたり、最新のブラウザバージョンが公開される前に不具合を発見したりすることができます。

# Update playwright
npm install -D @playwright/test@latest

# Install new browsers
npx playwright install

リリースノートで最新バージョンとリリースされた変更点を確認してください。

# See what version of Playwright you have by running the following command
npx playwright --version

ブラウザを構成する​

Playwrightは、Chromium、WebKit、Firefoxブラウザ、およびGoogle ChromeやMicrosoft Edgeなどのブランドブラウザでテストを実行できます。また、エミュレートされたタブレットおよびモバイルデバイスでも実行できます。選択されたデスクトップ、タブレット、モバイルデバイスの完全なリストについては、デバイスパラメータのレジストリを参照してください。

異なるブラウザでテストを実行する​

Playwrightは、設定ファイルでプロジェクトを設定することにより、複数のブラウザと構成でテストを実行できます。各プロジェクトに異なるオプションを追加することもできます。

import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  projects: [
    /* Test against desktop browsers */
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },
    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },
    /* Test against mobile viewports. */
    {
      name: 'Mobile Chrome',
      use: { ...devices['Pixel 5'] },
    },
    {
      name: 'Mobile Safari',
      use: { ...devices['iPhone 12'] },
    },
    /* Test against branded browsers. */
    {
      name: 'Google Chrome',
      use: { ...devices['Desktop Chrome'], channel: 'chrome' }, // or 'chrome-beta'
    },
    {
      name: 'Microsoft Edge',
      use: { ...devices['Desktop Edge'], channel: 'msedge' }, // or 'msedge-dev'
    },
  ],
});

Playwrightはデフォルトですべてのプロジェクトを実行します。

npx playwright test

Running 7 tests using 5 workers

  ✓ [chromium] › example.spec.ts:3:1 › basic test (2s)
  ✓ [firefox] › example.spec.ts:3:1 › basic test (2s)
  ✓ [webkit] › example.spec.ts:3:1 › basic test (2s)
  ✓ [Mobile Chrome] › example.spec.ts:3:1 › basic test (2s)
  ✓ [Mobile Safari] › example.spec.ts:3:1 › basic test (2s)
  ✓ [Google Chrome] › example.spec.ts:3:1 › basic test (2s)
  ✓ [Microsoft Edge] › example.spec.ts:3:1 › basic test (2s)

単一のプロジェクトを実行するには、--projectコマンドラインオプションを使用します。

npx playwright test --project=firefox

Running 1 test using 1 worker

  ✓ [firefox] › example.spec.ts:3:1 › basic test (2s)

VS Code拡張機能を使用すると、Playwrightサイドバーでブラウザ名の横のチェックボックスをオンにすることで、さまざまなブラウザでテストを実行できます。これらの名前は、Playwright設定ファイルのプロジェクトセクションで定義されています。Playwrightをインストールしたときのデフォルトの設定では、Chromium、Firefox、WebKitの3つのプロジェクトが提供されます。最初のプロジェクトはデフォルトで選択されています。

複数のプロジェクト（ブラウザ）でテストを実行するには、プロジェクト名の横にあるチェックボックスをオンにして、各プロジェクトを選択します。

Selecting projects to run tests on

Chromium​

Google Chrome、Microsoft Edge、その他のChromiumベースのブラウザの場合、PlaywrightはデフォルトでオープンソースのChromiumビルドを使用します。Chromiumプロジェクトはブランドブラウザよりも先行しているため、世界がGoogle Chrome Nを使用しているときでも、Playwrightは数週間後にGoogle ChromeとMicrosoft EdgeでリリースされるChromium N+1を既にサポートしています。

Chromium: ヘッドレスシェル​

Playwrightは、ヘッダー付き操作用の通常のChromiumビルドと、ヘッドレスモード用の個別のChromiumヘッドレスシェルを提供します。

ヘッドレスシェルのみでテストを実行している場合（つまり、channelオプションが指定されていない場合）、例えばCI上で、インストール時に--only-shellを渡すことで、完全なChromiumブラウザのダウンロードを回避できます。

# only running tests headlessly
npx playwright install --with-deps --only-shell

Chromium: 新しいヘッドレスモード​

'chromium' チャネルを使用することで、新しいヘッドレスモードをオプトインできます。公式の Chrome ドキュメント にあるように、

一方、新しいヘッドレスは実際の Chrome ブラウザであり、より本格的で信頼性が高く、より多くの機能を提供します。これにより、高精度のエンドツーエンド Web アプリテストやブラウザ拡張機能テストに適しています。

詳細はissue #33566を参照してください。

import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'], channel: 'chromium' },
    },
  ],
});

新しいヘッドレスモードでは、--no-shellオプションを使用することで、ブラウザのインストール中にヘッドレスシェルをダウンロードするのをスキップできます。

# only running tests headlessly
npx playwright install --with-deps --no-shell

Google Chrome & Microsoft Edge​

Playwrightは最新のChromiumビルドをダウンロードして使用できますが、マシンで利用可能なブランドのGoogle ChromeおよびMicrosoft Edgeブラウザに対して動作させることもできます（Playwrightはデフォルトではインストールしないことに注意してください）。特に、現在のPlaywrightバージョンは、これらのブラウザのStableおよびBetaチャネルをサポートします。

利用可能なチャンネルはchrome、msedge、chrome-beta、msedge-beta、chrome-dev、msedge-dev、chrome-canary、msedge-canaryです。

警告

特定のEnterprise Browser Policiesが、PlaywrightがGoogle ChromeとMicrosoft Edgeを起動および制御する能力に影響を与える可能性があります。ブラウザポリシーが適用される環境での実行は、Playwrightプロジェクトの範囲外です。

警告

Google ChromeとMicrosoft Edgeは、通常のヘッダー付きモードに近い新しいヘッドレスモード実装に切り替わりました。これは、Playwrightがヘッドレス実行時にデフォルトで使用するChromiumヘッドレスシェルとは異なります。そのため、場合によっては動作が異なることが予想されます。詳細については、issue #33566を参照してください。

import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  projects: [
    /* Test against branded browsers. */
    {
      name: 'Google Chrome',
      use: { ...devices['Desktop Chrome'], channel: 'chrome' }, // or 'chrome-beta'
    },
    {
      name: 'Microsoft Edge',
      use: { ...devices['Desktop Edge'], channel: 'msedge' }, // or "msedge-beta" or 'msedge-dev'
    },
  ],
});

Google Chrome & Microsoft Edgeのインストール​

Google ChromeまたはMicrosoft Edgeがマシンにインストールされていない場合は、Playwrightコマンドラインツールを使用してインストールできます。

npx playwright install msedge
警告

Google ChromeまたはMicrosoft Edgeのインストールは、オペレーティングシステムのデフォルトのグローバル場所にインストールされ、現在のブラウザのインストールを上書きします。

--helpオプションを指定して実行すると、インストール可能なブラウザの完全なリストが表示されます。

Google Chrome & Microsoft Edgeをいつ使用し、いつ使用しないか？​

デフォルト​

ほとんどの場合、最新のChromiumでデフォルトのPlaywright構成を使用するのが良いでしょう。Playwrightはブラウザの安定版チャンネルよりも先行しているため、今後のGoogle ChromeまたはMicrosoft Edgeのリリースがサイトを壊すことはないという安心感があります。不具合を早期に発見し、公式のChromeアップデートの前に修正する十分な時間があります。

回帰テスト​

とはいえ、テストポリシーでは、現在公開されているブラウザに対して回帰テストを実行する必要があることがよくあります。この場合、安定版チャンネルのいずれか、"chrome"または"msedge"を選択できます。

メディアコーデック​

公式バイナリを使用してテストするもう1つの理由は、メディアコーデックに関連する機能をテストすることです。Chromiumは、様々なライセンス上の考慮事項や契約により、Google ChromeやMicrosoft Edgeがバンドルしているすべてのコーデックを持っているわけではありません。もしあなたのサイトがこのようなコーデックに依存している場合（これは稀ですが）、公式チャンネルを使用したいと思うでしょう。

エンタープライズポリシー​

Google ChromeおよびMicrosoft Edgeは、機能の制限、ネットワークプロキシ、テストの妨げとなる必須の拡張機能を含むエンタープライズポリシーを尊重します。そのため、このようなポリシーを使用する組織の一員である場合、ローカルテストにはバンドルされたChromiumを使用するのが最も簡単です。通常、そのような制限がないボット上では、安定版チャンネルを選択することもできます。

Firefox​

PlaywrightのFirefoxバージョンは、最新のFirefox Stableビルドと一致します。Playwrightはパッチに依存するため、ブランド版のFirefoxでは動作しません。

特定の機能の可用性は、基盤となるプラットフォームに大きく依存するため、オペレーティングシステム間で異なる場合があります。たとえば、利用可能なメディアコーデックは、Linux、macOS、Windows間で大きく異なります。

WebKit​

PlaywrightのWebKitは、最新のWebKitメインブランチのソースから派生しており、これらのアップデートがApple Safariやその他のWebKitベースのブラウザに組み込まれるよりも先行していることがよくあります。これにより、潜在的なブラウザアップデートの問題に反応する十分な先行期間が得られます。Playwrightはパッチに依存するため、ブランド版のSafariでは動作しません。代わりに、最新のWebKitビルドを使用してテストできます。

特定の機能の可用性は、基盤となるプラットフォームに大きく依存するため、オペレーティングシステム間で異なる場合があります。例えば、利用可能なメディアコーデックは、Linux、macOS、Windows間で大きく異なります。Linux CIでWebKitを実行するのが通常最も手頃な選択肢ですが、Safariに最も近いエクスペリエンスを得るには、mac上でWebKitを実行する必要があります。例えば、ビデオ再生を行う場合などです。

ファイアウォールまたはプロキシの背後からのインストール​

デフォルトでは、PlaywrightはMicrosoftのCDNからブラウザをダウンロードします。

企業によっては、パブリックリソースへの直接アクセスをブロックする内部プロキシを維持している場合があります。この場合、Playwrightはプロキシサーバー経由でブラウザをダウンロードするように設定できます。

HTTPS_PROXY=https://192.0.2.1 npx playwright install

プロキシのリクエストがカスタムの信頼されていない認証局（CA）によって傍受され、ブラウザのダウンロード中にError: self signed certificate in certificate chainが発生した場合は、ブラウザをインストールする前に、NODE_EXTRA_CA_CERTS環境変数を使用してカスタムのルート証明書を設定する必要があります。

export NODE_EXTRA_CA_CERTS="/path/to/cert.pem"

Playwrightブラウザアーカイブへのネットワーク接続が遅い場合は、PLAYWRIGHT_DOWNLOAD_CONNECTION_TIMEOUT環境変数で接続タイムアウトをミリ秒単位で増やすことができます。

PLAYWRIGHT_DOWNLOAD_CONNECTION_TIMEOUT=120000 npx playwright install

依存関係をインストールし、Linuxでプロキシを使用する必要がある場合は、ルートユーザーとしてコマンドを実行してください。そうしないと、Playwrightはルートになろうとし、HTTPS_PROXYなどの環境変数をLinuxパッケージマネージャーに渡しません。

sudo HTTPS_PROXY=https://192.0.2.1 npx playwright install-deps

アーティファクトリポジトリからのダウンロード​

デフォルトでは、PlaywrightはMicrosoftのCDNからブラウザをダウンロードします。

企業によっては、ブラウザバイナリをホストするための内部アーティファクトリポジトリを維持している場合があります。この場合、PlaywrightはPLAYWRIGHT_DOWNLOAD_HOST環境変数を使用して、カスタムの場所からダウンロードするように設定できます。

PLAYWRIGHT_DOWNLOAD_HOST=http://192.0.2.1 npx playwright install

PLAYWRIGHT_DOWNLOAD_HOSTよりも優先されるPLAYWRIGHT_CHROMIUM_DOWNLOAD_HOST、PLAYWRIGHT_FIREFOX_DOWNLOAD_HOST、PLAYWRIGHT_WEBKIT_DOWNLOAD_HOST環境変数を使用して、ブラウザごとのダウンロードホストを使用することも可能です。

PLAYWRIGHT_FIREFOX_DOWNLOAD_HOST=http://203.0.113.3 PLAYWRIGHT_DOWNLOAD_HOST=http://192.0.2.1 npx playwright install

ブラウザバイナリの管理​

PlaywrightはChromium、WebKit、FirefoxブラウザをOS固有のキャッシュフォルダにダウンロードします。

  • Windowsでは%USERPROFILE%\AppData\Local\ms-playwright
  • macOSでは~/Library/Caches/ms-playwright
  • Linuxでは~/.cache/ms-playwright

これらのブラウザは、インストールすると数百メガバイトのディスク容量を占有します。

du -hs ~/Library/Caches/ms-playwright/*
281M  chromium-XXXXXX
187M  firefox-XXXX
180M  webkit-XXXX

環境変数を使用してデフォルトの動作を上書きできます。Playwrightをインストールするときに、特定の場所にブラウザをダウンロードするように指示します。

PLAYWRIGHT_BROWSERS_PATH=$HOME/pw-browsers npx playwright install

Playwrightスクリプトを実行するときは、共有場所でブラウザを検索するように指示します。

PLAYWRIGHT_BROWSERS_PATH=$HOME/pw-browsers npx playwright test

Playwrightは、これらのブラウザを必要とするパッケージを追跡し、Playwrightを新しいバージョンに更新すると、それらをガベージコレクトします。

注

開発者は、.bashrcでPLAYWRIGHT_BROWSERS_PATH=$HOME/pw-browsersをエクスポートすることで、このモードを選択できます。

ハーメチックインストール​

ハーメチックインストールを選択し、バイナリをローカルフォルダに配置できます。

# Places binaries to node_modules/playwright-core/.local-browsers
PLAYWRIGHT_BROWSERS_PATH=0 npx playwright install
注

PLAYWRIGHT_BROWSERS_PATHは、Google ChromeおよびMicrosoft Edgeのインストールパスを変更しません。

古いブラウザの削除​

Playwrightは、そのブラウザを使用するクライアントを追跡します。特定のバージョンのブラウザを必要とするクライアントがいなくなると、そのバージョンはシステムから削除されます。これにより、異なるバージョンのPlaywrightインスタンスを安全に使用でき、同時に使用されなくなったブラウザのためにディスク容量を無駄にすることはありません。

未使用のブラウザの削除を無効にするには、PLAYWRIGHT_SKIP_BROWSER_GC=1環境変数を設定できます。

インストールされているすべてのブラウザをリストする:​

マシン上のすべてのPlaywrightインストールからのブラウザのリストを出力します。

npx playwright install --list

ブラウザをアンインストールする​

これにより、現在のPlaywrightインストールのブラウザ（chromium、firefox、webkit）が削除されます。

npx playwright uninstall

他のPlaywrightインストールのブラウザも削除するには、--allフラグを渡します。

npx playwright uninstall --all