web-dev-qa-db-ja.com

Puppeteer（非ヘッドレス）で画面の使用を最大化する方法

chromeブラウザの自動化（以前は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()

最初のページは正常に読み込まれるようですが、ページにアクセスするとすぐにスクロール可能になり、ページが小さくなります。

puppeteer
15
Martin Thompson

おそらく、実際のブラウザが持っている特定の画面サイズを設定したいと思うでしょう。

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

起動時にオプションを使用できます

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

関連するプロパティを含むコードスニペット

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');

})();
2
Sarath

Puppeteer Documentation によると：

page.setViewport（viewport）

  • viewport < オブジェクト >
    • width < number >ピクセル単位のページ幅。
    • height < number >ページの高さ（ピクセル単位）。
    • deviceScaleFactor < number >デバイスのスケール係数を指定します（dprと見なすことができます）。デフォルトは1です。
    • isMobile < boolean > meta viewportタグを考慮するかどうか。デフォルトはfalseです。
    • hasTouch < boolean >ビューポートがタッチイベントをサポートするかどうかを指定します。デフォルトはfalseです
    • isLandscape < boolean >ビューポートが横向きモードかどうかを指定します。デフォルトはfalseです。
  • 戻り値：< 約束 >

[〜＃〜]注[〜＃〜]特定の場合、ビューポートを設定すると、isMobileを設定するためにページが再読み込みされますまたはhasTouchプロパティ。

1つのブラウザに複数のページがある場合、各ページに独自のビューポートサイズを設定できます。

したがって、 page.setViewport() を使用してページの幅と高さを設定できます。

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

注：page.setViewport() を呼び出すときは、 await 演算子を必ず使用してください。関数は非同期です。

1
Grant Miller