PlaywrightとScrapelessを使用してiframeをスクレイピングする方法

python -m pip install "playwright==1.59.0"

import os
from urllib.parse import urlencode
from playwright.sync_api import sync_playwright

params = urlencode({
    "token": os.environ["SCRAPELESS_API_KEY"],
    "sessionTTL": 120,
    "proxyCountry": "US",
})
cdp_url = f"wss://browser.scrapeless.com/api/v2/browser?{params}"

with sync_playwright() as p:
    browser = p.chromium.connect_over_cdp(cdp_url)
    page = browser.contexts[0].pages[0]
    # 以下のフレームステップを続ける。
    browser.close()

TARGET_URL = "https://www.selenium.dev/selenium/web/iframes.html"

page.goto(TARGET_URL, wait_until="domcontentloaded")
page.wait_for_selector("#iframe1")
page.wait_for_timeout(500)
print("親のタイトル:", page.title())
print("親のメールマッチ数:", page.locator("#email").count())

親のタイトル: このページにはiframeがあります
親のメールマッチ数: 0

print("フレーム数:", len(page.frames))
for index, frame in enumerate(page.frames):
    print(index, repr(frame.name), frame.url, frame.title())

フレーム数: 2
0 '' https://www.selenium.dev/selenium/web/iframes.html このページにはiframeがあります
1 'iframe1-name' https://www.selenium.dev/selenium/web/formPage.html ここから出発します

named_frame = page.frame(name="iframe1-name")
url_frame = next(
    frame for frame in page.frames
    if frame.url.endswith("/formPage.html")
)

assert named_frame is url_frame
print("選択したフレーム:", url_frame.name)
print("選択したタイトル:", url_frame.title())

email = url_frame.locator("#email")
selected = url_frame.locator("#multi option:checked").evaluate_all(
    "options => options.map(option => option.value)"
)

record = {
    "frame_name": url_frame.name,
    "frame_url": url_frame.url,
    "frame_title": url_frame.title(),
    "email_inputs": email.count(),
    "selected_values": selected,
}

print("メール入力数:", record["email_inputs"])
print("選択した値:", record["selected_values"])

メール入力数: 1
選択した値: ['eggs', 'sausages']

frame_ui = page.frame_locator("#iframe1")
print("FrameLocatorによるメール数:", frame_ui.locator("#email").count())

from playwright.sync_api import sync_playwright

TARGET_URL = "https://www.selenium.dev/selenium/web/iframes.html"

with sync_playwright() as p:
    browser = p.chromium.launch(
        executable_path="/usr/bin/google-chrome",
        headless=True,
    )
    page = browser.new_page()
    page.goto(TARGET_URL, wait_until="domcontentloaded")
    page.wait_for_selector("#iframe1")
    page.wait_for_timeout(500)

    child = next(
        frame for frame in page.frames
        if frame.url.endswith("/formPage.html")
    )
    selected = child.locator("#multi option:checked").evaluate_all(
        "options => options.map(option => option.value)"
    )
    frame_locator_count = page.frame_locator("#iframe1").locator("#email").count()

    assert page.locator("#email").count() == 0
    assert child.name == "iframe1-name"
    assert child.locator("#email").count() == 1
    assert selected == ["eggs", "sausages"]
    assert frame_locator_count == 1

    print("親のタイトル:", page.title())
    print("親のメール一致:", page.locator("#email").count())
    print("フレーム数:", len(page.frames))
    print("子の名前:", child.name)
    print("子のURL:", child.url)
    print("子のタイトル:", child.title())
    print("子のメール一致:", child.locator("#email").count())
    print("選択した値:", selected)
    print("FrameLocatorのメール一致:", frame_locator_count)
    browser.close()

