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

ブラウザ

はじめに​

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の依存関係を1つのコマンドでインストールすることも可能です。

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つのプロジェクトが提供されます。最初のプロジェクトがデフォルトで選択されています。

Projects section in VS Code extension

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

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です。

警告

特定の企業ブラウザポリシーは、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はブラウザのStableチャンネルよりも先行しているため、今後の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でプロキシを使用する必要がある場合は、rootユーザーとしてコマンドを実行してください。そうしないと、Playwrightはrootになろうとし、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インストールのブラウザ（chromium、firefox、webkit）が削除されます。

npx playwright uninstall

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

npx playwright uninstall --all