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

Question

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

当我启动一个 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

您可以在启动时使用用户选项

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
    args:[
       '--start-maximized' // you can also use '--start-fullscreen'
    ]
    });

  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 3

根据 Puppeteer Documentation:

page.setViewport(viewport)

viewport <Object>

width <number> page width in pixels.

height <number> page height in pixels.

deviceScaleFactor <number> Specify device scale factor (can be thought of as dpr). Defaults to 1.

isMobile <boolean> Whether the meta viewport tag is taken into account. Defaults to false.

hasTouch <boolean> Specifies if viewport supports touch events. Defaults to false

isLandscape <boolean> Specifies if viewport is in landscape mode. Defaults to false.

returns: <Promise>

NOTE in certain cases, setting viewport will reload the page in order to set the isMobile or hasTouch properties.

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

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

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

Note: Make sure to use the await operator when calling page.setViewport(), as the function is asynchronous.

Answer 4

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 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();
})();

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

How to maximise Screen use in Pupeteer ( non-headless )

javascript

puppeteer

page.setViewport(viewport)