按 css 属性 查找未明确设置的元素

Question

为了 disable chrome autofill 我在我的输入表单中添加了不可见的 user/password 字段：

<!-- 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 returns 0 不幸的是。我需要像

这样的东西

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

有什么实现方法的建议吗？

编辑： 我已经测试了所有可能的显示值。 None 似乎适用于我的输入表单，除了 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

:visible Selector呢？

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

Answer 2

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

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

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