「テストって難しそう…」「E2Eテストって何？」そんな風に感じていませんか？実はPlaywrightを使えば、ブラウザの自動操作やユーザテストが驚くほど簡単に実現できます。この記事では、Playwrightの基本から実際のコード例まで、プログラミング初心者の方にも分かりやすく解説します！
Playwrightとは？E2Eテストの基礎から理解しよう
E2Eテストってそもそも何？
E2Eテスト（End-to-End テスト）とは、ユーザーが実際にWebサービスを使う一連の流れを、自動的にシミュレートして動作確認するテストのことです。
たとえば、こんな操作を自動化できます。
- Webサイトを開く
- フォームに文字を入力する
- ボタンをクリックする
- 結果が正しく表示されているか確認する
手作業で毎回チェックするのは大変ですよね。E2Eテストを使えば、このような作業を自動でやってくれるのです。
PlaywrightはMicrosoftが開発した最新ツール
Playwrightは、Microsoftが開発したオープンソースのブラウザ自動操作ライブラリです。Python・JavaScript・TypeScript・Java・C#など複数の言語に対応しており、Chrome・Firefox・Safariの3大ブラウザをすべて操作できる点が大きな特徴です。
似たツールに「Selenium」がありますが、PlaywrightはSeleniumよりもセットアップが簡単で動作が速く、安定していると評判です。近年では多くの現場でPlaywrightが採用されています。
| 比較項目 | Playwright | Selenium |
|---|---|---|
| 開発元 | Microsoft | オープンソースコミュニティ |
| 対応ブラウザ | Chrome / Firefox / Safari | 主要ブラウザ全般 |
| セットアップ | 簡単（1コマンド） | やや複雑 |
| 動作速度 | 速い | やや遅い |
| 非同期処理 | 得意 | 工夫が必要 |
Playwrightのインストールと初期設定
Pythonへのインストール手順
PlaywrightはPythonのパッケージとして簡単にインストールできます。ターミナル（コマンドプロンプト）で以下のコマンドを実行しましょう。
# Playwrightライブラリのインストール
pip install playwright
# ブラウザのインストール（初回のみ必要）
playwright installplaywright installを実行すると、Chrome・Firefox・SafariベースのブラウザがPlaywright用に自動でダウンロードされます。ドライバを手動で設定する必要がないのが嬉しいですね！
実際にブラウザを動かしてみよう！基本の操作
サンプル①：Webサイトを開いてスクリーンショットを撮る
まずは一番シンプルな例から始めましょう。指定したURLを開いて、スクリーンショットを保存するコードです。
from playwright.sync_api import sync_playwright
with sync_playwright() as p:
# Chromiumブラウザを起動（headless=Falseで画面を表示）
browser = p.chromium.launch(headless=False)
page = browser.new_page()
# URLを開く
page.goto("https://example.com")
# スクリーンショットを保存
page.screenshot(path="screenshot.png")
print("スクリーンショットを保存しました！")
browser.close()headless=Falseにすると実際にブラウザ画面が表示されるので、動作確認がしやすくなります。本番テストではheadless=True（デフォルト）にして画面を非表示にするのが一般的です。
サンプル②：フォームへの入力とボタンクリック
次は、検索フォームにキーワードを入力してEnterキーを押す操作です。Google検索を例に使います。
from playwright.sync_api import sync_playwright
with sync_playwright() as p:
browser = p.chromium.launch(headless=False)
page = browser.new_page()
# Googleを開く
page.goto("https://www.google.com")
# 検索ボックスにキーワードを入力
page.fill("input[name='q']", "Playwright Python")
# Enterキーを押して検索
page.keyboard.press("Enter")
# 検索結果ページが表示されるまで待機
page.wait_for_load_state("networkidle")
# タイトルを取得して表示
print(f"ページタイトル: {page.title()}")
browser.close()page.fill()でフォームに文字を入力し、page.keyboard.press()でキーボード操作ができます。wait_for_load_state()でページの読み込みを待つことで、処理の安定性が増します。
E2Eテストらしい使い方：自動でアサーション（検証）を行う
アサーションとは？
アサーションとは「期待通りの結果になっているか確認する」ことです。たとえば「ログイン後に『ようこそ』という文字が表示されているか」をチェックするような処理です。PlaywrightにはPytestと組み合わせた専用のアサーション機能が用意されています。
サンプル③：pytestと組み合わせたE2Eテスト
PlaywrightはPythonのテストフレームワークpytestと非常に相性が良いです。まずpytest-playwrightをインストールします。
pip install pytest-playwright次に、実際のテストコードを書いてみましょう。
# test_example.py
from playwright.sync_api import Page, expect
def test_title_check(page: Page):
"""ページのタイトルが正しいか確認するテスト"""
page.goto("https://example.com")
# タイトルに「Example Domain」が含まれているか確認
expect(page).to_have_title("Example Domain")
print("タイトルの確認OK！")
def test_heading_visible(page: Page):
"""見出しテキストが表示されているか確認するテスト"""
page.goto("https://example.com")
# <h1>タグに「Example Domain」が表示されているか確認
heading = page.locator("h1")
expect(heading).to_be_visible()
expect(heading).to_have_text("Example Domain")
print("見出しの確認OK！")テストの実行は以下のコマンドです。
# テストを実行（--headed オプションでブラウザ画面を表示）
pytest test_example.py --headed
# ヘッドレスモード（画面なし）で実行
pytest test_example.pyexpect()を使うと、テストが失敗したとき自動的にエラーメッセージを出してくれます。どこで何が間違っているかが一目でわかるのは大変便利です。
Playwrightの便利機能をもっと活用しよう
自動待機（Auto-waiting）機能
Playwrightの大きな強みのひとつが自動待機（Auto-waiting）機能です。従来のツールでは「ボタンが表示されるまで〇秒待つ」という処理を自分で書く必要がありましたが、Playwrightは要素が操作可能になるまで自動で待ってくれます。
たとえばpage.click()を呼ぶと、対象の要素が表示されて、クリック可能な状態になるまで自動的に待機してからクリックします。テストが不安定になりにくく、余計なtime.sleep()を書く必要がなくなります。
コードジェネレーター（Codegen）で自動コード生成！
「コードを書くのが大変…」という方にはCodegen機能が超おすすめです。実際にブラウザを操作すると、その操作をPlaywrightのコードとして自動生成してくれます！
# Codegenを起動（ブラウザが開いて操作を記録できる）
playwright codegen https://example.comこのコマンドを実行すると、ブラウザウィンドウとコードエディタが同時に立ち上がります。ブラウザ上でクリックや入力をするたびに、対応するPythonコードがリアルタイムで生成されます。非エンジニアの方でも直感的にテストコードが作れるので、ぜひ試してみてください！
トレース機能でテスト失敗の原因を調査
テストが失敗した原因を調べるときに便利なのがトレース（Trace）機能です。テスト中の操作をすべて記録し、後から動画やスクリーンショットで確認できます。
from playwright.sync_api import sync_playwright
with sync_playwright() as p:
browser = p.chromium.launch()
context = browser.new_context()
# トレースの記録を開始
context.tracing.start(screenshots=True, snapshots=True)
page = context.new_page()
page.goto("https://example.com")
page.click("a") # リンクをクリック
# トレースをファイルに保存
context.tracing.stop(path="trace.zip")
browser.close()
# トレースを閲覧するコマンド
# playwright show-trace trace.zip保存したトレースはplaywright show-trace trace.zipコマンドで専用のビューアーが起動し、どのタイミングでどんな操作が行われたかをステップごとに確認できます。バグの原因特定に大活躍します！
まとめ：Playwrightで自動テストをはじめよう
この記事では、PlaywrightによるブラウザのE2E自動テストについて解説しました。最後に要点を整理しましょう。
| 機能 | 説明 | 使いどころ |
|---|---|---|
| 基本操作 | クリック・入力・スクリーンショット | 動作確認・UIチェック |
| アサーション | 期待値との一致を確認 | E2Eテストの自動検証 |
| 自動待機 | 要素の表示まで自動で待つ | 安定したテスト実行 |
| Codegen | 操作からコードを自動生成 | テストコードの素早い作成 |
| トレース | テスト操作を記録・再生 | テスト失敗の原因調査 |
- ✅ PlaywrightはMicrosoftが開発した最新のブラウザ自動操作ライブラリ
- ✅ E2Eテストとは、ユーザーの一連の操作を自動でシミュレートするテスト手法
- ✅
pip install playwright＋playwright installだけで簡単にセットアップ完了 - ✅ Codegen機能でブラウザ操作を記録しテストコードを自動生成できる
- ✅ pytestと組み合わせて本格的なE2Eテストが実現できる
- ✅ トレース機能でテスト失敗の原因を視覚的に調査できる
「テストって難しそう」と思っていた方も、Playwrightならコードを書く量が少なく、Codegenで操作を記録するだけでテストが作れます。まずはスクリーンショットを撮るだけの簡単なコードから試してみてください。自動テストをマスターすれば、Webサービスの品質を保ちながら開発スピードも上がりますよ！
こちらも読まれています
📚 関連商品・おすすめ書籍
※本記事にはアフィリエイトリンクが含まれます。
PR
