Estoy tratando de automatizar la carga de una imagen en imgur usando Puppeteer. Implementé con éxito la carga, pero ahora quiero obtener la URL de la imagen sin procesar de la imagen cargada.
Para hacer eso, inspeccioné el html y descubrí que la imagen cargada se muestra en un div que tiene el siguiente marcado.
<div class="PostContent-imageWrapper-rounded"> <img src="https://i.imgur.com/ZOQgT6A.png"> </div>Por lo tanto, para obtener eso, escribí un código de titiritero de la siguiente manera.
const browser = await puppeteer.launch({ headless: false, args: ['--no-sandbox', '--disable-setuid-sandbox'] }); const page = await browser.newPage(); await page.goto(request.query.url); let imgPath = nanoid() + ".png" await page.screenshot({ path: imgPath }); // imgur image upload const pg = await browser.newPage(); pg.on("console", (consoleObj) => { if (!['warning','error'].includes(consoleObj.type())) { console.log(consoleObj.text()); } }) await pg.goto("https://imgur.com/upload"); const elementHandle = await pg.$("input[type=file]"); await elementHandle.uploadFile(imgPath); await pg.waitForTimeout(5000) await pg.waitForSelector('.PostContent-imageWrapper-rounded') let imgSrc = await pg.evaluate(function(){ let dd = "undefined"; while (dd === "undefined" || dd[0] === "undefined"){ dd = document.getElementsByClassName("PostContent-imageWrapper-rounded") } return dd[0].firstChild.src // getting different errors time to time }) console.log(imgSrc) await browser.close(); fs.unlink(imgPath, (err) => { if (err) { console.error(err) return } })Sin embargo, este código falla en la línea indicada por un comentario, arrojando el siguiente error.
La evaluación falló: TypeError: no se pueden leer las propiedades de undefined (leyendo 'firstChild')\n en puppeteer_evaluation_script :3:18
Pero cuando ejecuto el mismo código JS dentro de la función de evaluate , en el navegador, funciona y devuelve la URL sin procesar de la imagen. Así que estoy realmente frustrado acerca de por qué esto no funciona.
¿Puede darme algunas sugerencias para superar este problema y copiar la URL de la imagen sin procesar sin problemas? Gracias por tu tiempo.
let dd = "undefined"; while (dd === "undefined" || dd[0] === "undefined"){ dd = document.getElementsByClassName("PostContent-imageWrapper-rounded") }Este bucle bloquea el bucle de eventos y evita que el DOM se actualice. Así que tal vez intente esto en su lugar:
await pg.waitForSelector('.PostContent-imageWrapper-rounded > img'); let imgSrc = await pg.evaluate(function(){ let img = document.querySelector('.PostContent-imageWrapper-rounded > img'); return img.src; }); console.log(imgSrc);