1

Estoy haciendo un scraper; para ello, cargo la página a examinar dentro de un <iframe> y accedo a su document para buscar el elemento que me interesa (estoy usando Electron que me permite saltarme ciertos elementos de seguridad).

El asunto es que esa página crea una ventana modal de forma dinámica. Tanto desde el propio Electron como si uso un explorador normal, puedo ver que existe un elemento <input> con un id en concreto. Y siempre con el mismo id, no es generado aleatoriamente.

Sin embargo, en mi código, no consigo localizar dicho <input> en el documento a espiar. Esta captura es lo que veo en las DevTools del propio Electron (el <iframe> ocupa toda la ventana). Claramente, existe un botón con el id que busco:

introducir la descripción de la imagen aquí

En la primera versión de mi código:

class Scraper {
    constructor( id ) {
        this._iframe = document.getElementById( id );
    }

    async get( ref ) {
        const win = await this.loadBaseUrl( Config.url );
        const doc = win.document;

        Scraper.setReference( win, ref );
    }

    async loadBaseUrl( url ) {
        const self = this;

        return new Promise( function( resolve, reject ) {
            self._iframe.src = Config.url;
            self._iframe.onload = function( ev ) {
                resolve( self._iframe.contentWindow );
            };
            self._iframe.onerror = function( ev ) {
                reject( ev );
            }
        } );
    }

    static setReference( win, text ) {
        const doc = win.document;

        const input = doc.getElementById( "ctl00$Contenido$txtRC2" );
        const button = doc.getElementById( "ctl00_Contenido_btnDatos" );

        input.value = text;
        button.click( );
    }
}

No hay forma, al llamar a Scraper.get( ), las variables input y button siempre valen null (pese a que, como dije, si existen los elementos con esos id en la página).

Entonces caí en la cuenta de que el formulario es dinámico; así que añadí un tiempo de espera antes de buscar los elementos (pausé 5 segundos; la página real tarda bastante menos en mostrar la ventana; no tarda ni 1 segundo):

async function sleep( ms ) {
    return new Promise( function( resolve ) {
        setTimeout( resolve, ms );
    } );
}

...
async get( ref ) {
    const win = await this.loadBaseUrl( Config.url );
    const doc = win.document;

    await sleep( 5000 );

    Scraper.setReference( win, ref );
}

El resultado fue el mismo: input y button, ambos, tienen el valor null.

He descartado que sea problema de la advertencia sobre cookies. Tanto en Electron como en un navegador normal, aun sin aceptar ni rechazar las cookies, la página tiene un comportamiento funcional: rellenando el <input>, se realiza la búsqueda.

Nota: La página que estoy intenta escrapear es de un organismo estatal: el buscador oficial del Catastro en España

  • ¿ Qué estoy haciendo mal ?
  • ¿ Como lo soluciono ?
7
  • Te puedo dar unas recomendaciones: (1) Claramente no estas usando la herramienta indicada para resolver el problema, hay librerías para hacer scrapper que lo hace mucho muy sencillo.- (2) El sitio está hecho en ASP.NET hasta donde yo recuerdo las id son autogeneradas y pueden cambiar (a menos que expresamente se hayan puesto como estáticas), lo mejor es que uses otro selector.- (3) quizás es más fácil ir directamente a www1.sedecatastro.gob.es/CYCBienInmueble/…. - (4) Prueba const doc = win.contentWindow.document; o const doc = win.contentDocument
    – Yussef
    Commented el 6 ago. 2023 a las 10:50
  • (1) Pero seguro que no sería tan divertido ;-p (2) He comprobado en varios navegadores que siempre es la misma id (3) La idea es interpretar los resultados de la búsqueda para guardarlos en archivos Excel por paquetes, conteniendo varios resultados.
    – Trauma
    Commented el 6 ago. 2023 a las 10:54
  • (2) El tema de las Id en asp.net no dependen del navegador. Yo hace 10 años que no veo esta tecnología, pero hasta donde recuerdo, tenía que ver con el árbol que generaba, por ejemplo ctl00_Contenido_btnDatos se refiere al botón btnDatos que tiene un padre Contenido que a su vez tiene un padre ctl00, pero resulta que puede existir cierto dinamismo en la creación de los elementos, por que el árbol puede cambiar. Con el auge de JQuery se comenzó a trabajar mucho del lado del cliente y este era un problema frecuenta en aquella época
    – Yussef
    Commented el 6 ago. 2023 a las 11:10
  • Tenes algún error en consola? Commented el 6 ago. 2023 a las 11:26
  • Hola @Trauma, tanto tiempo! Si te fijas en el arbol completo hasta el input vas a poder ver el modal esta dentro de OTRO iframe, por lo que para encontrarlo deberías hacer algo como document.getElementById('div_busc').querySelector('iframe').contentWindow.document.getElementById('ctl00_Contenido_txtRC2')
    – Marcos
    Commented el 6 ago. 2023 a las 11:40

1 respuesta 1

2

Tienes algunos problemas

  • El id es ctl00_Contenido_txtRC2 no ctl00$Contenido$txtRC2
  • EL modal está en un iframe
  • Debes usar contentWindow

Por ejemplo para llegar al input, debes hacer:

win.contentWindow.document.querySelector("iframe").contentWindow.document.getElementById( "ctl00_Contenido_txtRC2" )

Para asegurar que el iframe sea el que debe puedes hacer:

const innerIframeDoc = win.contentWindow.document.querySelector("iframe[src='../CYCBienInmueble/OVCBusqueda.aspx?from=NuevoVisor&pest='")?.contentWindow?.document;

if(innerIframeDoc){
  const input = innerIframeDoc.getElementById( "ctl00_Contenido_txtRC2" );
  const button = innerIframeDoc.getElementById( "ctl00_Contenido_btnDatos" );
}

Y ya que los Id en asp.net son generados de forma dinámica (a menos que explícitamente se haya declarado lo contrario, y eso no lo sabemos). Posiblemente también debamos asegurarnos de llegar correctamente al input y al button

const innerIframeDoc = win.contentWindow.document.querySelector("iframe[src='../CYCBienInmueble/OVCBusqueda.aspx?from=NuevoVisor&pest='")?.contentWindow?.document;

if(innerIframeDoc){
  const input = innerIframeDoc.querySelector("#refcat2 input");
  const button = innerIframeDoc.querySelector("input[type=submit]");
}

Para el caso del input, vamos primero a #refcat2 el cual es un Id estatico, luego obtenemos el primer y unico input que es hijo de él

Para el botón, simplemente input[type=submit], ya que está tecnología (webforms) solo permite un formulario (razón por la cual usaron iframe), entonces cualquier submit nos vale

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.