使用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 - 循环遍历元素

vue-cli 脚手架基于Nightwatch的端到端测试环境的过程

单测方法论---1

使用Nightwatch.js做基于浏览器的web应用自动测试