NodeJS Headless chrome启动器--窗口大小导致错误

taor4pac  于 2023-02-21  发布在  Node.js
关注(0)|答案(2)|浏览(135)

我需要能够采取屏幕截图给定的窗口大小。我读了这篇博客文章的How to run Headless Chrome in Codeception和这个页面的Getting Started with Headless Chrome,但不知道如何调整窗口在init。
我已经尝试在下面的所有选项中传递--window-size,但都不起作用:

--window-size=1280,1696
--window-size=1280x1696
--window-size 1280,1696
--window-size 1280x1696
  • 最糟糕的是 *,现在我的屏幕截图是空白的后,这样做了一段时间。是否有某种内存保留在无头浏览器导致这一点?我还没有尝试重新启动我的Mac,这可能是下一个。
    • 那么,在给定窗口大小的情况下,如何进行整页截图呢?**在phantom.js中,这是一件非常琐碎的事情。

我的代码如下

const chromeLauncher = require('chrome-launcher');
const CDP = require('chrome-remote-interface');
const file = require('fs');

(async function() {
  async function launchChrome() {
    return await chromeLauncher.launch({
      chromeFlags: [
        '--window-size=1280,1696',
        '--disable-gpu',
        '--headless'
      ]
    });
  }
  const chrome = await launchChrome();
  const protocol = await CDP({
    port: chrome.port
  });

  const {
    DOM,
    Network,
    Page,
    Emulation,
    Runtime
  } = protocol;
  await Promise.all([Network.enable(), Page.enable(), Runtime.enable(), DOM.enable()]);

  Page.navigate({
    url: 'https://www.yahoo.com/'
  });

  Page.loadEventFired(async() => {

    console.log('Start Page.loadEventFired');
    const script1 = "document.querySelector('p').textContent"
    const result = await Runtime.evaluate({
      expression: script1
    });
    console.log(result.result.value);

    const ss = await Page.captureScreenshot({format: 'png', fromSurface: false});
    file.writeFile('output.png', ss.data, 'base64', function(err) {
      if (err) {
        console.log(err);
      }
    });

    protocol.close();
    chrome.kill(); 
  });

})();

如果我在命令行中执行此操作,它将正常工作:

alias chrome-canary="/Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary"

chrome-canary --headless --disable-gpu --screenshot --window-size=300,1696 https://www.yahoo.com/

更新

我意识到无头Chrome Canary至少在Mac上非常不稳定。如果我关闭终端重新启动,有时它会工作。但在运行完全相同的脚本后,它就永远挂起了(我离开了一夜)。我今天刚刚更新了所有东西(Chrome Canary、chrome-launcher、chrome-remote-interface),并继续调试。也许现在还不是它的黄金时期。

0qx6xfy6

0qx6xfy61#

好的,我刚刚知道使用--window-size是行不通的。

已添加:

Page.setDeviceMetricsOverride({
    'width': 735,
    'height': 2200,
    'deviceScaleFactor': 1,
    'mobile': false
  });

已删除(导致Headless Chrome冻结):

const script1 = "document.querySelector('p').textContent"
const result = await Runtime.evaluate({
  expression: script1
});
console.log(result.result.value);
vhmi4jdf

vhmi4jdf2#

(node:29272)未处理承诺拒绝警告:类型错误:第页.setDeviceMetricsOverride不是函数

相关问题