Posteriormente a investigar en diferentes repositorios y páginas webs al terminar nos encontramos con la solución que te enseñaremos pronto.
Solución:
creo que puedes usar page.waitForSelector(selector[, options]) función para tal fin.
const puppeteer = require('puppeteer');
puppeteer.launch().then(async browser =>
const page = await browser.newPage();
page
.waitForSelector('#myId')
.then(() => console.log('got it'));
browser.close();
);
Para comprobar las opciones disponibles, consulte el enlace de github.
Si desea asegurarse de que el elemento sea realmente visible, debe usar
page.waitForSelector('#myId', visible: true)
De lo contrario, solo está buscando el elemento en el DOM y no está comprobando la visibilidad.
Tenga en cuenta que todas las respuestas enviadas hasta hoy son incorrectas
Porque responde por un elemento si Existir o Localizadobut NOTVisible o Mostrado
La respuesta correcta es verificar el tamaño o la visibilidad de un elemento usando page.waitFor() o page.waitForFunction()consulte la explicación a continuación.
// wait until present on the DOM
// await page.waitForSelector( css_selector );
// wait until "display"-ed
await page.waitForFunction("document.querySelector('.btnNext') && document.querySelector('.btnNext').clientHeight != 0");
// or wait until "visibility" not hidden
await page.waitForFunction("document.querySelector('.btnNext') && document.querySelector('.btnNext').style.visibility != 'hidden'");
const btnNext = await page.$('.btnNext');
await btnNext.click();
Explicación
El elemento que existe en el DOM de la página no siempre es visible si tiene una propiedad CSS display:none o visibility:hidden por eso usando page.waitForSelector(selector) no es buena idea, veamos la diferencia en el fragmento de abajo.
function isExist(selector)
let el = document.querySelector(selector);
let exist = el.length != 0 ? 'Exist!' : 'Not Exist!';
console.log(selector + ' is ' + exist)
function isVisible(selector)
let el = document.querySelector(selector).clientHeight;
let visible = el != 0 ? 'Visible, ' + el : 'Not Visible, ' + el;
console.log(selector + ' is ' + visible + 'px')
isExist('#idA');
isVisible('#idA');
console.log('=============================')
isExist('#idB')
isVisible('#idB').bd border: solid 2px blue;
#idB, visible element
en el fragmento encima de la función isExist() es simular
page.waitForSelector('#myId');
y podemos ver mientras corremos isExist() para ambos elementos #idA un #idB es retorno existe.
pero al correr isVisible() la #idA no se ve ni se muestra.
Y aquí otros objetos para verificar si un elemento se muestra o usa la propiedad CSS display.
scrollWidth
scrollHeight
offsetTop
offsetWidth
offsetHeight
offsetLeft
clientWidth
clientHeight
por estilo visibility verificar con no hidden.
nota: no soy bueno en Javascript o inglés, siéntase libre de mejorar esta respuesta.
Sección de Reseñas y Valoraciones
Si te animas, eres capaz de dejar un escrito acerca de qué le añadirías a este artículo.