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

Playwrightの環境構築はしてみたものの、操作するためのコードが書けない、ということはありませんか？

この記事を読むと、こんなことができます。

Playwright Codegen の起動
ブラウザ操作を記録し、自動で Pythonコードを生成
生成したスクリプトをそのまま実行して動作確認

Playwright Codegenってなに？
0. 前提条件
1. 作業フォルダを用意
2. 仮想環境を作成して起動
3. サンプルサイトを用意
4. 録画（codegen）を開始する
5. 記録したスクリプトを実行
サンプル：録画でできあがるコードのイメージ
補足1. TodoMVC（Playwright公式デモ）の使い方
補足2. Inspectorについて
まとめ

Playwright Codegenってなに？

Playwright Codegen（コードジェネ）とは、ブラウザ操作（クリックや入力など）を記録し、
自動的にテストコード（Python / JavaScript / TypeScript など）を生成する機能です。

コードを書かなくても、ブラウザ操作をそのままテストスクリプトに変換できるので、
複雑な操作の自動化やスクリプト作成が効率化できます。

0. 前提条件

Playwright（Python）がインストール済み
ブラウザも playwright install で導入済み

Playwrightのインストールについては下記記事を参考にしてください。

1. 作業フォルダを用意

任意の場所に作業フォルダを作成します。
例：

C:\qa\playwright-record

以降の操作はこのフォルダを使うので移動します。

cd /d C:\qa\playwright-record

2. 仮想環境を作成して起動

python -m venv .venv

.\.venv\Scripts\activate

プロンプト先頭に (venv) が付けば仮想環境が有効化されています。

3. サンプルサイトを用意

まずは公式デモ「TodoMVC」を使って練習します。

例：TodoMVC（Playwright公式デモ）

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

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

4. 録画（codegen）を開始する

Python版Playwrightの起動方法は2つあります。

playwright コマンド
python -m playwright

Windows環境の差異を避けるため「2. python -m playwright」がおすすめです。

Playwright のコードジェネレーターを起動します。

python -m playwright codegen https://demo.playwright.dev/todomvc/ --target=python -b chromium -o recorded_test.py

python -m playwright codegen
→ Playwright の「コードジェネレーター」を起動します。
https://demo.playwright.dev/todomvc/
→操作するサイトのURLを指定します。
--target=python
→ 出力するコードの言語を指定。ここでは Python 用のコードを生成します。
（指定しないと JavaScript で出力されます）
-b chromium
→ 使用するブラウザを指定。ここでは Playwright 内蔵の Chromium が起動します。
他にも -b firefox や -b webkit が選べます。
-o
→ 「操作を記録してファイルに保存する」オプションです。
-o recorded_test.py のようにファイル名を続けて書くと、そのファイルにコードが保存されます。
-o だけだとエラーになるので、必ずファイル名をセットにします。
指定したファイルがが存在しなければ新規作成されます。
すでに存在していれば上書き保存されます。

実行するとブラウザ＋Inspector（操作パネル）が立ち上がり、
操作がリアルタイムでコード化されます。
録画が終わったらブラウザを閉じれば、自動的に recorded_test.py に保存されます。

5. 記録したスクリプトを実行

生成された recorded_test.py を Pythonスクリプトとして実行します。

python src\recorded_test.py

自動でブラウザが立ち上がり、操作が再現されます。

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

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

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()