Cómo raspar iframes con Playwright y Scrapeless

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]
    # Continúa con los pasos de marco a continuación.
    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("título del padre:", page.title())
print("coincidencias de correo del padre:", page.locator("#email").count())

título del padre: Esta página tiene iframes
coincidencias de correo del padre: 0

print("número de marcos:", len(page.frames))
for index, frame in enumerate(page.frames):
    print(index, repr(frame.name), frame.url, frame.title())

número de marcos: 2
0 '' https://www.selenium.dev/selenium/web/iframes.html Esta página tiene iframes
1 'iframe1-name' https://www.selenium.dev/selenium/web/formPage.html Salimos de aquí

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("marco seleccionado:", url_frame.name)
print("título seleccionado:", url_frame.title())

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

record = {
    "nombre_del_marco": url_frame.name,
    "url_del_marco": url_frame.url,
    "título_del_marco": url_frame.title(),
    "entradas_de_correo_electrónico": email.count(),
    "valores_seleccionados": selected,
}

print("entradas de correo electrónico:", record["entradas_de_correo_electrónico"])
print("valores seleccionados:", record["valores_seleccionados"])

entradas de correo electrónico: 1
valores seleccionados: ['huevos', 'salchichas']

frame_ui = page.frame_locator("#iframe1")
print("correo a través de FrameLocator:", frame_ui.locator("#email").count())

from playwright.sync_api import sync_playwright

URL_OBJETIVO = "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(URL_OBJETIVO, 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 == ["huevos", "salchichas"]
    assert frame_locator_count == 1

    print("título del padre:", page.title())
    print("coincidencias de correo en el padre:", page.locator("#email").count())
    print("número de marcos:", len(page.frames))
    print("nombre del hijo:", child.name)
    print("URL del hijo:", child.url)
    print("título del hijo:", child.title())
    print("coincidencias de correo en el hijo:", child.locator("#email").count())
    print("valores seleccionados:", selected)
    print("coincidencias de correo en FrameLocator:", frame_locator_count)
    browser.close()

