使用 Intern 功能测试元素是否可见（没有元素覆盖）答案

【问题标题】：Functionally test that an Element is visible (no elements covering) with Intern使用 Intern 功能测试元素是否可见（没有元素覆盖）
【发布时间】：2015-01-29 11:56:08
【问题描述】：

我目前正在使用 JavaScript 框架实习生来测试我的网站，我想确保特定元素真正可见。实习生目前有一个选项“isDisplayed”，其中一半是这样做的。但我还想做的是检查它是否对用户真正可见，并且页面上的任何其他元素都没有覆盖（可能是 z-index 问题）等。

有人有什么建议吗？

提前致谢。

【问题讨论】：

标签： javascript intern

【解决方案1】：

通常，最好专注于您的单元测试，并确保您希望设置的样式从您用来执行此操作的实用程序/帮助函数中正确返回。否则，您最终会测试您可能无意测试的东西，例如浏览器本身计算样式的功能。因此，在许多情况下这是不好的做法。

但是，如果您确实需要此功能，例如在针对客户网站测试 3rd 方 JavaScript 库时，Intern 的 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() 将成为您确定一个元素何时与另一个重叠的朋友。这里有很好的技巧：Determine visibility / real z-index of html elements

【讨论】：