Playwright実践編：基本操作を実践してみる

プログラミング
2024.12.20

概要

Webスクレイピングをどこにでも繰り返しテストするのは、迷惑が掛かる場合があります。
テスト用のページを作ったのでこちらで、Playwrightを使ったコードを書いて試してみてください。

スクレイピングテストページ
スクレイピングの動作確認用テストページ。隠しテキストやリンクの取得などを気軽に試せます。
task.x0.com

以下がテストページのコードです。

<!DOCTYPE html>
<html lang=“ja”>
<head>
    <meta charset=“UTF-8”>
    <meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
    <meta name=“robots” content=“noindex”>
    <title>スクレイピングテストページ</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .container {
            margin-bottom: 20px;
        }
        .hidden-text {
            display: none;
        }
    </style>
</head>
<body>
    <h1>スクレイピングテストページ</h1>
    <div class=“container”>
        <label for=“textInput”>テキスト入力:</label>
        <input type=“text” id=“textInput” placeholder=“ここに入力してください”>
        <button id=“submitButton”>送信</button>
    </div>
    <div class=“container”>
        <p id=“paragraph”>このテキストを取得することができます。</p>
        <a href=“https://task.x0.com” id=“exampleLink” target=“_blank”>リンクはこちら</a>
    </div>
    <div class=“container”>
        <ul id=“itemList”>
            <li class=“item”>アイテム 1</li>
            <li class=“item”>アイテム 2</li>
            <li class=“item”>アイテム 3</li>
        </ul>
    </div>
    <div class=“container”>
        <button id=“showButton”>隠されたテキストを表示</button>
        <p class=“hidden-text” id=“hiddenText”>これは隠されていたテキストです。</p>
    </div>
    <script>
        document.getElementById(‘showButton’).addEventListener(‘click’, function() {
            const hiddenText = document.getElementById(‘hiddenText’);
            hiddenText.style.display = ‘block’;
        });
    </script>
</body>
</html>

 

１．基本なデータの取得

基本的な、データの取得とWebページの操作を試しましょう。

  1. “このテキストを取得することができます。”というテキストを取得しましょう。
  2. “https://task.x0.com”というリンクを取得しましょう。
  3. リストの要素”アイテム1″、”アイテム２”、”アイテム３”を取得しましょう。

コード例

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    # ブラウザの起動
    browser = p.chromium.launch(headless=False)
    context = browser.new_context()
    page = context.new_page()

    # ローカルHTMLファイルを開く
    page.goto("https://task.x0.com/playwright-test241221.html")

    # パラグラフテキストの取得
    paragraph = page.text_content("#paragraph")
    print("パラグラフテキスト:", paragraph)

    # リンクの取得
    link = page.get_attribute("#exampleLink", "href")
    print("リンクURL:", link)

    # リストアイテムの取得
    items = page.query_selector_all(".item")
    item_texts = [item.text_content() for item in items]
    print("アイテムリスト:", item_texts)

    browser.close()

 

page.text_content("#paragraph")

text_content()は、html内のテキストを取得します。

page.get_attribute("#exampleLink", "href")

page.get_attribute(selector, attribute) は、指定したセレクタに一致する要素の特定の属性値を取得するためのメソッドです。

page.query_selector_all(".item")

page.query_selector_all(selector) は、指定されたセレクタに一致するすべての要素を取得するためのメソッドです。

以下のようなリストが返されます。
[‘アイテム 1’, ‘アイテム 2’, ‘アイテム 3’]

2. 要素の操作

フォームに入力し、ボタンをクリックしてみましょう。

コード例

このコードでは、動作確認のためtkinterでダイアログボックスを表示しています。

import tkinter as tk
from tkinter import messagebox

from playwright.sync_api import sync_playwright

def show_dialog():
    root = tk.Tk()
    root.withdraw()  # メインウィンドウを非表示にする
    messagebox.showinfo("確認", "次のステップに進むにはOKを押してください。")
    root.destroy()

with sync_playwright() as p:
    # ブラウザの起動
    browser = p.chromium.launch(headless=False)
    context = browser.new_context()
    page = context.new_page()
    
    # ローカルHTMLファイルを開く
    page.goto("https://task.x0.com/playwright-test241221.html")
    
    # テキストボックスに入力
    show_dialog()
    page.fill("#textInput", "Playwrightで入力")
    show_dialog()

    # ボタンクリック
    page.click("#submitButton")
    print("送信ボタンをクリックしました。")

    # ボタンクリック後に3秒待機
    page.wait_for_timeout(3000)

    # 隠されたテキストの表示
    show_dialog()
    page.click("#showButton")
    show_dialog()
    print("隠されたテキストを表示しました。")

    # テキストを取得して出力
    page.wait_for_timeout(1000)
    hidden_text = page.text_content("#hiddenText")
    print("隠されたテキスト:", hidden_text)

    browser.close()

 

page.fill("#textInput", "Playwrightで入力")

page.fill(selector, value) は、指定したセレクタに一致する入力フィールドにテキストを入力するためのメソッドです。

page.click("#submitButton")

page.click(selector) は、指定したセレクタに一致する要素をクリックするためのメソッドです。

 

3. スクリーンショットの保存

Webページ全体のスクリーンショットを取ってください。

コード例

from playwright.sync_api import sync_playwright

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

    page.goto("https://task.x0.com/playwright-test241221.html")

    # スクリーンショットを保存
    page.screenshot(path="screenshot.png")
    print("スクリーンショットを保存しました。")

    browser.close()

 

page.screenshot(path="screenshot.png")

page.screenshot(path=file_path) は、現在表示されているページのスクリーンショットを保存するためのメソッドです。

特定の要素だけをキャプチャ: 要素単位のスクリーンショットには、locator.screenshot() を使用します。

element = page.locator("#exampleLink")
element.screenshot(path="element_screenshot.png")

 

まとめ

以下のリンク、前回の記事で解説した部分も多かったので物足りなかったでしょうか。

Playwright実践編：基本操作を実践してみる
概要Webスクレイピングをどこにでも繰り返しテストするのは、迷惑が掛かる場合があります。テスト用のページを作ったのでこちらで、Playwrightを使ったコードを書いて試してみてください。以下がテストページのコードです。<!DOCTYPE ...
goro-bizaid.com
2024.12.20

引き続きいろんなパターンのWebスクレイピングを例に解説をする予定です。

お楽しみに。

 

Commnts