CODEWITHSUNDEEP
cypress
ERLay
ERLay

Reputation: 69

How to address Cypress (cy.type() can only be called on a single element.) error?

I have three input fields:

      cy.get(':nth-child(1) > .input-module_input__3wsvS').should('be.visible').type(foo)
      cy.get(':nth-child(2) > .input-module_input__3wsvS').should('be.visible').type(bar)
      cy.get(':nth-child(3) > .input-module_input__3wsvS').should('be.visible').type(foo-bar)

How to I get my test to pass? I am using css modules in react. ID-Tags don't seem to work, so any other suggestions?

.first() is ok to identify the 1st, but how would I address the 2nd and 3rd input?

Upvotes: 0

Views: 1516

Answers (2)

Shanon Jackson
Shanon Jackson

Reputation: 6531

Be careful using the "hash" the originates from frontend websites who use css-modules as any change to the underlying css will change its value and therefore break the tests.

Similarly the more complicated a selector is the more surface area there is for change in the structure of the document to break the test.

.eq() is how you select children by index (0 based) you can find the documentation here:

https://docs.cypress.io/api/commands/eq

For projects using css modules i'd suggest using the "starts with" selector

cy.get(`[class^='${cls}']`))

// or add the following command for "partial class" to make writing it easier

Cypress.Commands.add('pclass', (cls) => cy.get(`[class^='${cls}']`));

usage in your example:

cy.get(`[class^='input-module_input']`).eq(1) // (for second child)
// or (After you've added the command)
cy.pclass("input-module_input").eq(1); // (for second child that mathes)

Upvotes: 1

Fody
Fody

Reputation: 31912

Using .eq() might give you better results

cy.get('.input-module_input__3wsvS').eq(0).should('be.visible').type('foo')
cy.get('.input-module_input__3wsvS').eq(1).should('be.visible').type('bar')

Upvotes: 1

Related Questions