{
  "parent_email_matches": 0,
  "frame_count": 2,
  "frame_name": "iframe1-name",
  "frame_url": "https://www.selenium.dev/selenium/web/formPage.html",
  "frame_title": "ここから出発します",
  "child_email_matches": 1,

出力は四つの事実を確立します：親ドキュメントはメールフィールドを見ることができず、意図された子は名前とURLで特定でき、子のロケーターは一致する入力を一つ見つけ、選択されたフォーム値はそのフレームの内部から来ています。ページに複数の組み込み文書が含まれている場合は、抽出した各レコードと共にフレーム名とURLを保持してください。

## クロスオリジン iframe と同一オリジンポリシー

`document.querySelector("iframe").contentDocument`のようなブラウザのJavaScriptは、親と子のオリジンが異なるとブロックされることがあります。Playwrightはブラウザ自動化プロトコルと通信し、子をフレームとして公開するため、クロスオリジンドキュメント内の要素を見つけて操作することができます。

それはすべての境界を取り除くわけではありません。サンドボックス属性はスクリプトを制限することがあり、ナビゲーションは読む際にフレームを置換することがあります。また、ブラウザ拡張やPDFビューワは通常のHTMLドキュメントを公開しない場合があります。抽出契約を記述する前に、実際のフレームツリーを調査してください。

## 動的およびネストされたフレーム

### 添付とナビゲーションを待つ

iframe要素は、その子が最終URLに到達する前に現れることがあります。子のロケーターを待つか、フレームナビゲーションイベントを調査してください。有用な準備マーカーはデータを持つ要素であり、単に親の`<iframe>`タグではありません。

### デタッチを期待する

シングルページアプリは時々iframeを削除して再作成します。保存されたフレームオブジェクトはデタッチされることがあります。UIトランジション後に古いオブジェクトが生き残ると仮定するのではなく、その安定した名前、URL、またはオーナー要素から再度フレームを解決してください。

### 意図的にネストされたフレームを横断する

ネストされたコンテキストでは、`frame.child_frames`を調査するか、FrameLocatorsをチェーンします。同じ名前のウィジェットが混同されないように、出力の由来に親子のパスを保持してください。

## 結論

iframeスクレイピングは適切なドキュメントを選択することから始まります。フレームツリーを列挙し、安定した名前またはURLで子を選択し、その内部の要素を待ち、抽出したレコードと共にフレームメタデータを保持します。検索を簡潔にするためにFrameLocatorを使用し、アイデンティティ、ナビゲーション、またはネストされたフレーム制御が必要な場合にはFrameオブジェクトを使用します。ワークフローをScrapelessに移行することで、ブラウザの作成が変わりますが、フレームのロジックは変わりません。

## iframeからデータを抽出する準備はできましたか？

Scrapelessコミュニティのブラウザベースの抽出ワークフローを構築している開発者に参加してください：[Discord](https://discord.gg/VU2vtbq7Q2) · [Telegram](https://t.me/scrapeless)。

[Scrapelessから始める](https://app.scrapeless.com/passport/login/?utm_source=website&utm_medium=blog&utm_campaign=scrapingbrowser&utm_term=iframe-web-scraping-scraping-browser)、[Scrapelessの価格を確認する](https://www.scrapeless.com/ja/pricing?utm_source=website&utm_medium=blog&utm_campaign=scrapingbrowser&utm_term=iframe-web-scraping-scraping-browser)、そして[CDPが公開する内容を読む](https://www.scrapeless.com/ja/blog/what-is-chrome-devtools-protocol?utm_source=website&utm_medium=blog&utm_campaign=scrapingbrowser&utm_term=iframe-web-scraping-scraping-browser)前に、同じフレームワークフローをホスティングされたブラウザに移行してください。

## FAQ

**Q: なぜ親ページがiframe内の要素を見つけられないのですか？**

iframeは別のドキュメントを所有しています。親ページのロケーターは親のブラウジングコンテキストを検索します。子のフレームを選択するか、最初にFrameLocatorを使用してください。

**Q: 配列インデックスでフレームを選択すべきですか？**

いいえ。ページがウィジェットや広告を追加すると、フレームの順序が変わります。安定した名前、URLパターン、または所有するiframe要素を優先し、あいまいな一致では失敗してください。

**Q: FrameとFrameLocatorの違いは何ですか？**

Frameはドキュメントのアイデンティティ、URL、名前、ライフサイクル、および子フレームを公開します。FrameLocatorは特定のiframe要素を介して簡潔なロケーター操作を提供します。

**Q: Playwrightはクロスオリジンのiframeにアクセスできますか？**

はい、Playwrightは同一オリジンポリシーのためにページ内のJavaScriptが`contentDocument`を読み取れない場合でも、ブラウザプロトコルを介してクロスオリジンの子フレームを自動化できます。

**Q: 動的に読み込まれたiframeを待つにはどうすればいいですか？**

フレーム内のデータを持つロケーターや知られた最終フレームのURLを待ってください。iframe要素の存在のみでは、その子ドキュメントがナビゲーションを完了したことを証明しません。

**Q: フレームがデタッチされたらどうなりますか？**

保存されたフレームはもはやライブドキュメントを表しません。ページトランジション後に安定した証拠から交換フレームを再度解決してください。

**Q: iframeスクレイピングは合法ですか？**

埋め込みはターゲットのデータ権利や条件を変更しません。サイトと埋め込まれたプロバイダーのポリシーを確認し、適用される場合は<a href="https://datatracker.ietf.org/doc/html/rfc9309" rel="nofollow"><strong>ロボット指令</strong></a>を尊重し、ボリュームを制限し、敏感または商業的な収集の場合は法的アドバイスを求めてください。