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

问题描述 投票：0回答：1

首先，如果有人要求我的机器信息：

  • 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);
})

另外，我最近在使用我的图形驱动程序时出现了一些问题，并认为这可能是个问题，但我已经在今天排除了这个问题。

在此先感谢任何反馈，或对此的想法！

javascript css selenium-webdriver phantomjs nightwatch.js
1个回答
0
投票

我发现铬的微小差异可能在他们使用的任何计算算法的误差范围内（如果我错了，请纠正我）。否则我意识到我的主要问题是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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.