how to type in multiple input instances with same name using cypress

Issue

I have to do an end to end testing on angularjs application using cypress.

I have two instances of the same input element. They have the same ng-model, class and name. We have got the unique id which is dynamically generated by the application which cannot be same everytime the page loads or if it's tested on a different machine.

As an example below, there are two input elements with the same name, but I would need the same text to appear on both the input elements. When I use the following commands, cypress is complaining about two instances of the same name. How can I type the same text'Hello world' on both the input elements with same name?

cy.get('input[name=description]').type('Hello World')

Solution

One way to try (may not be optimal) is

cy.get('input[name=description]').then(els => {
  [...els].forEach(el => cy.wrap(el).type('Hello World'));
});

Some notes,

• Cypress has a first() command, so you could do
  cy.get('input[name=description]').first().type('Hello World');
  but I there's no command second().

• [...els] converts Cypress array to normal array, so you can forEach().

---

Update - use eq() command

If this seems too unweildy, add the following custom command to \cypress\support\command.js

Cypress.Commands.add('nth', { prevSubject: 'element' },  (els, index) => {
  return cy.wrap([...els][index]) 
})

From comment from Jennifer Shehane, could do this more simply with

cy.get('input[name=description]').eq(0).type('Hello World');
cy.get('input[name=description]').eq(1).type('Hello World');

Answered By - Richard Matsen