量角器说复选框不可见，但它是。如何调查和修复？答案

【问题标题】：Protractor says that a checkbox is not visible, but it is. How to investigate and fix it?量角器说复选框不可见，但它是。如何调查和修复？
【发布时间】：2015-06-29 04:50:29
【问题描述】：

所以，我在 Angular 应用程序中有这个 HTML：

<div class="panel">
    <input class="eula" id="eula" type="checkbox" />
    <label for="eula">I agree</label>
</div>

这两个对同一规范的期望（只是为了确保没有其他东西在运行）：

expect(element(by.css('.panel')).isDisplayed()).toBeTruthy();
expect(element(by.css('.eula')).isDisplayed()).toBeTruthy();

第一个，是真的。第二个是假的。那很奇怪。应该也是真的。

所以，我试试：

element( by.css( '.panel' ) ).getOuterHtml()
.then( function ( html ) {
    console.log( html );
});

我得到：

<input class="eula" id="eula" type="checkbox">

据我所见，没有隐藏复选框，所以我不明白为什么量角器说它不可见。有没有另一种方法来测试这个？关于如何继续调试和修复它的任何想法？

【问题讨论】：

如果这是答案，请随意输入它作为此问题的官方答案，并在可能的情况下接受它。
你有没有测试过以下内容：expect(element(by.id('eula')).isDisplayed()).toBeTruthy();
是的，但仍然不起作用。问题是 display: none 属性的输入。不管我使用哪个选择器，它仍然是隐藏的。

标签： angularjs selenium protractor angularjs-e2e

【解决方案1】：

来自 protractor isDisplayed() 文档：

检查元素是否存在于页面的 DOM 上并且可见的期望。可见性是指元素不仅显示出来，而且高度和宽度都大于0。

输入有一个 display: none 属性，这就是问题所在。

【讨论】：