javascript - 通过未显式设置的 css 属性查找元素

Question

为了disable chrome autofill我已将不可见的用户/密码字段添加到我的输入表单中:

<!-- fake fields are a workaround for chrome autofill getting the wrong fields -->
<input style="display:none" type="text" name="fakeusernameremembered"/>
<input style="display:none" type="password" name="fakepasswordremembered"/>

问题是这会破坏如下测试:

expect(element.find('input').length).toBe(10);

现在有12个输入字段。我可以使用

轻松计算不可见的输入字段

expect(element.find('input[style="display:none"]').length).toBe(2);

为了修复测试，我需要找到没有设置显示属性的输入字段。 element.find('input[style="display:inline"]').length 不幸的是返回 0。我需要类似的东西

expect(element.find('input[style="!display"]').length).toBe(10);

有什么建议可以实现这一目标吗？

编辑:我已经测试了所有可能的显示值。除了 display:none 之外，它们似乎都不适用于我的输入表单

element.find('input[style="display:inline"]').length => 0
element.find('input[style="display:block"]').length => 0
element.find('input[style="display:flex"]').length => 0
element.find('input[style="display:inline-block"]').length => 0
element.find('input[style="display:inline-flex"]').length => 0
element.find('input[style="display:inline-table"]').length => 0
element.find('input[style="display:list-item"]').length => 0
element.find('input[style="display:run-in"]').length => 0
element.find('input[style="display:table"]').length => 0
element.find('input[style="display:table-caption"]').length => 0
element.find('input[style="display:table-column-group"]').length => 0
element.find('input[style="display:table-header-group"]').length => 0
element.find('input[style="display:table-footer-group"]').length => 0
element.find('input[style="display:table-row-group"]').length => 0
element.find('input[style="display:table-cell"]').length => 0
element.find('input[style="display:table-column"]').length => 0
element.find('input[style="display:table-row"]').length => 0
element.find('input[style="display:none"]').length => 2
element.find('input[style="display:initial"]').length => 0
element.find('input[style="display:inherit"]').length => 0

Answer 1

您可以使用:not()选择器:

expect(element.find('input:not([style="display:none"])').length).toBe(10);

问题似乎是，您需要根据 DOM 而不是它们的计算样式来匹配元素。因此，只有当您不想计算的元素的样式属性中实际包含确切的字符串“display:none”时，上述建议才有效。