nightwatch, select second element with same input type

Question

I'm writing tests to execute in nightwatch using javascript. I have two password fields under the same form that I am filling in order to sign up for a new account. I select them using the id of the form concatenated with input[type=password] and later on use .setValue() to insert some string into them.

The problem is differentiating between these two password fields. I don't want to use the id or class to select them because I don't want it to be css-dependant in that way. This is because the test is for a live website that developers work on constantly and every time the css name changes the test will have to be modified if it is dependant on the id of elements instead of their type. I have no control over the many developers and what names they change and do not change. My only option is to write my tests as independently of the css as I can. If I can select the password fields using their type I will only be dependant on the form name which is used to select the password field, the user name field, and the login button.

Is there any way to do this? Thanks in advance.

Answer 1

I am not sure if you can do this intelligently without relying on "any" form of css. The HTML is a DOM representation so you will at least have to work within that aspect.

You can however detach from using specific ids, attributes and work within only the DOM class elements.

For example if you have the following:

<form>
    <input>a</input>
    <input>b</input>
</form>

You can just do "form > input:nth-of-type(2)" as your selector. So it will always grab the 2nd input element under the direct child of form

http://www.w3schools.com/cssref/sel_nth-of-type.asp

This however assumes that the structure is locked down and not always changing.

Hope that this helps!

Answer 2

you can treat <input> as arrays that counts from 1 so if you want to get the second input just do

.setValue('//form[@id="yourformid"]/input[2]','blablabla')