功能测试元素是否可见（没有元素覆盖）与实习生

Question

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

有人有建议吗？

提前致谢。

Answer 1

通常，最好将注意力集中在单元测试上，并确保您希望设置的样式从您使用的实用程序/帮助程序功能中正确返回。否则，您将最终测试您可能并不意味着的东西，例如浏览器本身用于计算样式的功能。因此，在许多情况下这都是不好的做法。

但是，如果您确实需要这样做，例如在针对客户的网站测试第三方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