Puppeteer chờ tất cả hình ảnh tải sau đó chụp ảnh màn hình

Question

Tôi đang sử dụng Puppeteer để thử chụp ảnh màn hình trang web sau khi tất cả hình ảnh đã tải nhưng không thể tải hình ảnh.

Đây là mã tôi đã có cho đến nay, tôi đang sử dụng https://www.digg.com như trang web ví dụ:

const puppeteer = require('puppeteer'); 

(async() => { 
    const browser = await puppeteer.launch(); 
    const page = await browser.newPage(); 
    await page.goto('https://www.digg.com/'); 

    await page.setViewport({width: 1640, height: 800}); 

    await page.evaluate(() => { 
     return Promise.resolve(window.scrollTo(0,document.body.scrollHeight)); 
    }); 

    await page.waitFor(1000); 

    await page.evaluate(() => { 
     var images = document.querySelectorAll('img'); 

     function preLoad() { 

      var promises = []; 

      function loadImage(img) { 
       return new Promise(function(resolve,reject) { 
        if (img.complete) { 
         resolve(img) 
        } 
        img.onload = function() { 
         resolve(img); 
        }; 
        img.onerror = function(e) { 
         resolve(img); 
        }; 
       }) 
      } 

      for (var i = 0; i < images.length; i++) 
      { 
       promises.push(loadImage(images[i])); 
      } 

      return Promise.all(promises); 
     } 

     return preLoad(); 
    }); 

    await page.screenshot({path: 'digg.png', fullPage: true}); 

    browser.close(); 
})(); 

Answer 1

Có một built-in option cho rằng:

await page.goto('https://www.digg.com/', {"waitUntil" : "networkidle0"}); 

networkidle0 - xem xét chuyển hướng được hoàn thành khi có không quá 0 kết nối mạng trong ít nhất 500 ms

networkidle2 - xem xét điều hướng sẽ hoàn thành khi không có nhiều hơn 2 kết nối mạng trong ít nhất 500 ms.

P.S. Tất nhiên nó sẽ không hoạt động nếu bạn đang làm việc với các ứng dụng vô tận cuộn đơn như Twitter.

Answer 2

Tôi đang phải đối mặt với vấn đề chính xác như vậy. Tôi có cảm giác là giải pháp sẽ bao gồm việc sử dụng:

await page.setRequestInterceptionEnabled(true); 

page.on('request', interceptedRequest => { 
    //some code here that adds this request to ... 
    //a list and checks whether all list items have ... 
    //been successfully completed! 
}); 

https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagesetrequestinterceptionenabledvalue