使用 Nightwatch 进行测试时未获得预期的像素高度

Question

首先，以防万一有人询问我的机器信息：

CentOS 7
kmod-nvidia 图形驱动程序（专用 GPU）

我有一个正在使用 Nightwatch 进行测试的网页，其中一项标准是确保背景图像的高度是应该的高度。

总结一下我遇到的问题：我需要验证背景图像（或包含 div）的高度：calc(90vh - 200)。我得到的值要么有很大差异，要么略有不同，要么 unknown/null 值。 Firefox 是唯一一款真正上榜的浏览器。

下面是我在排错过程中收集的一些资料，整理如下：

呈现浏览器：Nightwatch 使用哪个浏览器呈现要测试的页面
Window.innerHeight:height属性用来计算期望高度的viewport
计算值：高度应该是多少（innerHeight x 0.9 - 200）
预期测试：Nightwatch 测试中的预期值。
- 测试：client.verify.cssProperty("div.Background", "height", data.value.height);
- 数据是我从 client.execute() 函数中放置计算（预期）高度的变量。
Test Actual：nightwatch 报告的实际渲染值。
1. NIghtwatch 的默认浏览器 (PhantomJS)
  - vp = 1080
  - 计算（身高）= 772
  - 预期 = 772
  - 实际 = 600
2. Chrome
  - vp = 967
  - 计算 = 670.3
  - 预期 = 670.300000001
  - 实际 = 670.297
3. Firefox
  - vp = 945
  - 计算 = 650.5
  - 预期 = 650.5
  - 实际 = 650.5
4. 我们还实现了 Nightwatch 的实现，将自定义托管端口与 selenium 分开。我已经看到这个值与上面的值不同，但我今天写这篇文章时才检查过（在我的本地 chrome 浏览器上），它的行为与 PhantomJS 相同，尽管有一些差异。

此外，在 client.execute() 函数中，我还尝试从 DOM 本身检索此信息，但每当我尝试元素高度的任何迭代时，它都会给我 "unknown"。

这是我在上面的解释中用于各种事情的一些代码的示例：

client.resizeWindow(1920, 1080);
client.waitForElementVisible("background", 3000); // passes
client.execute(function(){ return window.innerHeight; }, [], (result) => {
  console.log("viewport:" + JSON.stringify(result.value));
}
client.getElementSize("div.background", (elementSize) => { //outputs wrong value
   console.log("elementSize: " + elementSize.value.height);
});

client.execute(function() {
  var data = {};
  var el = document.getElementsByClassName("background").clientHeight; //insert any height function here
  data.height = ((0.9 * window.innerHeight) - 200); //this is what it should be
  data.elementHeight = "height: " + el + "px";
  return data;
}, [], (data) => {
  console.log("computed Height: " + data.value.height);
  console.log("element height: " + data.value.elementHeight); //this gives "unknown"

  client.verify.cssProperty("div.background", height, data.value.height);
})

此外，最近我的图形驱动程序出现了一些问题，我认为这可能是问题所在，但我今天排除了这个问题。

提前感谢您对此的任何反馈或想法！

Answer 1

我发现 chrome 中的微小差异可能在他们使用的任何计算算法的误差范围内（如果我错了请纠正我）。否则我意识到我的主要问题是 Nightwatch.js 使用的 Phantom.js 浏览器。

更具体地说，我在 plunker 中制作模拟 html 页面时注意到，calc 函数在使用 calc 设置高度的背景图像的 div 时存在一些问题。如果我删除了 calc() 函数，那么图像会再次加载。

例如。 Html:

<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="doTheThing"></div>
  </body>
</html>

例如。 Css:

.doTheThing: {
  background-image: url('insertRandomImageUrlHere');
  height: calc(90vh - 200); //didn't work.  Image didn't load
  height: 90vh; //worked, image loaded.
}

我对这种奇怪的行为感到抓狂，我又仔细考虑了一下，并就此专门研究了渲染浏览器 Phantom.js，我在这里遇到了这个问题：https://github.com/ariya/phantomjs/issues/13547

从外观上看，Phantom.js 完全有可能错误地计算了 calc()，这导致了像素差异。（另请注意，在我原来的 post 中上述测试中的 600px 是因为设置了 600 的最小高度，因此计算值将小于 600。）

我相信这可以解决这个问题，但我认为还需要专门向 phantom.js 提出另一个问题，看看情况是否有所更新。如果我发现与此答案有其他矛盾的结论，我也会更新我的答案。

我会在提出新问题后在下方注明。

使用 Nightwatch 进行测试时未获得预期的像素高度

Not getting expected pixel height when testing with Nightwatch

javascript

css

phantomjs

selenium-webdriver

nightwatch.js