QAエンジニア｜WindowsでPlaywrightの画面操作を録画→Pythonコード化→実行する手順

QAエンジニア
2025.08.29

この記事でできること

  • コマンドプロンプトから Playwright Codegen を起動して、ブラウザ操作を記録し、自動で Pythonコード を生成
  • 生成したスクリプトを そのまま実行 して動作確認
  • ログインが必要なサイトの録画で使える保存済みログイン（Storage State）の活用
  • セレクタ（要素の指定）のつまずき回避コツとトラブルシューティング

前提：Playwright（Python）がインストール済み／ブラウザも playwright install で導入済み／仮想環境はお好みで。
すべて cmd.exe（コマンドプロンプト）想定の表記です。PowerShellの方は .\.venv\Scripts\Activate.ps1 等に読み替えてください。

ステップ0：作業フォルダを用意

好きな場所に作業用フォルダを作り、そこへ移動します。

mkdir C:\qa\playwright-record
cd /d C:\qa\playwright-record

（仮想環境を使う場合）

python -m venv .venv
.\.venv\Scripts\activate

以降のコマンドはこのフォルダで実行します。

ステップ1：サンプルサイトを決める

まずは録画練習に最適な公開デモを使います。例：TodoMVC（Playwright公式デモ）

  • URL：https://demo.playwright.dev/todomvc/

もちろん、実案件のURLに差し替えてOKです。

ステップ2：録画（codegen）を開始する

Python版Playwrightは、playwright コマンドまたは python -m playwright で起動できます。Windows環境の差異を避けるため、確実に動く後者をおすすめします。

python -m playwright codegen --target=python -b=chromium -o src\recorded_todo.py https://demo.playwright.dev/todomvc/
  • --target=python … Pythonコードを生成
  • -b=chromium … Chromiumで起動（webkit や firefox も可）
  • -o src\recorded_todo.py … 生成ファイルの保存先（なければ自動作成されます）
  • 最後のURL … 開始時に開くページ

実行すると、ブラウザ＋Playwright Inspector（小さな操作パネル）が立ち上がります。
以降のあなたの操作がリアルタイムでコード化され、終了時に src\recorded_todo.py として保存されます。

ステップ3：実際に操作して録画する

ブラウザ側で、次のように操作してみましょう（例：Todo登録フロー）。

  1. 「What needs to be done?」の入力欄に Buy milk と入力して Enter
  2. もう一つ Call mom と入力して Enter
  3. チェックボックスで1件完了にする
  4. フィルタ「Active」「Completed」を切り替えてみる

画面右または別ウィンドウに出ている Inspector では、

  • 「Pick locator」で要素を狙って確実なセレクタを選べる
  • 「Assertions」でexpect系の自動アサーションを挿入できる
    などが可能です。テスト“っぽさ”を出したければ、途中で「Assertions → expect to have text」などを追加しておくと、生成コードにアサーションが入ります。

録画が終わったら、ブラウザを閉じるだけでOK。指定した -o のファイルに自動保存されます。

ステップ4：生成されたPythonコードを実行

フォルダ構成はこんな感じになっているはずです。

C:\qa\playwright-record
 ├─ src
 │   └─ recorded_todo.py
 └─ .venv（任意）

そのまま実行します。

python src\recorded_todo.py

うまくいけば、自動でブラウザが立ち上がり、あなたの操作が再現されます。

ステップ5：ログインが必要なサイトを録画するコツ（Storage State）

ログインページの録画は毎回ログインし直すと大変なので、一度ログインした状態を保存して使い回すのが便利です。

5-1. まずはログイン状態を保存しておく

下記のように --save-storage を付けてcodegenを起動し、一度だけログイン操作を記録してブラウザを閉じます。

python -m playwright codegen ^
  --target=python -b=chromium ^
  --save-storage=auth\storage.json ^
  https://example.com/login

auth\storage.json に CookieやLocalStorage が保存されます（機密扱いで管理を）。

5-2. 保存済みログインを使って録画する

次回から、同じ storage.json を読み込んで、ログイン済み状態で開始できます。

python -m playwright codegen ^
  --target=python -b=chromium ^
  --load-storage=auth\storage.json ^
  https://example.com/

5-3. 生成スクリプトに組み込む（例）

もし生成されたスクリプトに反映されていない場合は、最初のコンテキスト作成を下記のように編集します。

from playwright.sync_api import sync_playwright, expect

with sync_playwright() as p:
    browser = p.chromium.launch()
    context = browser.new_context(storage_state="auth/storage.json")  # ★ 追加
    page = context.new_page()
    page.goto("https://example.com/")
    # ...以下、操作...

ステップ6：セレクタ（要素指定）を安定させるコツ

録画直後のコードは動きますが、運用で壊れにくくしておくと安心です。

  • ロールベース（おすすめ）
    get_by_role("button", name="Add") のようにアクセシビリティロールで指定
  • ラベル/プレースホルダー
    get_by_label("Password") / get_by_placeholder("Search")
  • テキスト
    get_by_text("保存")（該当が多いとぶれやすい）
  • data-testid を用意できるなら最強
    page.locator('[data-testid="submit"]')
    → 開発側に data-testid 追加を依頼できるなら、将来の変更に一番強いです
  • nth() の多用は最終手段（並びが変わると壊れやすい）

Inspectorの「Pick locator」で、今その要素に対して最も良いロケータを提案してくれます。録画中に積極的に使いましょう。

付録：よく使う codegen オプション（抜粋）

  • --target=python … Pythonコード生成（既定言語は環境により変わるため明示推奨）
  • -b=chromium|firefox|webkit … ブラウザ指定
  • --load-storage=PATH / --save-storage=PATH … ログイン状態の保存/読み込み
  • --viewport-size=1280,720 … ビューポート固定
  • --lang=ja-JP … 受け入れ言語（サイトの言語切替に影響する場合あり）
  • --geolocation=LAT,LON + --grant-permissions=geolocation … 位置情報が必要なサイト向け

つまずきやすいポイントと対処

  • playwright: command not found
    → python -m playwright codegen ... の形で実行（環境差異を回避）
  • ブラウザが入っていない
    → python -m playwright install（一度だけでOK）
  • 仮想環境未アクティベート
    → .\.venv\Scripts\activate を忘れずに
  • 要素が取れない／不安定
    → Inspectorの「Pick locator」を使ってロール/ラベル/placeholder/testid優先で選ぶ
  • 毎回ログインが発生する
    → --save-storage / --load-storage を使う（上記ステップ5）

サンプル：録画でできあがるコードのイメージ

録画結果は環境・操作次第で異なりますが、概ねこんな構成です。

from playwright.sync_api import sync_playwright, expect

def run():
    with sync_playwright() as p:
        browser = p.chromium.launch()
        context = browser.new_context()
        page = context.new_page()

        page.goto("https://demo.playwright.dev/todomvc/")
        page.get_by_placeholder("What needs to be done?").fill("Buy milk")
        page.get_by_placeholder("What needs to be done?").press("Enter")
        page.get_by_placeholder("What needs to be done?").fill("Call mom")
        page.get_by_placeholder("What needs to be done?").press("Enter")

        # 例: アサーション（Inspectorから追加可能）
        expect(page.get_by_text("2 items left")).to_be_visible()

        context.close()
        browser.close()

if __name__ == "__main__":
    run()

まとめ

  • codegen は、操作→即コード化でとにかく速い
  • InspectorのPick/Assertionsを使えば、壊れにくいロケータとテストらしい検証も自動付与
  • Storage State を使えば、ログイン周りの手間を削減
  • 生成後はそのまま python your_script.py で実行して再現可能
タイトルとURLをコピーしました