Lo que estoy tratando de lograr es guardar el documento completo con todos los comentarios expandidos. Desafortunadamente, hay múltiples selectores con la misma clase y la mayoría de ellos están ocultos y lo que creo que hace el titiritero es tomar el primer selector encontrado y esperar hasta que sea visible, lo que nunca sucede.
URL: https://www.discoverpermaculture.com/permaculture-masterclass-video-1
const puppeteer = require('puppeteer'); const isElementVisible = async (page, cssSelector) => { let visible = true; await page .waitForSelector(cssSelector, { visible: true, timeout: 2000 }) .catch(() => { visible = false; }); if(visible)console.log('Selector '+cssSelector+'visible!'); return visible; }; async function run () { let browser = await puppeteer.launch({headless: true, defaultViewport: null, args: ['--window-size=1920,10000',],}); const page = await browser.newPage(); const fs = require('fs'); await page.goto('https://www.discoverpermaculture.com/permaculture-masterclass-video-1'); await page.waitForTimeout(4000) const elementHandle = await page.waitForSelector('iframe'); const frame = await elementHandle.contentFrame(); //loading all the comments (works because there's only one 'a.load-more__button' element a time) const selectorForLoadMoreButton = 'a.load-more__button'; let loadMoreVisible = await isElementVisible(frame, selectorForLoadMoreButton); while (loadMoreVisible) { console.log('Loading comments'); await frame .click(selectorForLoadMoreButton) .catch(() => {}); loadMoreVisible = await isElementVisible(frame, selectorForLoadMoreButton); } //expanding comments doesn't work because each comment have a.see-more but some are hidden const selectorForSeeMoreButton = 'a.see-more'; let seeMoreVisible = await isElementVisible(frame, selectorForSeeMoreButton); while (seeMoreVisible) { console.log('Expanding comments'); await frame .click(selectorForSeeMoreButton) .catch(() => {}); seeMoreVisible = await isElementVisible(frame, selectorForSeeMoreButton); } const cdp = await page.target().createCDPSession(); const { data } = await cdp.send('Page.captureSnapshot', { format: 'mhtml' }); fs.writeFileSync('out.mhtml', data); browser.close(); } run();¿Alguna idea de cómo manejar esto?
Resultó que cada comentario tiene el elemento 'a.see-more', pero si no es largo, también tiene la clase '.hidden'. Tuve que actualizar este fragmento de código para buscar todos los elementos 'a.see-more' pero sin la clase '.hidden'.
const selectorForSeeMoreButton = 'a.see-more:not(.hidden)'; let seeMoreVisible = await isElementVisible(frame, selectorForSeeMoreButton); while (seeMoreVisible) { console.log('Expanding comments'); await frame .click(selectorForSeeMoreButton) .catch(() => {}); seeMoreVisible = await isElementVisible(frame, electorForSeeMoreButton); }