【Playwright×Python】SauceDemoでE2Eテストを自動化する方法（初心者向け）

📌 この記事はこんな方におすすめ

PlaywrightでE2Eテストを初めて学ぶ方
ログイン〜注文完了までの一連のフローをテストしたいQAエンジニア
SeleniumからPlaywrightへの移行を検討している方
PythonでE2Eテストを実装してみたい開発者・テストエンジニアの方

✅ この記事を読むとわかること

Playwrightの基本概念とSeleniumとの違い
E2Eテストの考え方と実務での活用方法
Playwright × Pythonのセットアップ方法
ログイン〜注文完了まで全10ケースを自動化する方法

👨‍💻 筆者について

QAエンジニアとして実務でPlaywright・Seleniumを活用した自動テストを担当。本記事で紹介するスクリプトはGitHubで公開しており、実際に動作確認済みのコードをそのまま解説しています。

E2Eテストと聞くと「難しそう」「設定が面倒」と感じる方も多いのではないでしょうか。しかしPlaywrightを使えば、ブラウザのインストールからテスト実行まで驚くほどシンプルに実現できます。

この記事では、ECサイトのデモ環境として有名な SauceDemo を対象に、ログイン → 商品追加 → カート確認 → チェックアウト → 注文完了 → ログアウトまでの全フローをPlaywright × Pythonで自動化する方法を初心者向けに解説します。

Playwrightとは
E2Eテストとは
今回テストするサイト（SauceDemo）
環境構築（Python・Playwright）
1. インストール
2. フォルダ構成
テストコード解説
テスト実行方法
1. 実行コマンド
テスト結果
さらに発展させるアイデア
まとめ

Playwrightとは

PlaywrightはMicrosoftが開発したブラウザ自動化ライブラリです。Chromium・Firefox・WebKitの3つのブラウザエンジンに対応しており、Python・JavaScript・TypeScript・Java・C#など複数の言語で使えます。

Seleniumと同じくブラウザを操作してテストを実行しますが、セットアップが圧倒的にシンプルで、待機処理や録画機能などが標準搭載されているのが大きな特徴です。

比較項目	Selenium	Playwright
セットアップ	ChromeDriver別途必要	`playwright install` 一発
待機処理	`WebDriverWait` が必要	`wait_for_url` がシンプル
実行速度	普通	速い
録画機能	なし	✅ 標準搭載
slow_mo 機能	なし	✅ 標準搭載

E2Eテストとは

E2EテストはEnd-to-Endテストの略で、ユーザーが実際に操作する一連の流れをそのまま自動化してテストする手法です。単体テスト・結合テストと異なり、ブラウザを実際に操作して「ログイン → 商品選択 → 購入完了」のような実際のユーザー操作を再現します。

単体テスト：関数・メソッド単体が正しく動くかを確認
結合テスト：複数のモジュールを組み合わせた動作を確認
E2Eテスト：ユーザー操作の全フローをブラウザ経由で確認 ← 今回はこれ

E2Eテストはリリース前の最終確認や、デプロイのたびに基本フローが壊れていないかを自動チェックする回帰テストとして特に効果を発揮します。

今回テストするサイト（SauceDemo）

SauceDemoはSeleniceLabsが提供するE2Eテスト練習用のデモECサイトです。ログイン・商品一覧・カート・チェックアウトなどECサイトの基本機能が揃っており、テスト自動化の練習に最適な環境です。

ユーザー名	パスワード	特徴
`standard_user`	`secret_sauce`	通常ユーザー（メインフローで使用）
`locked_out_user`	`secret_sauce`	ログイン不可（ネガティブテスト用）
`problem_user`	`secret_sauce`	UI不具合あり
`performance_glitch_user`	`secret_sauce`	レスポンスが意図的に遅い

▲ SauceDemoのログイン画面。テストユーザーとパスワードが画面下部に表示されている

環境構築（Python・Playwright）

インストール

Playwrightのセットアップはコマンド2行で完了します。ChromeDriverの手動管理は一切不要です。

pip install playwright
playwright install chromium

フォルダ構成

今回はシンプルな1ファイル構成です。スクリーンショットは実行時に自動生成されます。

project/
├── test_saucedemo.py       # メインのテストスクリプト
└── screenshots/            # 実行時に自動生成
    ├── ss_01_login_input.png
    ├── ss_02_after_login.png
    ├── ss_03_locked_user_error.png
    └── ...

💡 Tip：screenshots/ フォルダはスクリプト実行時に os.makedirs() で自動作成されます。事前に手動で作成する必要はありません。

テストコード解説

コードの主要部分をピックアップして、初心者向けに1行ずつ丁寧に解説します。「コードは読めるけど何をしているのかわからない」という部分をなくすのが目的です。

① フォームへの入力：fill()

page.fill("#user-name", "standard_user")
page.fill("#password", "secret_sauce")

fill() は入力フォームに文字を入力するPlaywrightのメソッドです。#user-name はログイン画面のユーザー名フィールドのCSSセレクタで、HTMLの id="user-name" を指しています。Seleniumの send_keys() に相当しますが、フィールドのクリアと入力を自動でまとめてやってくれます。

▲ 誤ったユーザー名・パスワードを入力した場合のエラー表示（TC-03）

② ボタンのクリック：click()

page.click("#login-button")

