首先，如果有人询问我的机器信息:
- 中央操作系统 7
- kmod-nvidia 图形驱动程序(专用 GPU)
我有一个正在使用 Nightwatch 进行测试的网页，其中一项标准是确保背景图像的高度是应该的高度。
总结一下我遇到的问题:我需要验证背景图像(或包含 div)是高度:calc(90vh - 200)。我得到的值要么有很大差异，要么略有不同，要么是未知/空值。 Firefox 是唯一一款真正上榜的浏览器。
下面是我在排错过程中收集到的一些数据，整理如下:
- 呈现浏览器:Nightwatch 使用哪个浏览器来呈现要测试的页面
- Window.innerHeight:高度属性用来计算预期高度的视口(viewport)
- 计算值:高度应该是多少(innerHeight x 0.9 - 200)
- 预期测试:Nightwatch 测试中的预期值。
- 测试:client.verify.cssProperty("div.Background", "height", data.value.height);
- 数据是我从 client.execute() 函数中放置计算(预期)高度的变量。
实际测试值:nightwatch 报告的实际渲染值。
NIghtwatch 的默认浏览器 (PhantomJS)
- vp = 1080
- 计算(高度)= 772
- 预期 = 772
- 实际 = 600
Chrome
- vp = 967
- 计算 = 670.3
- 预期 = 670.300000001
- 实际 = 670.297
火狐
- vp = 945
- 计算 = 650.5
- 预期 = 650.5
- 实际 = 650.5
我们还实现了 Nightwatch 的实现，从一个独立于 selenium 的自定义托管端口分离出来。我已经看到这个值与上面的值不同，但我今天在写这个时(在我的本地 chrome 浏览器上)检查了一下，它的行为与 PhantomJS 相同，尽管有一些差异。
此外，在 client.execute() 函数中，我还尝试从 DOM 本身检索此信息，但每当我尝试元素高度的任何迭代时，它都会给我“未知”。
这是我在上面的解释中用于各种事情的一些代码示例:
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);
})
此外，最近我的图形驱动程序出现了一些问题，我认为这可能是问题所在，但我今天排除了这种可能性。
提前感谢您对此的任何反馈或想法!
最佳答案
我发现 chrome 的微小差异可能在他们使用的任何计算算法的误差范围内(如果我错了请纠正我)。否则我意识到我的主要问题是 Nightwatch.js 使用的 Phantom.js 浏览器。
更具体地说，我在 plunker 中制作模拟 html 页面时注意到，calc 函数在 divs 的背景图像中存在一些问题，calc 将其高度设置为。如果我删除了 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()，这导致了像素差异。 (另请注意，我原帖中上述测试中的 600px 是因为设置了 600 的最小高度，所以计算值会小于 600。)
我相信这可以解决这个问题，但我认为需要专门向 phantom.js 提出另一个问题，以查看情况是否已更新。如果我发现与此答案有其他矛盾的结论，我也会更新我的答案。
我会在下面记录我的新问题。
Phantomjs browser incorrectly computing css calc() function in Nightwatch tests
关于javascript - 使用 Nightwatch 进行测试时未获得预期的像素高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47213808/