使用 Intern 在功能上测试元素是否可见(没有元素覆盖)
Functionally test that an Element is visible (no elements covering) with Intern
我目前正在使用 JavaScript 框架实习生来测试我的网站,我想确保特定元素真正可见。实习生目前有一个选项 "isDisplayed" 其中一半是这样做的。但我还想做的是检查它是否对用户真正可见,并且页面上的任何其他元素都没有覆盖(可能是 z-index 问题)等。
有人有什么建议吗?
提前致谢。
通常,最好专注于您的单元测试,并确保您希望设置的样式从您用来执行此操作的 utility/helper 函数正确返回。否则,您将最终测试您可能不想做的事情,例如浏览器本身计算样式的功能。因此,在很多情况下这是不好的做法。
但是,如果您确实需要这样做,例如在针对客户站点测试第 3 方 JavaScript 库时,实习生的 Leadfoot 提供了您需要使用的 .execute() 方法。
示例:
return this.remote // represents the browser
.get('mysite.com') // navigate to a page
.execute( // send a callback to the browser
function (selector) {
var elem = document.querySelector(selector),
result;
// collect some data for analysis...
result = getComputedStyle(elem).zIndex;
return result;
},
['div'] // arguments to send to the remote callback
)
.then(
function (zIndex) {
// analyze the data and make assertions about it...
assert(zIndex > 999);
}
);
请注意:这很棒,但要小心。您的大部分测试都在 Node.js 内运行,但 .execute()
的回调不会,因此它无法访问您之前定义的任何变量等
至于确定元素何时对用户真正可见的策略,这是非常主观的,但是 getBoundingClientRect() is going to be your friend for determining when one element is overlapping another. There are good techniques here: Determine visibility / real z-index of html elements
我目前正在使用 JavaScript 框架实习生来测试我的网站,我想确保特定元素真正可见。实习生目前有一个选项 "isDisplayed" 其中一半是这样做的。但我还想做的是检查它是否对用户真正可见,并且页面上的任何其他元素都没有覆盖(可能是 z-index 问题)等。
有人有什么建议吗?
提前致谢。
通常,最好专注于您的单元测试,并确保您希望设置的样式从您用来执行此操作的 utility/helper 函数正确返回。否则,您将最终测试您可能不想做的事情,例如浏览器本身计算样式的功能。因此,在很多情况下这是不好的做法。
但是,如果您确实需要这样做,例如在针对客户站点测试第 3 方 JavaScript 库时,实习生的 Leadfoot 提供了您需要使用的 .execute() 方法。
示例:
return this.remote // represents the browser
.get('mysite.com') // navigate to a page
.execute( // send a callback to the browser
function (selector) {
var elem = document.querySelector(selector),
result;
// collect some data for analysis...
result = getComputedStyle(elem).zIndex;
return result;
},
['div'] // arguments to send to the remote callback
)
.then(
function (zIndex) {
// analyze the data and make assertions about it...
assert(zIndex > 999);
}
);
请注意:这很棒,但要小心。您的大部分测试都在 Node.js 内运行,但 .execute()
的回调不会,因此它无法访问您之前定义的任何变量等
至于确定元素何时对用户真正可见的策略,这是非常主观的,但是 getBoundingClientRect() is going to be your friend for determining when one element is overlapping another. There are good techniques here: Determine visibility / real z-index of html elements