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 class="content__form">
<div class="formcolcontainer">
<div class="formcol">
<div class="formrow">
<input type="text" id="fname" class="forminput">
<label for="fname" class="formlabel"> FName</label>
</div>
<div class="formrow">
<input type="text" id="lname" class="forminput">
<label for="lname" class="formlabel"> 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}`])
})
})
}
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);
})
})
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]`)
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])
})