0

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
Community
  • 1
  • 1
mles
  • 4,534
  • 10
  • 54
  • 94
  • Why did you tag it with [jquery]? I don't see anything that idicates there is jQuery at play here. – Artjom B. May 08 '15 at 18:36
  • well I googled and found a lot of links to jquery selectors, so I thought the selectors are coming from the jquery world. thanks for the correction. – mles May 08 '15 at 18:43

2 Answers2

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.

Artjom B.
  • 61,146
  • 24
  • 125
  • 222
  • is the `*` meant to be there? because without it works like a charm – mles May 08 '15 at 18:41
  • Yes, it's meant to be there, but I realize, that there isn't much style that you can apply when it's hidden. I removed it. – Artjom B. May 08 '15 at 18:42
0

What about :visible Selector?

expect(element.find('input:visible').length).toBe(10);
Ruslanas Balčiūnas
  • 7,310
  • 3
  • 24
  • 41