Playwright実践編：JavaScriptの内部状態を操作する

概要
1. 内部状態とは？
2. テスト用Webページの例
3. Pythonで内部状態を操作するコード
1. コード解説
4. 結果
5. 応用例
7. 注意点
8. まとめ

概要

Playwrightでは、JavaScript（アプリケーション）の内部状態を操作することが可能です。

この記事では、page.evaluate() を使うことによってJavaScriptのコードを実行することができます。
このことによって、イベントを発生させたり内部の状態を変更したりすることができます。

1. 内部状態とは？

内部状態とは、Webアプリケーションが動作中に保持している情報のことです。たとえば、以下のようなデータが含まれます：

ショッピングカート内の商品リスト
ログインユーザーのセッション情報
現在のフィルターや検索条件
アプリケーション全体の設定情報

これらのデータは通常、JavaScriptの変数やオブジェクトとしてページ内に存在しています。
直接HTMLやDOMには表示されないため、通常のスクレイピング手法では取得が難しい場合があります。

2. テスト用Webページの例

以下のHTMLは、JavaScriptの内部状態を管理するオブジェクトを含んだテスト用Webページです。appState というオブジェクトにメッセージとカウントが格納されており、それを表示する仕組みになっています。

下のリンクはテスト用のWebページです。
ご自由にお使いください。

内部状態の操作例

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内部状態の操作例</title>
    <script>
        // 内部状態を定義
        const appState = {
            message: "初期状態のメッセージです。",
            count: 0,
        };

        // メッセージを表示する関数
        function displayMessage() {
            const output = document.getElementById("output");
            output.textContent = `${appState.message} カウント: ${appState.count}`;
        }

        // ページロード時に初期表示
        document.addEventListener("DOMContentLoaded", () => {
            displayMessage();
        });
    </script>
</head>
<body>
    <h1>内部状態の操作例</h1>
    <div id="output" style="margin-top: 20px;font-weight: bold;">
         ここに状態が表示されます。
    </div>
</body>
</html>

テスト用Webページの初期状態

3. Pythonで内部状態を操作するコード

次に、上記のWebページにアクセスし、内部状態を変更して画面を更新するPythonコードを紹介します。

from playwright.sync_api import sync_playwright

def manipulate_internal_state():
    url = "http://task.x0.com/playwright-test241224-01.html"  # テスト用URL
    with sync_playwright() as p:
        browser = p.chromium.launch(headless=False)  # ブラウザを起動
        page = browser.new_page()
        page.goto(url)  # ページにアクセス

        # 内部状態を操作
        page.evaluate("""
            appState.message = "内部状態が変更されました！";
            appState.count += 1;
        """)
        
        page.wait_for_timeout(3000)

        # DOMの更新を反映する関数を呼び出す
        page.evaluate("displayMessage()")

        # 結果を取得
        output = page.inner_text("#output")
        print("取得したデータ:", output)
        
        page.wait_for_timeout(3000)  # 3秒待機

        browser.close()

# 実行
manipulate_internal_state()

コード解説

        page.evaluate("""
            appState.message = "内部状態が変更されました！";
            appState.count += 1;
        """)

page.evaluate(“”” JavaScriptのコード “””) でJavaScriptを実行しデータの書き換えを行っています。

4. 結果

初期状態（ブラウザ表示）

初期状態のメッセージです。 カウント: 0

内部状態変更後（Playwrightで操作）

内部状態が変更されました！ カウント: 1

Pythonコードを実行することで、appState の内部データを変更し、その結果を画面上で反映させることができます。

5. 応用例

1. ショッピングカートの操作

商品リストを追加・削除するために、内部の配列データを操作。
例: cartItems.push({ id: 123, name: "新商品", price: 1000 })

2. 状態依存のデータ取得

JavaScript内の状態に基づいてAPIリクエストを発生させる。
例: fetch() を内部状態をもとに動的に発火。

3. デバッグやテストの支援

特定の内部状態を再現してWebアプリケーションの動作を確認。

7. 注意点

適切な利用:
Webページの内部状態を操作することは、サイトの利用規約に違反する可能性があります。倫理的な利用を心がけましょう。
JavaScriptの知識:
Webページの内部状態を操作するには、JavaScriptの基本的な知識が必要です。

8. まとめ

Playwrightを使えば、JavaScriptで管理されている内部状態を直接操作し、動的なWebページのデータを取得したり変更したりすることが可能です。
この技術は、データ収集やテストにおいて非常に有用ですが、利用には慎重さも求められます。

概要