Playwrightとは？特徴・使い方・インストール方法・テスト実行方法を徹底解説！

Webアプリの開発で「ボタンのクリック、フォーム入力、ページ遷移などのUI動作を自動でテストしたい」と感じたことはありませんか？

この記事では、WebUIの自動化テストフレームワーク「Playwright（プレイライト）」について、特徴・使い方・インストール方法・テスト実行方法を図付きでわかりやすく解説します。

Webアプリのテストを効率化したい方、E2Eテストをこれから始めたい方におすすめの内容です。

Playwrightとは？

Playwright（プレイライト）は、Microsoftが開発したWebUIの自動化テストフレームワークです。Playwrightを使うことで、E2E（End-to-End）テストを簡単に実装することができます。

Playwrightを使えば、Webアプリケーションの動作を実際のブラウザ上でユーザー操作のように再現してテストできます。たとえば、

• ボタンをクリックする
• フォームに文字を入力する
• ページ遷移が正しく行われるか確認する

といった操作を自動で実行し、意図した通りに動いているかを検証できます。

Playwrightの特徴

Playwrightには、他のE2Eテストツール（例：Selenium、Cypress）と比べて多くの強みがあります。ここでは、Playwrightの主な特徴について説明します。

マルチブラウザ対応

Playwrightは、以下の主要ブラウザエンジンを公式にサポートしています。

これにより、ブラウザ間の挙動差（レンダリングやJavaScriptの仕様差）を自動テストで検証できます。たとえば、「Chromeでは正しく表示されるが、Safariではレイアウトが崩れる」といったケースも検出可能です。

実際のブラウザを直接操作する

Playwrightは、実際のブラウザ（Chromium / Firefox / WebKit）を直接起動・操作します。そのため、テストは単なるシミュレーションではなく、ユーザー操作に限りなく近い動作を再現します。

また、Playwrightは「ヘッドレス（画面なし）モード」だけでなく、「ヘッドフル（画面あり）モード」でも実行できます。これにより、ブラウザが実際に開き、テスト中のクリックや入力の様子を目で確認しながらデバッグすることが可能です。

後ほど説明しますが、以下のコマンドを実行すると、ブラウザを表示した状態でテストを実行することができます。

npx playwright test --headed

また、Playwrightのデバッグモード（npx playwright test --debug）を使えば、テストのステップを1つずつ実行しながらUIを確認することもできます。さらに、UIモード（npx playwright test --ui）を使えば、立ち上がったGUI画面から直接テストコードを確認することも可能です。

主要なプログラミング言語から利用可能

Playwrightは、以下の主要なプログラミング言語から利用できます。

• Node.js（TypeScript / JavaScript）
• Python
• Java
• .NET（C#など）

特に開発の中心となっているのはNode.js版（TypeScript / JavaScript）で、最も早く新機能が追加されるのもこのバージョンです。Visual Studio Code（VSCode）拡張機能でも、Node.js版のPlaywrightがバックエンドとして動作しています。

また、Playwrightは、フロントエンド開発で一般的なReact / Next.js / Vue / Angularといったフレームワークとも相性が良く、UIのE2Eテスト（ボタンの動作確認、画面遷移など）によく利用されています。

高速かつ信頼性の高いテスト実行が可能

従来のSeleniumなどに比べて、Playwrightは非常に高速に動作します。

また、Playwrightにはauto-wait（自動待機）機能が備わっています。これは、次のような状況でもテストが安定して成功する仕組みです。

• ページが読み込み中でも、自動で要素の出現を待つ
• ボタンが有効になるまで待ってからクリック
• ネットワーク通信の完了を検知してから次のステップへ進む

このため、よくあるテスト失敗（例えば、ボタンがまだ表示されていないのにクリックして失敗など）が起きにくく、非常に信頼性の高いテスト実行が可能です。

シンプルで直感的なAPI

Playwrightのコードは非常にシンプルで、人が読むように理解できる構文になっています。直感的なメソッド名が多く、初心者でもすぐにテストを書き始められます。以下に一例を示します。

