Question

我正在测试puppeteer的chrome浏览器自动化（以前使用硒但有一些令人头疼的浏览器不等待页面完全加载）。

当我启动一个puppeteer的实例时 - 然后它用滚动条显示占用不到一半屏幕的内容。如何让它占据全屏？

const puppeteer = require('puppeteer');

async function test(){
    const browser = await puppeteer.launch({
        headless: false,
      });
    const page = await browser.newPage();
    await page.goto('http://google.com')
}

test()

初始页面似乎加载正常，但是一旦我访问页面，它就可以滚动并缩小。

Answer 1

你可能想要设置一个特定的屏幕大小，任何真正的浏览器都有：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.setViewport({ width: 1366, height: 768});
  await page.goto('https://example.com', {waitUntil: 'networkidle2'});
  await page.screenshot({path: 'example.png'});

  browser.close();
})();

Answer 2

您可以在启动时使用选项

h_addr

Answer 3

const puppeteer = require('puppeteer-core');

(async () => {
  const browser = await puppeteer.launch({
    headless: false,
    defaultViewport: null,
  });

  const pages = await browser.pages();
  const page = pages[0];
  await page.goto('https://google.com');
})();

来源： https://github.com/GoogleChrome/puppeteer/issues/3688#issuecomment-453218745

Answer 4

根据Puppeteer Documentation：

page.setViewport（viewport）


viewport <Object>

width <number>页面宽度（以像素为单位）。

height <number>页面高度（以像素为单位）。

deviceScaleFactor <number>指定设备比例因子（可以认为是dpr）。默认为1。

isMobile <boolean>是否考虑meta viewport标签。默认为false。

hasTouch <boolean>指定视口是否支持触摸事件。默认为false

isLandscape <boolean>指定视口是否处于横向模式。默认为false。



返回：<Promise>



注意（在某些情况下），设置视口将重新加载页面以设置isMobile或hasTouch属性。


在单个浏览器中有多个页面的情况下，每个页面可以具有自己的视口大小。

因此，您可以使用page.setViewport()来设置页面的宽度和高度：

await page.setViewport({
  width: 1366,
  height: 768,
});

注意：由于该函数是异步的，请确保在调用await时使用page.setViewport()运算符。

Answer 5

具有相关属性的代码段

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch(
    {
      headless: false, //defaults to true 
      defaultViewport: null, //Defaults to an 800x600 viewport
      executablePath: 'C:/Program Files (x86)/Google/Chrome/Application/chrome.exe', 
                     //by default puppeteer runs Chromium buddled with puppeteer 
      args:['--start-maximized' ]
    });
  const page = await browser.newPage();
  await page.goto('https://example.com');

})();

Answer 6

我这样做：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.setViewport({ width: 0, height: 0});
  await page.goto('https://example.com');
  await page.screenshot({path: 'example.png'});

  browser.close();
})();

如何在Pupeteer（非无头）中最大化屏幕使用

6 个答案:

page.setViewport（viewport）