puppeteer 点击打开新标签并抓取所有图像

Question

大家好，我在使用 puppeteer 时遇到了一个错误。当我单击标题以将其打开到全新的 chrome 选项卡时，我无法加载该页面的所有图像（即使页面打开）。以下是我的代码，任何帮助我感到高兴，谢谢！

const puppeteer = require('puppeteer');
const download = require('image-downloader');

(async() => {
    const browser = await puppeteer.launch({
        
    executablePath: 'C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe',
    headless: false,
    args: [
        //'--auto-open-devtools-for-tabs',
        '--disable-dev-shm-usage'
    ]
    });
    console.log('Browser openned');
    const page = await browser.newPage();
    const url = 'https://kenh14.vn';
    await page.goto(url,{ waitUntil: 'networkidle2', timeout:0 });
    console.log('Page loaded');


    await page.type('#searchinput','gai xinh');

    await page.click('.t-search-icon');
    await page.waitForNavigation({waitUntil: 'networkidle2'});



  //save target of original page to know that this was the opener:     
const pageTarget = page.target();
//execute click on first tab that triggers opening of new tab:
await page.click('ul.knsw-list > li:nth-child(5) > div.knswli-right > h3.knswli-title > a');
//check that the first page opened this new page:
const newTarget = await browser.waitForTarget(target => target.opener() === pageTarget);
//get the new page object:
const page2 = await newTarget.page();

console.log((await browser.pages()).length); // => 2
  console.log((await page2.content()));

  const imgLinks = await page2.evaluate(() => {
    
    let imgElements = document.querySelectorAll('.sp-img-zoom > img, .sp-img-lightbox > img, .detail-img-lightbox > img');
    imgElements = [...imgElements];
    let imgLinks = imgElements.map(i => i.getAttribute('src'));
    return imgLinks;
});
console.log(imgLinks);


   // await browser.close();
   setTimeout(async () => {
    await browser.close();
  }, 60000 * 4);


})();

Answer 1

看来你只需要等待图像被添加到 DOM：

await page2.waitForSelector('.sp-img-zoom > img, .sp-img-lightbox > img, .detail-img-lightbox > img');

const imgLinks = await page2.evaluate(() => {
  // ...
});