await page.goto('https://example.com');             // ページへ移動
await page.click('text=ログイン');                   // 「ログイン」ボタンをクリック
await page.fill('input[name="username"]', 'testuser'); // 入力フォームに文字を入力

コードを見れば、「どのページで・どんな操作をしているのか」がひと目でわかります。

テストコードの自動生成機能（codegen）がある

Playwrightには、操作を記録してテストコードを自動生成する便利な機能（codegen）が搭載されています。

これを使えば、実際にブラウザを操作しながら、その操作を自動でコード化できるため、テストを一から手書きする手間を大幅に減らせます。

認証・プロキシ・Cookieなども柔軟に扱える

Playwrightでは、実際のWebアプリに近い環境を再現したテストが簡単に構築できます。

ログイン処理やCookie管理、プロキシ設定などを柔軟に扱えるため、本番に近い状態でのE2Eテストが可能です。

スクリーンショット・動画の自動保存が可能

Playwrightでは、テストの実行中や失敗時に自動でスクリーンショットや動画を保存できます。

これにより、テストが失敗した際に「どの操作で・どんな状態だったか」を視覚的に確認できるため、デバッグが非常に容易です。

CI/CDとの統合が容易

Playwrightは、主要なCI/CDサービス（継続的インテグレーション環境）ともスムーズに連携できます。

公式でGitHub Actions, GitLab CI, Google Cloud Build, Azure Pipelinesなどをサポートしており、自動テストを本番デプロイ前のワークフローに組み込むことが簡単です。

Playwrightの使い方

ではこれから、Playwrightの使い方について以下の内容を説明します。

• Playwrightのインストール方法
  • 環境構築から初期設定までの流れを紹介します。
• Playwrightをインストールして作成されるフォルダやファイル
  • 自動生成されるサンプルコードや不要なフォルダについて解説します。
• テストファイルの作成方法
  • 実際にTypeScriptでシンプルなテストコードを書いてみます。
• テストを実行する方法（npx playwright test）
  • npx playwright test コマンドでテストを実行し、結果を確認します。
• テストレポートを確認する方法（npx playwright show-report）
  • テスト実行後に自動生成されるHTMLレポートを開いて、成功・失敗したテストを視覚的に確認する方法を紹介します。
• UIモードでテストを実行する方法（npx playwright test --ui）
  • グラフィカルな画面からテストの動作やログを確認する方法を解説します。
• デバッグモードでテストを実行する方法（npx playwright test --debug）
  • テストを1ステップずつ実行しながら問題を特定する方法を紹介します。
• codegen（コード自動生成）機能の使い方（npx playwright codegen）
  • ブラウザ操作を自動記録してテストコードを生成する方法を解説します。
• Playwrightにプロキシ設定を追加する方法
  • 社内環境や制限付きネットワーク下でPlaywrightを使う設定方法を紹介します。
• Playwrightのアップデート方法
  • 　Playwright本体とブラウザの更新手順を説明します。
• よく使うPlaywrightコマンドをスクリプト登録する方法
  • 　よく使うPlaywrightコマンドを短縮して実行する設定を紹介します。

Playwrightのインストール方法

Playwrightは、Node.js環境があればすぐに導入できます。まずはテスト用のプロジェクトディレクトリを作成しましょう。

# my-playwright-testを作成する場合
mkdir my-playwright-test
cd my-playwright-test

次に以下のコマンドを実行しましょう。

# npmを使う場合
npm init playwright@latest
# yarnを使う場合
yarn create playwright

コマンドを実行すると、画面にいくつか質問が表示されます。質問に答えていくだけで、Playwrightの初期設定が完了します。

• Do you want to use TypeScript or JavaScript?
  • TypeScriptかJavaScriptのどちらを使うか。
  • デフォルトはTypeScript。
• Where to put your end-to-end tests?
  • E2Eテストの保存ディレクトリ名は何か。
  • デフォルトはtests。
  • 既にその名前のフォルダが存在する場合は、e2eフォルダを作成する。
• Add a GitHub Actions workflow?
  • GitHub Actions（CI/CD）設定を追加するか。
  • デフォルトはYes。
  • Yesを選ぶと.github/workflows/playwright.ymlが作成されます。不要ならNoを選ぶか、後でそのファイルを削除すればOKです。
