テスト・調整
Playwright とは｜3つのブラウザを1つの書き方で動かすツール
Playwright は、ブラウザを自動で動かして、Web のページが思ったとおりに動くかを確かめる枠組みです。Chromium・Firefox・WebKit の3つを、同じ1つの書き方で動かせます。
- 分類
- プログラミング補助
- 制作の流れ
- テスト・調整
- 日本語対応
- 日本語非対応
- 費用
- 無料（Apache-2.0）
- 公式サイト
- https://playwright.dev/確認日 2026-09-18
Playwright の概要
Playwright（プレイライト）は、ブラウザを自動で動かして、Web のページが思ったとおりに動くかを確かめる枠組みです。公式のリポジトリは「Playwright is a framework for web automation and testing.（Playwright は、Web の自動操作と試験のための枠組みです）」と書き、Chromium・Firefox・WebKit の3つを1つの API で動かすとしています。
公式ドキュメントは、Playwright Test を、いまの Web のアプリ向けの、端から端までを通す試験の枠組みと呼んでいます。試験を走らせる仕組み・判定・切り離し・並行して走らせる仕組みと、そろった一式が1つに束ねられています。
作っているのは Microsoft です。対応する言語は TypeScript・Python・.NET・Java です。
Playwright の特徴
Playwright はゲームを描く機能を持ちません
Playwright が受け持つのは、ブラウザを動かして、画面の様子を確かめる部分です。絵や音を作る機能は持ちません。
Playwright の試験のための仕組み
公式サイトは、試験のために備えている仕組みを4つ挙げています。
| 仕組み | 中身 |
|---|---|
| 自動で待つこと | 要素が操作できる状態になるまで待ってから操作します。判定は、条件が満たされるまで自動でやり直します。待ち時間を人が決めて置く必要がありません |
| 試験どうしの切り離し | 試験ごとに新しいブラウザの場が与えられます。新しい利用者の設定で開くのと同じ状態です。認証の状態は1度保存して使い回せます |
| 壊れにくい要素の指し方 | getByRole・getByLabel・getByPlaceholder・getByTestId のように、読者が画面をどう見るかに沿って要素を探します |
| 並行して走らせる仕組み | 設定したブラウザすべてに対して、既定で並行して走ります。複数の機械に分けて走らせることもできます |
対応する範囲は、Windows・Linux・macOS 上の Chromium・WebKit・Firefox です。手元でも自動の組み立ての場でも、画面を出さない形でも出す形でも動きます。Chrome（Android）と Mobile Safari の模擬も備えています。
Playwright の入れ方と書き方
npm init playwright@latest（yarn と pnpm の形もあります）を実行すると、新しい企画が作られるか、いまある企画に Playwright が足されます。途中で、TypeScript か JavaScript か、試験を置くフォルダの名前、GitHub の自動の仕組みを足すか、ブラウザの実行ファイルを入れるかを尋ねられます。同じ命令を後から走らせても、すでにある試験は上書きされません。
入ると、playwright.config.ts・package.json・版を固定するファイル・tests/example.spec.ts が作られます。設定は playwright.config に集められていて、当て先のブラウザ・待ち時間の上限・やり直しの回数・企画の分け方・結果の出し方をここで決めます。
試験は import { test, expect } from '@playwright/test'; と書いて始めます。公式のリポジトリは、page.goto(...) でページを開き、expect(page).toHaveTitle(...) で題を確かめる例を載せています。
Playwright に付いてくるツール
| ツール | 何をするか |
|---|---|
| Test generator | ブラウザでの操作を記録すると、試験のコードが書き出されます。記録のツールの帯から判定を作り、要素を押して指し方を選べます |
| Trace Viewer | 試験が動いた全体の時間の流れを見ます。各段階での画面の作り・通信・記録・画面の写しが残るので、走らせ直さずに失敗を調べられます |
| VS Code の拡張 | 編集の場から試験を走らせ、止め、作れます。止め場所を置き、要素の指し方をブラウザの中で見ながら確認できます |
Playwright の3つの入口
公式サイトは、使い道ごとに3つの入口を挙げています。
| 入口 | 公式サイトが挙げている用途 | 入れ方 |
|---|---|---|
| Playwright Test | 端から端までを通す試験 | npm init playwright@latest |
| Playwright CLI | コードを書く補助の相手（Claude Code・GitHub Copilot など）からの操作 | npm i -g @playwright/cli@latest |
| Playwright MCP | 決まった形の受け渡しでブラウザを操作させる仕組み | npx @playwright/mcp@latest |
このほかに、ブラウザを動かすだけの Playwright Library（npm i playwright）があります。
MCP のほうは、画面の写しではなく、読み上げのための構造（要素の役割・名前・参照）を渡す形です。公式サイトは、これを、決まった結果になり、取り違えが起きず、絵を読む仕組みを必要としない形だとしています。
Playwright の費用とライセンス
Playwright は無料です。公式のリポジトリは、ライセンスを Apache-2.0 としています。
| 項目 | 内容 |
|---|---|
| 費用 | 無料 |
| ライセンス | Apache-2.0 |
| 作っているところ | Microsoft |
| 対応する言語 | TypeScript・Python・.NET・Java |
| 対応するブラウザ | Chromium・Firefox・WebKit |
| 動く機械 | Windows・Linux・macOS |
| 入手の方法 | npm init playwright@latest（VS Code の拡張からも作れます） |
ブラウザの実行ファイルは Playwright が取り寄せます。先行して試す版（Canary releases）の頁も、公式ドキュメントに置かれています。
- Playwright｜公式サイトhttps://playwright.dev/
情報源
- Playwright — 公式サイト（掲げている一文・試験のための4つの仕組み・3つの入口・付いてくる道具・対応するブラウザと機械）https://playwright.dev/確認日 2026-09-18
- Installation — Playwright 公式ドキュメント（Playwright Test の定義・入れ方と尋ねられること・作られるファイル・設定の集約・対応する範囲）https://playwright.dev/docs/intro確認日 2026-09-18
- microsoft/playwright — 公式リポジトリ（Playwright の定義・入口ごとの入れ方・試験の書き方の例・ライセンス）https://github.com/microsoft/playwright確認日 2026-09-18