用語集 › 🛠️ 開発ツール › Playwright
【プレイライト】

Playwright とは？

💡 全ブラウザを1つのスクリプトで制覇する自動テストの演出家
📌 このページのポイント
Playwrightのマルチブラウザテスト テストコード test('ログイン', async ...) Playwright API Chromium Chrome / Edge Firefox Gecko エンジン WebKit Safari エンジン ✓ Pass ✓ Pass ✓ Pass 1つのテストコードで3つのブラウザエンジンを同時テスト
マルチブラウザテストのフロー
ひよこ ひよこ

Playwrightって何をするツールなの？

ペンギン先生 ペンギン先生

Webアプリの画面操作を自動化してテストするツールだよ。「ボタンをクリック→フォームに入力→結果を確認」といった人間の操作をコードで再現してくれるんだ

ひよこ ひよこ

3つのブラウザで動くってすごいの？

ペンギン先生 ペンギン先生

すごいよ！Chromium（Chrome系）、Firefox、WebKit（Safari系）の全エンジンに対応しているから、「Chromeでは動くのにSafariで壊れてた」みたいなバグを事前に見つけられるんだ。しかも同じテストコードでOKだよ

ひよこ ひよこ

Cypressとはどう違うの？

ペンギン先生 ペンギン先生

Cypressはブラウザの中でテストが動くのに対して、Playwrightはブラウザの外からDevToolsプロトコルで操作するんだ。そのおかげで複数タブや複数ブラウザの同時操作もできるし、テストの並列実行も得意だよ

ひよこ ひよこ

自動待機（Auto-waiting）ってどういうこと？

ペンギン先生 ペンギン先生

例えば「ボタンをクリック」と書くだけで、Playwrightがボタンが表示されてクリック可能になるまで自動で待ってくれるんだ。従来のツールでは「3秒待つ」みたいなコードが必要だったけど、それが不要になって安定したテストが書けるよ

ひよこ ひよこ

トレースビューアって何？

ペンギン先生 ペンギン先生

テストの実行過程をタイムライン形式で記録・再生できる機能だよ。各ステップでのスクリーンショットやDOMの状態、ネットワークリクエストまで全部確認できる。テストが失敗したとき「どの瞬間に何が起きたか」を映画のコマ送りみたいに追えるから、デバッグが格段に楽になるんだ

ペンギン
まとめ：ざっくりこれだけ覚えればOK！
「Playwright」って出てきたら「複数ブラウザを自動テストできるMicrosoft製のE2Eテストツール」と思えればだいたいOK！
📖 おまけ：英語の意味
「Playwright」 ＝ 劇作家・脚本家
💬 ブラウザの操作を「脚本」のように書いて自動実行するイメージからこの名前がついたよ。テストのシナリオを書く人＝劇作家というわけだね
🔗 あわせて読みたい
← 用語集にもどる