click() は指定したセレクタの要素をクリックするメソッドです。#login-button はログインボタンのIDです。Playwrightは要素が表示・クリック可能になるまで自動で待機してからクリックしてくれるため、Seleniumのように明示的な待機処理を書く必要がありません。

③ ページ遷移の待機：wait_for_url()

page.wait_for_url("**/inventory.html", timeout=8000)

wait_for_url() はURLが指定のパターンに変わるまで待機するメソッドです。** はワイルドカードでドメイン部分を省略できます。timeout=8000 は8秒以内に遷移しなければタイムアウトエラーを発生させる設定です。Seleniumの WebDriverWait + expected_conditions の組み合わせがこの1行で書けます。

④ 要素の絞り込み：filter()

item = page.locator(".inventory_item").filter(has_text="Sauce Labs Backpack")
item.locator("button").click()

locator() で要素を取得し、filter(has_text=...) で特定のテキストを含む要素だけに絞り込みます。商品名で対象アイテムを特定してから、その中のボタンをクリックする流れです。複数の商品が並ぶリスト画面での操作に非常に便利なパターンです。

⑤ slow_mo で動作をスローモーションにする

browser = p.chromium.launch(
    headless=False,
    slow_mo=800,   # 各操作を800ms遅らせる
)

slow_mo はPlaywright独自のオプションで、各操作の間にミリ秒単位の遅延を挿入します。デバッグ時や動作確認時に何が起きているかが目で追えて非常に便利です。CI/CD環境では slow_mo=0（デフォルト）、ローカル確認時は slow_mo=800 のように使い分けるのが実務のポイントです。

テスト実行方法

実行コマンド

python test_saucedemo.py

💡 Tip：ヘッドレスモード（ブラウザ非表示）で実行したい場合は、コード内の headless=False を headless=True に変更してください。CI/CD環境では True が推奨です。

テスト結果

実行するとターミナルにセクションごとの結果がリアルタイムで流れ、最後に全テストのサマリーが表示されます。スクリーンショットは screenshots/ フォルダに自動保存されます。

==================================================
  SauceDemo Automated Test Suite [Playwright]
  Executed: 2025-07-01 10:00:00
==================================================

──────────────────────────────────────────────────
  TC-02: Login Failure - Locked User
──────────────────────────────────────────────────
  Error message: Epic sadface: Sorry, this user has been locked out.
    📸 screenshots/ss_03_locked_user_error.png

──────────────────────────────────────────────────
  TC-09: Order Completion
──────────────────────────────────────────────────
  Completion message: Thank you for your order!
    📸 screenshots/ss_10_order_complete.png

==================================================
  Test Result Summary
==================================================
  ✅ PASS  TC-02: Locked User Login Failure
           → Epic sadface: Sorry, this user has been locked out.
  ✅ PASS  TC-03: Wrong Password Login Failure
           → Epic sadface: Username and password do not match...
  ✅ PASS  TC-01: Login Success
           → //www.saucedemo.com/inventory.html
  ✅ PASS  TC-04: Product List Display (6 items)
           → 6 items displayed
  ✅ PASS  TC-05: Add 2 Items to Cart
           → Badge=2
  ✅ PASS  TC-06: Cart Contents Verification
           → Cart=2 / Added=2
  ✅ PASS  TC-07: Checkout Information Input
           → //www.saucedemo.com/checkout-step-two.html
  ✅ PASS  TC-08: Order Summary Verification
           → 2 items / Total: $58.29
  ✅ PASS  TC-09: Order Completion
           → Thank you for your order!
  ✅ PASS  TC-10: Logout
           → Redirected to login page
──────────────────────────────────────────────────
  Total: 10   ✅ 10 Passed   ❌ 0 Failed
  Result: ✅ All Tests PASSED 🎉
==================================================

全10ケースがPASSすれば成功です。スクリーンショットも screenshots/ フォルダに11枚自動保存されているはずです。

▲ カートに2商品が正しく追加されていることを確認（TC-06）

▲ 注文サマリー画面。商品数・小計・税・合計金額を自動検証（TC-08）

▲ 「Thank you for your order!」が表示され注文完了を確認（TC-09）

さらに発展させるアイデア

⚡ pytest化して並列実行

pytest-playwright と組み合わせれば並列実行・パラメータ化が簡単に実現できます。

📹 動画録画機能

Playwrightには標準で録画機能があります。record_video_dir を設定するだけでテスト全体を動画保存できます。

📊 Allureレポート連携

allure-pytest を使えばスクリーンショット付きの見やすいHTMLレポートを自動生成できます。

🤖 CI/CD連携

GitHub ActionsやJenkinsに組み込んで、PRごとにE2Eテストを自動実行する品質ゲートを構築できます。

まとめ

この記事では、PlaywrightとPythonを使ってSauceDemoのログイン〜注文完了までのE2Eテストを自動化する方法を解説しました。

ポイント	内容
テストケース	ネガティブ2件＋メインフロー8件計10ケース
待機処理	`wait_for_url` でシンプルかつ確実にページ遷移を待機
スクリーンショット	全ケースで自動保存・ファイル名でどの画面かが一目でわかる
サマリー出力	results リストで全ケースの合否を一括管理・表示
実行モード	`headless` / `slow_mo` でローカル・CI環境を使い分け