{
  "coincidencias_de_correo_en_el_padre": 0,
  "número_de_marcos": 2,
  "nombre_del_marco": "iframe1-name",
  "url_del_marco": "https://www.selenium.dev/selenium/web/formPage.html",
  "título_del_marco": "Salimos de aquí",
  "coincidencias_de_correo_en_el_hijo": 1,

La salida establece cuatro hechos: el documento principal no puede ver el campo de correo electrónico, el hijo previsto es identificable por nombre y URL, el localizador del hijo encuentra una entrada coincidente, y los valores de formulario seleccionados provienen de dentro de ese marco. Mantenga el nombre y la URL del marco con cada registro extraído cuando una página contenga múltiples documentos incrustados.

## Iframes de origen cruzado y la política de mismo origen

El JavaScript del navegador, como `document.querySelector("iframe").contentDocument`, puede estar bloqueado cuando los orígenes del padre y del hijo difieren. Playwright se comunica con el protocolo de automatización del navegador y expone al hijo como un marco, para que pueda localizar e interactuar con elementos en documentos de origen cruzado.

Eso no elimina todos los límites. Los atributos de sandbox pueden restringir scripts, la navegación puede reemplazar un marco mientras lo estás leyendo, y las extensiones del navegador o los visores de PDF pueden no exponer un documento HTML ordinario. Inspeccione el árbol de marcos real antes de escribir el contrato de extracción.

## Marcos dinámicos y anidados

### Esperar por adjuntos y navegación

Un elemento iframe puede aparecer antes de que su hijo haya alcanzado la URL final. Espere un localizador de hijo o inspeccione los eventos de navegación del marco; el marcador de preparación útil es el elemento que lleva datos, no meramente la etiqueta `<iframe>` padre.

### Esperar desvinculación

Las aplicaciones de una sola página a veces eliminan y recrean iframes. Un objeto Frame guardado puede volverse desvinculado. Resuelva el marco nuevamente desde su nombre estable, URL o elemento propietario después de la transición de la UI en lugar de asumir que el viejo objeto sobrevive.

### Recorrer marcos anidados deliberadamente

Para contextos anidados, inspeccione `frame.child_frames` o encadene FrameLocators. Mantenga la ruta padre-hijo en la procedencia de la salida para que dos widgets con el mismo nombre no puedan confundirse.

## Conclusión

La extracción de iframes comienza eligiendo el documento correcto. Enumere el árbol del marco, seleccione al hijo por nombre o URL estable, espere un elemento dentro de él y mantenga los metadatos del marco con el registro extraído. Use FrameLocator para acciones concisas y objetos Frame cuando necesite identidad, navegación o control de marcos anidados. Mover el flujo de trabajo a Scrapeless cambia la creación del navegador, no la lógica del marco.

## ¿Listo para extraer datos de iframes?

Únase a los desarrolladores que construyen flujos de trabajo de extracción basados en navegador en la comunidad de Scrapeless: [Discord](https://discord.gg/VU2vtbq7Q2) · [Telegram](https://t.me/scrapeless).

[Comience con Scrapeless](https://app.scrapeless.com/passport/login/?utm_source=website&utm_medium=blog&utm_campaign=scrapingbrowser&utm_term=iframe-web-scraping-scraping-browser), revise [precios de Scrapeless](https://www.scrapeless.com/es/pricing?utm_source=website&utm_medium=blog&utm_campaign=scrapingbrowser&utm_term=iframe-web-scraping-scraping-browser), y lea [lo que expone CDP](https://www.scrapeless.com/es/blog/what-is-chrome-devtools-protocol?utm_source=website&utm_medium=blog&utm_campaign=scrapingbrowser&utm_term=iframe-web-scraping-scraping-browser) antes de mover el mismo flujo de trabajo de marco a un navegador alojado.

## Preguntas frecuentes

**P: ¿Por qué la página principal no puede encontrar un elemento dentro de un iframe?**

El iframe posee un documento separado. Los localizadores de la página principal buscan en el contexto de navegación padre; seleccione el marco hijo o use primero un FrameLocator.

**P: ¿Debo seleccionar un marco por índice de matriz?**

No. El orden de los marcos cambia cuando las páginas añaden widgets o anuncios. Prefiera un nombre estable, un patrón de URL, o el elemento iframe propietario y falle en coincidencias ambiguas.

**P: ¿Cuál es la diferencia entre Frame y FrameLocator?**

Un Frame expone la identidad del documento, URL, nombre, ciclo de vida y marcos hijos. FrameLocator proporciona operaciones de localización concisas a través de un elemento iframe específico.

**P: ¿Puede Playwright acceder a un iframe de origen cruzado?**

Sí, Playwright puede automatizar marcos secundarios de origen cruzado a través del protocolo del navegador incluso cuando el JavaScript en la página no puede leer `contentDocument` debido a la política de mismo origen.

**P: ¿Cómo espero un iframe cargado dinámicamente?**

Espere un localizador que lleve datos dentro del marco o una URL final de marco conocida. La sola presencia del elemento iframe no prueba que su documento hijo haya terminado de navegar.

**P: ¿Qué pasa si el marco está desvinculado?**

El Frame guardado ya no representa un documento vivo. Resuelva el marco de reemplazo nuevamente a partir de evidencia estable después de la transición de la página.

**P: ¿Es legal la extracción de iframes?**

La incrustación no cambia los derechos de datos o términos del objetivo. Revise la política del sitio y del proveedor incrustado, honre las <a href="https://datatracker.ietf.org/doc/html/rfc9309" rel="nofollow"><strong>directivas de robots</strong></a> cuando sea aplicable, mantenga el volumen acotado y busque asesoría legal para colecciones sensibles o comerciales.