docker 中的 puppeteer 与本地 puppeteer 的行为不同

Question

我正在尝试测量 HTML 元素的宽度。我在本地 puppeteer/chrome_headless 和 docker puppeteer/chrome_headless 中得到不同的值。

重现步骤：

1) 打开 chrome 控制台并粘贴以下代码。它将给出元素的宽度。

    var elem = document.createElement('span')
    document.body.appendChild(elem)
    elem.innerHTML="text to be measured for width"
    elem.style.fontSize="20px"
    elem.style.fontFamily="serif"
    console.log(a.getBoundingClientRect().width)

2) 运行以下命令在 docker 中运行 headless chrome。

docker run -it --rm -p=0.0.0.0:9222:9222  --name=chrome-headless -v /tmp/chromedata/:/data alpeware/chrome-headless-trunk

3) 通过localhost:9222 的任何浏览器访问在docker 中运行的headless chrome。单击显示的链接。现在将相同的代码粘贴到控制台中。它给出的宽度不同。

我需要 docker 中的无头浏览器来提供与本地 chrome 相同的结果。

Answer 1

由于问题是关于测量元素的外观，我敢打赌，有问题的元素在无头浏览器和非无头浏览器之间呈现不同。

尝试在 Puppeteer 中明确设置视口的尺寸，并检查您是否使用不同的用户代理（很可能您使用的是相同的用户代理）。

//...
await page.setViewport({
  width: 640,
  height: 480,
  deviceScaleFactor: 1,
});
//...