find element by css property that is not explicitly set

Question

In order to disable chrome autofill I have added invisible user/password fields to my input forms:

<!-- 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"/>

The problem is that this breaks tests like:

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

There are 12 input field now. I can count the invisible input fields quite easily with

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

In order to fix the tests I need to find the input fields that do not have a display attribute set. element.find('input[style="display:inline"]').length returns 0 unfortunately. I need something like

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

Any suggestions how to achieve this?

Edit: I've tested for all possible display values. None of them seem to apply to my input forms, except for 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

You can use the :not() selector:

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

The problem seems to be, that you need to match elements according to the DOM and not their computed styles. So the above suggestion works only as long as the elements that you don't want to count actually contain the exact string "display:none" in their style attribute.

Answer 2

那：visible Selector呢？

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