• Install Playwright browsers (can be done manually via 'npx playwright install')?
  • Playwrightが利用するブラウザをインストールするか。
  • デフォルトはYes。
  • Noを選んでも問題ありません。次のコマンドでいつでも入れられます：
    • すべて入れる：npx playwright install
    • 特定だけ：npx playwright install chromium（または firefox / webkit）
  • ブラウザのインストール先については後ほど説明します。
• Install Playwright operating system dependencies (requires sudo / root - can be done manually via 'sudo npx playwright install-deps')?
  • Linux環境でのみ表示される内容。
  • ブラウザ実行に必要なOS依存パッケージを自動インストールするか。
  • デフォルトはYes。

Playwrightが利用するブラウザのインストール先は以下となります。

このセットアップを完了すると、次のような処理が自動で行われます

package.jsonやpackage-lock.json（またはyarn.lock）が存在しない場合、新しく作成されます。既に存在している場合は、Playwright関連パッケージが追加されます。例えば、package.jsonが新規作成された場合、以下のようになります。

# package.json
{
  "name": "my-playwright-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {},
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@playwright/test": "^1.56.0",
    "@types/node": "^24.8.0"
  }
}

# 通常の依存関係インストール
npm install

または以下

# バージョン固定（package-lock.jsonに完全準拠）
npm ci

# Windows / macOS
npx playwright install
# Linux / WSL（Ubuntuなど）
npx playwright install --with-deps

参考：npm init playwright@latestの実行結果

$ npm init playwright@latest
Need to install the following packages:
create-playwright@1.17.139
Ok to proceed? (y) y


> npx
> create-playwright

Getting started with writing end-to-end tests with Playwright:
Initializing project in '.'
√ Do you want to use TypeScript or JavaScript? · TypeScript
√ Where to put your end-to-end tests? · tests
√ Add a GitHub Actions workflow? (Y/n) · false
√ Install Playwright browsers (can be done manually via 'npx playwright install')? (Y/n) · true
Initializing NPM project (npm init -y)…
Wrote to C:\Users\user01\Desktop\ブログ - コピー\test\my-playwright-test\package.json:

{
  "name": "my-playwright-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}



Installing Playwright Test (npm install --save-dev @playwright/test)…

added 3 packages, and audited 4 packages in 4s

found 0 vulnerabilities
Installing Types (npm install --save-dev @types/node)…

added 2 packages, and audited 6 packages in 2s

found 0 vulnerabilities
Writing playwright.config.ts.
Writing tests\example.spec.ts.
Writing package.json.
Downloading browsers (npx playwright install)…
Downloading Chromium 141.0.7390.37 (playwright build v1194) from https://cdn.playwright.dev/dbazure/download/playwright/builds/chromium/1194/chromium-win64.zip
148.9 MiB [====================] 100% 0.0s
Chromium 141.0.7390.37 (playwright build v1194) downloaded to C:\Users\user01\AppData\Local\ms-playwright\chromium-1194
Downloading Chromium Headless Shell 141.0.7390.37 (playwright build v1194) from https://cdn.playwright.dev/dbazure/download/playwright/builds/chromium/1194/chromium-headless-shell-win64.zip
91 MiB [====================] 100% 0.0s
Chromium Headless Shell 141.0.7390.37 (playwright build v1194) downloaded to C:\Users\user01\AppData\Local\ms-playwright\chromium_headless_shell-1194
Downloading Firefox 142.0.1 (playwright build v1495) from https://cdn.playwright.dev/dbazure/download/playwright/builds/firefox/1495/firefox-win64.zip
105 MiB [====================] 100% 0.0s
Firefox 142.0.1 (playwright build v1495) downloaded to C:\Users\user01\AppData\Local\ms-playwright\firefox-1495
Downloading Webkit 26.0 (playwright build v2215) from https://cdn.playwright.dev/dbazure/download/playwright/builds/webkit/2215/webkit-win64.zip
57.6 MiB [====================] 100% 0.0s
Webkit 26.0 (playwright build v2215) downloaded to C:\Users\user01\AppData\Local\ms-playwright\webkit-2215
Downloading FFMPEG playwright build v1011 from https://cdn.playwright.dev/dbazure/download/playwright/builds/ffmpeg/1011/ffmpeg-win64.zip
1.3 MiB [====================] 100% 0.0s
FFMPEG playwright build v1011 downloaded to C:\Users\user01\AppData\Local\ms-playwright\ffmpeg-1011
Downloading Winldd playwright build v1007 from https://cdn.playwright.dev/dbazure/download/playwright/builds/winldd/1007/winldd-win64.zip
0.1 MiB [====================] 100% 0.0s
Winldd playwright build v1007 downloaded to C:\Users\user01\AppData\Local\ms-playwright\winldd-1007
✔ Success! Created a Playwright Test project at C:\Users\user01\Desktop\ブログ - コピー\test\my-playwright-test

Inside that directory, you can run several commands:

  npx playwright test
    Runs the end-to-end tests.

  npx playwright test --ui
    Starts the interactive UI mode.

  npx playwright test --project=chromium
    Runs the tests only on Desktop Chrome.

  npx playwright test example
    Runs the tests in a specific file.

  npx playwright test --debug
    Runs the tests in debug mode.

  npx playwright codegen
    Auto generate tests with Codegen.

We suggest that you begin by typing:

    npx playwright test

And check out the following files:
  - .\tests\example.spec.ts - Example end-to-end test
  - .\playwright.config.ts - Playwright Test configuration

Visit https://playwright.dev/docs/intro for more information. ✨

Happy hacking! 🎭

Playwrightをインストールして作成されるフォルダやファイル

npm init playwright@latestを実行すると、いくつかのフォルダやファイルが自動で作成されます。

この中には、テストに必要なファイルとサンプル用で削除しても問題ないファイルが含まれています。不要なものを削除しておくと、プロジェクトがスッキリします。作成される主なフォルダ・ファイル一覧を以下に示します。

my-playwright-test/
├── node_modules/
├── tests/
│   └── example.spec.ts
├── .gitignore
├── package.json
├── package-lock.json
├── playwright.config.ts
└── tests-examples/
    └── demo-todo-app.spec.ts

// playwright.config.ts
import { defineConfig } from '@playwright/test';

export default defineConfig({
  testDir: './e2e', // testsフォルダではなくe2eフォルダを指定
});

テストファイルの作成方法

Playwrightでは、テストファイルをTypeScriptまたはJavaScriptで作成します。ファイル名の末尾に.spec.tsまたは.spec.jsを付けるのが基本ルールです（例：sample.spec.ts、sample.spec.jsなど）。

以下にPlaywrightのシンプルなテストファイル（tests/sample.spec.ts）を示します。このコードは、指定したWebページ（example.com）のタイトルが正しく表示されるかを検証するテストを行っています。

import { test, expect } from "@playwright/test";

// テストのタイトル
test("トップページのタイトルが正しいことを確認", async ({ page }) => {
  // 指定したURLにアクセス
  await page.goto("https://example.com");

  // ページタイトルを取得
  const title = await page.title();

  // タイトルが "Example Domain" であることを確認
  expect(title).toBe("Example Domain");
});

これでシンプルなテストファイルが完成です。次はこのテストを実際に動かしてみましょう。

テストを実行する方法（npx playwright test）

以下のコマンドでテストを実行することができます。

npx playwright test

上記のコマンドでは、testsフォルダ以下にあるすべてのテストファイルをテストしています（デフォルト設定では、ファイル名が.spec.tsまたは.spec.jsのものを自動検出します）。

実行すると、以下のような結果がターミナルに表示されます。

参考：npx playwright testの実行結果

$ npx playwright test

Running 3 tests using 3 workers
  3 passed (5.3s)

To open last HTML report run:

  npx playwright show-report

上記のように出力されればテスト成功です。テストが失敗した場合は、以下のような原因が考えられます。

• expect()の条件に合っていない
• ページ遷移が失敗している
• セレクタが誤っている

npx playwright testの便利なオプション

npx playwright testの便利なオプションを以下に示します。

テストレポートを確認する方法（npx playwright show-report）

Playwrightはテスト実行後、自動でHTMLレポートを生成します。以下のコマンドでレポートを開けます。

npx playwright show-report

実行するとブラウザが立ち上がり、どのテストが成功・失敗したかを視覚的に確認できます。

参考：npx playwright show-reportの実行結果

$ npx playwright show-report

  Serving HTML report at http://localhost:9323. Press Ctrl+C to quit.

UIモードでテストを実行する方法（npx playwright test --ui）

Playwrightには、テストをGUI（グラフィカルユーザーインターフェース）上で実行できるUIモードが用意されています。テスト実行の流れを視覚的に確認できるモードで、デバッグにも非常に便利です。

以下のコマンドでUIモードでテストを実行します。

npx playwright test --ui

上記コマンドを実行すると、Playwright専用のテストランナーUI（グラフィカルツール）が立ち上がります。

ここでは、各テストをクリック操作で実行・確認できるようになります。

UIモードでの主な機能

UIモードでの主な機能を以下に示します。

アクション（Actions）

「Actions」タブでは、テスト中にPlaywrightが実行したすべての操作を時系列で確認できます。たとえば「クリック」「入力」「ページ遷移」「スクロール」などが一覧で表示されます。

• ロケーター（Locator）
  • 各アクションで使用された要素のロケーターを確認できます。
  • 例：page.getByRole('button', { name: '送信' })
• DOMスナップショットの変化
  • 各アクションにマウスを合わせると、右側に表示されているDOMスナップショットがその時点の状態に切り替わります。
• Before / Afterタブ
  • アクション前後の画面を比較できるので、「クリック前とクリック後に画面がどう変わったか」「入力フォームに文字が入る前と後の違い」などを視覚的に確認可能です。

ソース（Source）

「Source」タブでは、実際に動作したテストコードを表示します。UIモード上で各アクションを選択すると、そのアクションがどの行のコードに対応しているかが自動的にハイライトされます。

• 各アクションをクリック → 該当するコード行が強調表示される。
• 右上の「Open in VS Code」ボタンをクリックすると、VS Codeが開いてその行にジャンプする。

コール（Call）

「Call」タブでは、選択したアクションの詳細情報を表示します。テストが内部でどのように動作したのかを分析するのに使います。表示される情報の例を以下に示します。

• 実行にかかった時間（Duration）
• 使用されたロケーター
• strictモードの有無（ロケーターが複数ヒットした場合の扱い）
• 押されたキー（例：EnterやTab）など

ログ（Log）

「Log」タブでは、Playwrightが裏で実行している自動処理をすべて表示します。つまり、テストが何を待っているのか、どんな順序で操作しているのかが詳しく見えます。裏で実行している自動処理の一例を以下に示します。

• 要素が見えるまで自動的にwaitForSelector
• 要素がクリック可能になるまで待機
• スクロールして要素を画面内に表示
• 入力操作（fill）や押下操作（press）の実行

テストが途中で止まったり遅いときは、Logを見れば「どこで待っているのか」がすぐ分かります。

コンソール（Console）

「Console」タブでは、ブラウザから出力されたログとテストコードから出力したログの両方を確認できます。

UI上では、どちらの出力かがアイコンで区別されるので、デバッグがしやすいです。

ネットワーク（Network）

「Network」タブでは、テスト中にブラウザが送受信した全てのHTTPリクエストを一覧で確認できます。API通信の検証や、CORS・認証関連のトラブル調査に最適です。主な機能を以下に示します。

• リクエストの種類、ステータスコード、メソッド（GET/POSTなど）、サイズ、通信時間を表示
• 各リクエストをクリックすると、詳細情報を確認可能
  • Request Headers（送信ヘッダー）
  • Response Headers（レスポンスヘッダー）
  • Request Body（送信データ）
  • Response Body（受信データ）

添付ファイル（Attachments）

「Attachments」タブでは、テスト実行中に保存されたスクリーンショットや比較画像（diff）を確認できます。

• スクリーンショットを並べて比較
• スライダーを動かして差分を重ね合わせ
• 期待値・実際・差分の3種類を切り替えて表示

ウォッチモード（Watch mode）

UIモードのサイドバーで、各テスト名の横にある「目のアイコン」をクリックするとウォッチモードが有効になります。

• ウォッチモードが有効のテストケースでは、ファイルを保存（変更）すると、自動的にそのテストを再実行
• 複数テストを同時にウォッチ可能
• 一番上の「目のアイコン」をクリックすると、すべてのテストを監視モードに切り替え

「コード修正 → 即テスト再実行 → 結果確認」の流れがスムーズにできるため、テスト開発のスピードが向上します。

テストのフィルタリング（Filtering tests）

表示されるテストを絞り込むことができます。次のような条件でフィルタリング可能です。

• ブラウザの種類（例：Chromium / Firefox / WebKit）
• テスト結果（成功・失敗・スキップ）
• 文字列検索（テスト名や説明文を含むキーワード）
• @タグ指定（特定のタグを付けたテストだけ表示）
• プロジェクト単位（playwright.config に設定されたプロジェクトごと）

タイムラインビュー（Timeline view）

UIモードの上部には、テスト実行の流れを時系列で確認できるタイムラインエリアがあります。ここでは、どの操作に何秒かかったのかや、各アクションのスナップショット（画面の状態）を視覚的に確認できます。アクションの種類やナビゲーションの部分は色分けされて表示されます。

• マウスを動かすと、その時点の画面（スクリーンショット）がプレビュー表示される
• ダブルクリックすると、特定のアクションの実行時間範囲を確認できる
• スライダーで範囲を広げると、選択した範囲に対応するログ・コンソール・ネットワーク情報だけが絞り込まれて表示される

DOMのポップアウト（Pop out and inspect the DOM）

テスト中の画面（DOMスナップショット）を別ウィンドウで開いて詳しく調べることができます。開いたウィンドウからブラウザのDevToolsを使ってテスト時点のHTML構造やCSSの状態を実際のブラウザのように確認できます。他のアクションもポップアウトして並べて比較することも可能です。

ロケーターの取得（Pick locator）

「Pick locator」ボタンをクリックすると、DOMスナップショット上で要素をホバーしてロケーター（セレクタ）を確認できます。

• クリックで「ロケータープレイグラウンド」に追加
• そこでロケーターを編集し、マッチ確認が可能
• 満足したら「コピー」ボタンでテストコードに貼り付けられる

メタデータ（Metadata）

「Actions」タブの隣にある「Metadata」では、テストの実行環境やテスト全体に関する基本情報を確認できます。

このタブは、テストそのもののコンテキスト（環境・条件）を把握するのにとても便利です。「どんな環境でテストが動いたのか？」を確認したいときに使用します。表示される主な情報を以下に示します。

デバッグモードでテストを実行する方法（npx playwright test --debug）

Playwrightでは、テストをデバッグモードで実行することで、実際のブラウザ操作を1ステップずつ確認しながら問題を特定できます。

以下のコマンドで、テストをデバッグモードで実行できます。

npx playwright test --debug

このコマンドを実行すると、Playwright専用のデバッグ用ウィンドウが開きます。

デバッグモードの特徴を以下に示します。

デバッグモードでの主な操作ボタンを以下に示します。

codegen（コード自動生成）機能の使い方（npx playwright codegen）

Playwrightには、実際のブラウザ操作を自動で記録してテストコードを生成する便利な機能があります。それが「codegen（コードジェン）」です。

この機能を使えば、マウス操作・クリック・入力・ページ遷移などを自動でコード化でき、初心者でも簡単にE2Eテストを作成できます。

codegenを起動するためには以下のコマンドを実行します。

npx playwright codegen

実行すると、ブラウザとPlaywright Inspector（記録ツール）が同時に起動します。ブラウザで操作すると、その内容がリアルタイムでコードに変換され、右側のエディタウィンドウに自動生成されます。

たとえば、example.comにアクセスしてリンクをクリックした場合、自動生成されるテストコードは次のようになります。

import { test, expect } from '@playwright/test';

test('自動生成されたテスト', async ({ page }) => {
  await page.goto('https://example.com/');
  await page.getByRole('link', { name: 'More information' }).click();
  await expect(page).toHaveURL('https://www.iana.org/domains/example');
});

このように、クリック・入力・遷移などの操作が自動的に記録されます。

npx playwright codegenの便利なオプション

npx playwright codegenの便利なオプションを以下に示します。

Playwrightにプロキシ設定を追加する方法

Playwrightでは、テスト実行時にプロキシサーバーを経由して通信することができます。これは次のようなケースで便利です。

• 社内ネットワークからしかアクセスできないサイトをテストしたい場合
• 開発環境と本番環境でネットワークを分けている場合
• 外部通信をすべて監査・制御したい場合

Playwright Test（@playwright/test）を利用している場合は、設定ファイル（playwright.config.ts）にプロキシ設定を一括指定できます

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

export default defineConfig({
  use: {
    proxy: {
      server: 'http://proxy.example.com:8080',
      username: 'proxyuser',
      password: 'proxypass',
    },
  },
});

この設定を行うと、すべてのテストが指定したプロキシ経由で通信します。

Playwrightのアップデート方法

Playwrightのアップデートは、2種類に分かれています。

• Playwright本体のアップデート
• ブラウザと依存パッケージのアップデート

それぞれの役割とコマンドを見ていきましょう。

Playwright本体をアップデート

Playwright Test（@playwright/test）自体を最新バージョンに更新するためには、以下のコマンドを実行します。

npm install -D @playwright/test@latest

ブラウザと依存パッケージをアップデート

Playwrightが利用しているブラウザエンジン（Chromium / Firefox / WebKit）や、Linuxで必要なシステムライブラリ（依存パッケージ）をアップデートするためには、以下のコマンドを実行します。

# Windows / macOSの場合
npx playwright install
# Linux / WSL（Ubuntuなど）の場合
npx playwright install --with-deps

現在のPlaywrightのバージョンは次のコマンドで確認できます。

npx playwright --version

よく使うPlaywrightコマンドをスクリプト登録する方法

Playwrightを頻繁に使う場合、毎回npx playwright ...とコマンド入力するのは手間です。そこで、package.jsonの"scripts"に登録しておけば、短いコマンド（npm run ...）で実行できるようになります。

{
  "scripts": {
    "test": "playwright test",                 // 通常のテスト実行
    "test:ui": "playwright test --ui",         // UIモードで実行（グラフィカル表示）
    "test:headed": "playwright test --headed", // 実ブラウザで実行（非ヘッドレス）
    "test:debug": "playwright test --debug",   // デバッグモードで実行（1ステップずつ）
    "test:codegen": "playwright codegen",      // codegenでテストコードを自動生成
    "test:report": "playwright show-report"    // HTMLレポートを表示
  }
}

登録後は、以下のようにシンプルに実行できます。

# npmを使う場合
npm run test          # 通常のテスト実行
npm run test:ui       # UIモード起動
npm run test:headed   # 実ブラウザで確認
npm run test:debug    # デバッグモード
npm run test:codegen  # 操作を記録してコード生成
npm run test:report   # HTMLレポートを開く

# yarnを使う場合
yarn test             # 通常のテスト実行
yarn test:ui          # UIモード起動
yarn test:headed      # 実ブラウザで確認
yarn test:debug       # デバッグモード
yarn test:codegen     # 操作を記録してコード生成
yarn test:report      # HTMLレポートを開く

本記事のまとめ

この記事ではWebUIの自動化テストフレームワーク「Playwright（プレイライト）」について説明しました。

Playwrightは、Webアプリの操作を自動でテストできる強力なツールです。ボタンのクリックやフォーム入力、ページ遷移などを実際のブラウザ上で再現でき、E2Eテストを効率的に行えます。

セットアップも簡単で、npm init playwright@latest → npx playwright testの2ステップで始められます。

UIモードやデバッグ機能を使えば、テストの確認・修正もスムーズです。Webアプリの品質を保ちながら、開発を効率化したい方は、ぜひPlaywrightを試してみてください。

お読みいただきありがとうございました。