Cypress looping through input-CodePudding

I want make a test (cypress) to loop through the inputs and type values in each input field, but i got error. Can anyone help me in that? Oops, it looks like you are trying to call a child command before running a parent command.

    <div >
     <div >
      <div >
       <div >
        <input type="text" id="fname" >
        <label for="fname" > FName</label>
       </div>
       <div >
        <input type="text" id="lname" > 
        <label for="lname" > LName </label>
       </div>
     </div>
    </div>

submitFormData(fname, lname){
        
        const inputFields = {
            Fname: fname,
            Lname: lname,
        }
        cy.get('.formrow')
          .find('input')
          .then(input =>{
              cy.wrap(input).each((field, value) =>{
                  cy.find(inputFields[`#${field}`]).type(inputFields[`${value}`])
              })
        })      
    }

CodePudding user response：

Something like this might work, directly use the <label> text to get your value to input

//earlier
const fname = 'John'
const lname = 'Jones'

const inputFields = {
  Fname: fname,
  Lname: lname,
}

cy.get('.formrow')
  .find('input')
  .each(($input, index) => {
    cy.wrap($input).sibling('label').invoke('text').then(label => 
      const value = inputFields[label.trim()];
      cy.wrap($input).type(value);
    })
  })

CodePudding user response：

You can directly do something like this. You can create an array with first name and last name and directly use them in type using their index positions.

let inputFields = ['fname', 'lname']

 cy.get('.formrow').find('input').each(($ele, index) => {
   cy.wrap($ele).type(inputFields[index])
 })

CodePudding user response：

The error message means

cy.find(inputFields[`#${field}`])

is incorrect because .find() can't be used as first command in the chain.

You would instead use

cy.get(inputFields[`#${field}`])

Also the selector to get the id would be different

cy.get(`#${inputFields[field]`)

CodePudding user response：

You can do something like this, using inputFields to drive the test

const inputFields = {
  Fname: { id: 'fname', value: 'Fred' },
  Lname: { id: 'lname', value: 'Smith'},
}

cy.get('.formrow').each(($row, index) => {
  cy.wrap($row).find('label').then($label => 
    const inputSelector = `#${inputFields[label.text()].id}`;
    const value = inputFields[label.text()].value;
    cy.get(inputSelector).type(value);
})

CodePudding user response：

Alternatively, loop through inputFields instead of using .each()

const inputFields = {
  fname: 'Tim',
  lname: 'Turner',
}

for (const key in inputFields) {
  const value = inputFields[key]
  cy.get(`.formrow input#${key}`)   // one input only, no need for .each()
    .type(value)
}

// Verify form fields
cy.get('.formrow input').eq(0).should('have.value', 'Tim')      // passes
cy.get('.formrow input').eq(1).should('have.value', 'Turner')   // passes