Почему кукольник дает мне неправильный скриншот по ширине? - PullRequest
0 голосов
/ 19 июня 2020

Я создаю сценарий для создания снимков экрана веб-страниц с кукловодом, я не понимаю, почему на этом сайте «https://ricette.donnamoderna.com/idee-in-cucina» изображение сохраняется с шириной, большей, чем та, которая Я установил 1920 пикселей.

Если у меня фиксированная ширина браузера, почему на снимке экрана получается большая ширина? enter image description here

Я хотел бы сохранить снимок экрана с фиксированной шириной 1920 пикселей и высотой в зависимости от общего содержимого страницы. Ширина сохраненного изображения должна быть равна ширине браузера, почему этого не происходит?

const puppeteer = require('puppeteer');
const os = require('os');
const username = require('username');

//I identify the operating system and the architect of the CPU to run the Google Chrome Patch
var architetturaCPU = os.arch();
var sistemaOperativo = os.type();
console.log('System OS: '+sistemaOperativo+' '+architetturaCPU);
//console.log(os.platform());

// Device width and height
const device_width = 1920;
const device_height = 1080;

//Patch di Chrome
var systemPath = '';
if (sistemaOperativo == 'Darwin'){
    console.log('Chrome for MacOS');
    var systemPath = '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome';
} else
if(sistemaOperativo == 'Windows_NT' && architetturaCPU == 'x64'){
    console.log('Chrome for Windows 64bit');
    var systemPath = 'C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe';
}else
if(sistemaOperativo == 'Windows_NT' && architetturaCPU == 'x32'){
    console.log('Chrome for Windows 32bit');
    var systemPath = 'C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe';
}else
if(sistemaOperativo == 'Windows_NT' && architetturaCPU == 'ia32'){
    console.log('Chrome for Windows 32bit');
    var systemPath = 'C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe';
}



//I build an Array and insert all the buttons for the consent of the Cookies for the Network sites
const btncookie1 = 'button.amecp_button-accetto.iubenda-cs-close-btn';
const btncookie2 = 'button.iubenda-cs-accept-btn.iubenda-cs-btn-primary';
var BtnCookie = [
  btncookie1, 
  btncookie2
];


(async function () {

//I read the url file
var fs = require('fs');
var urlArray = fs.readFileSync('url-list.js').toString().split("\n").filter(a => a);

//Launch Puppeteer
const browser = await puppeteer.launch({
  headless: true,
  executablePath: systemPath,
  args: ['--disable-dev-shm-usage','--no-sandbox','--window-size=1920,1080'],
  defaultViewport: null
});


//Loop through all the url-list.js URL
var contaUrl = 0;
for(var i = 0; i < urlArray.length; i++){

//Check if empty spaces are present in the url file list
if (urlArray[i].indexOf("http") != '-1'){    

//I open the boswser, delete the cache and set the page size
const page = await browser.newPage();
const client = await page.target().createCDPSession();
await client.send('Network.clearBrowserCookies');
await client.send('Network.clearBrowserCache');

await page.setCacheEnabled(false);
await page.setViewport({width: device_width, height: device_height});
await page.setUserAgent('Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36');

//Tell me which URL you are working on
console.log(' ');
console.log('\x1b[33m%s','Open URL > '+urlArray[i],'\x1b[0m');
console.log(' ');
await page.goto(urlArray[i],{waitUntil:'networkidle2'}); 
await page.waitFor(20000);

//Find the class / id of the button on the page to accept cookies
var contaNumeroValoriBtnCookie = BtnCookie.length;
for(var n = 0; n <= BtnCookie.length; n++){

if (await page.$(BtnCookie[n]) !== null ) {

console.log(BtnCookie[n]);
const navigationPromise = page.waitForSelector(BtnCookie[n]);
await page.click(BtnCookie[n]); 
await navigationPromise; 

    console.log('\x1b[32m%s', 'Bypass Cookie... OK!','\x1b[0m');
    break;
    }else if (n == contaNumeroValoriBtnCookie) {

        console.log('\x1b[31m%s', 'Cookie not found!','\x1b[0m');
    }else {

        //console.log('I'm looking for the cookie...');
    }

} //end - Find the class / id of the button on the page to accept cookies


//Scroll the entire page to load the content
await autoScroll(page);

async function autoScroll(page){
  await page.evaluate(async () => {
      await new Promise((resolve, reject) => {
          var totalHeight = 0;
          var distance  = 100;

          var timer = setInterval(() => {
              var scrollHeight = document.body.scrollHeight;
              window.scrollBy(0, distance);
              totalHeight += distance;

              if(totalHeight >= scrollHeight){
                  clearInterval(timer);
                  resolve();
              }
          }, 300);
      });
  });
}

//Go back to the top of the page
await page.evaluate(_ => {window.scrollTo(0, 0);});

await page.waitFor(10000);

//I clean up the URL before saving the file
var str = urlArray[i];
str = str.replace(/[^\w]+/ig,'-');
var convertiUrl = str;

//SAVE screenshot
await page.screenshot({path: './screenshot/'+convertiUrl+i+'.jpg', fullPage: true});
await page.waitFor(5000);

await page.close();

}//end if (urlArray[i].indexOf("http") != '-1'){  

}//end loop

browser.close();

console.log(' ');
console.log('\x1b[32m%s', contaUrl+' all screenshot saved :)','\x1b[0m');
console.log(' ');

})(); //end script

1 Ответ

0 голосов
/ 23 июня 2020

Попробуйте добавить эти строки для изменения размера области просмотра после метода page.goto:

...

await page.goto(urlArray[i],{timeout: 0, waitUntil:'networkidle2'});
await page.waitFor(20000);
await page.setViewport({
    width: 1920,
    height: 1080,
});

//Find the class / id of the button on the page to accept cookies
var contaNumeroValoriBtnCookie = BtnCookie.length;
...
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...