Estoy tratando de ingresar texto en un campo de entrada usando Titiritero.
async function reddit() { const broswer = await puppeteer.launch({ headless: false }) const page = await broswer.newPage(); const navPromise = page.waitForNavigation({ waitUntil: 'domcontentloaded' }) await page.goto('https://www.reddit.com/r/place/?cx=352&cy=522&px=69') await navPromise; console.log('did i get this far? 1'); await page.click('a._3Wg53T10KuuPmyWOMWsY2F:nth-child(2)') await navPromise; console.log('did i get this far?2 '); await page.keyboard.type('#loginUsername', 'hjello') console.log('did i get this far?3'); } reddit()Obtengo los tres registros de la consola cuando se ejecuta. Puedo verlo hacer clic en el inicio de sesión del nombre de usuario pero no escribe nada. Miré varias preguntas de StackOverflow y probé las respuestas, pero ninguna de ellas escribirá la entrada.
await page.click('a._3Wg53T10KuuPmyWOMWsY2F:nth-child(2)') desencadena un cambio de DOM, pero luego activa inmediatamente .click() en un elemento que podría no estar listo aún, por lo que parece una condición de carrera. Sugiero usar waitForSelector (o waitForNavigation si se activa una navegación, lo que no parece ser el caso aquí).
const navPromise = page.waitForNavigation({waitUntil: 'domcontentloaded'}) se encuentra en una ubicación extraña sobre un goto que ya espera la navegación, luego se await dos veces, lo que no tiene sentido. Una vez que se resuelve una promesa, nunca se volverá a resolver, por lo que la única vez que querrá hacer esto es si necesita acceder nuevamente al valor resuelto, lo que no se aplica aquí. Esperar navegaciones adicionales puede causar un tiempo de espera cuando no se activa una.
Sin embargo, el problema principal parece ser que el selector en el que intenta escribir está dentro de un iframe. Es posible sumergirse en este marco y establecer el valor , pero es mucho más fácil evitar todos los problemas y navegar directamente a la URL del marco de la página de inicio de sesión, iniciar sesión y luego navegar con un goto a cualquier página a la que esté tratando de llegar.
Por ejemplo:
const puppeteer = require("puppeteer"); // ^13.5.1 let browser; (async () => { browser = await puppeteer.launch({headless: false}); const [page] = await browser.pages(); const url = "https://www.reddit.com/login/"; await page.goto(url, {waitUntil: "domcontentloaded"}); await page.waitForSelector("#loginUsername"); await page.type("#loginUsername", "hjello"); await page.type("#loginPassword", "foobar"); await Promise.all([ page.waitForNavigation(), page.click(".AnimatedForm__submitButton"), ]); // navigate to wherever you want with page.goto })() .catch(err => console.error(err)) .finally(() => browser?.close()) ; Tenga en cuenta que cuando selecciona elementos en la consola del navegador a mano para preparar su secuencia de comandos, document.querySelector y funciones similares pueden parecer que funcionan en un marco porque el marco se activa cuando se enfoca en la consola, pero este no será el caso desde la perspectiva del guión, lo que lleva a una gran confusión potencial.