使用Nightwatch进行测试时未获得预期的像素高度
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用Nightwatch进行测试时未获得预期的像素高度相关的知识,希望对你有一定的参考价值。
首先,如果有人要求我的机器信息:
- CentOS 7
- kmod-nvidia图形驱动程序(专用GPU)
我有一个我正在使用Nightwatch测试的网页,其中一个标准是确保背景图像的高度应该是高度。
总结我遇到的问题:我需要验证背景图像(或包含div)是高度:calc(90vh - 200)。我要么得到了很大的不同值,略有不同,或者未知/空值。 Firefox是唯一真正被发现的浏览器。
以下是我在故障排除中收集的一些数据,其布局如下:
- 渲染浏览器:Nightwatch使用哪种浏览器渲染要测试的页面
- Window.innerHeight:height属性用于计算预期高度的视口
- 计算值:高度应该是多少(innerHeight x 0.9 - 200)
- 预期测试:Nightwatch测试中的预期值。 测试:client.verify.cssProperty(“div.Background”,“height”,data.value.height); 数据是我从client.execute()函数中放置计算(预期)高度的变量。
- 测试实际:夜视仪报告的实际渲染值。 NIghtwatch的默认浏览器(PhantomJS) vp = 1080 计算(身高)= 772 预期= 772 实际= 600 铬 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);
})
另外,我最近在使用我的图形驱动程序时出现了一些问题,并认为这可能是个问题,但我已经在今天排除了这个问题。
在此先感谢任何反馈,或对此的想法!
我发现铬的微小差异可能在他们使用的任何计算算法的误差范围内(如果我错了,请纠正我)。否则我意识到我的主要问题是Nightwatch.js使用的Phantom.js浏览器。
更具体地说,我注意到在plunker中创建一个模拟html页面时,calc函数有一些div的问题,其背景图像的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
以上是关于使用Nightwatch进行测试时未获得预期的像素高度的主要内容,如果未能解决你的问题,请参考以下文章
Firebase云功能Firestore触发onWrite在本地测试时未按预期运行
nightwatch 基于Webdriver的端到端自动化测试框架
如何在 Nightwatch 测试的自定义命令中添加嵌套函数 javascript - forEach - 循环遍历元素