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中运行无头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中运行的无头Chrome。单击显示的链接。现在，将相同的代码粘贴到控制台中。它给出的宽度是不同的。

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

Answer 1

由于问题在于衡量元素的外观，所以我敢打赌，所涉及的元素在无头和无头浏览器中的呈现方式是不同的。

尝试在Puppeteer中显式设置视口的尺寸，并检查您是否未使用其他用户代理（很可能正在使用同一用户代理）。

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

码头工人中的木偶行为与本地人中的同一个木偶行为不同

1 个答案: