I am trying to automate my test case in Cypress. I have en input field of text i.e. customer Id. After inserting the customer Id other fields i.e. customer's name, address, telephone etc will be field up automatically if the customer exists in the database. The customer ID that I am using exists in the database and it works fine when I insert the ID manually. But when I run the Cypress script it doesn't.
Here is my code:
it ('Customer information', () => {
cy.get('#ID').click().type('1234567')
})
I have even tried with 'enter' but not working. Is there any idea or any alternative to insert a value which will reload the other fields?
The app is designed to fetch the customer for the id that's entered, which means there's an event handler set up to do this.
From type#Events-that-fire, these events are fired automatically
The following events will be fired based on what key was pressed identical to the event spec:
- keydown
- keypress
- beforeinput
- textInput
- input
- keyup
Also, since you tried cy.get('#ID').type('1234567{enter}'), the change event is also sent
Additionally change events will be fired either when the {enter} key is pressed
Try blurring the input
The test should mimic the actions a user takes, but {enter} may not trigger the response. Try cy.get('#ID').type('1234567').blur()
Checking for event listeners
Take a look at the Elements tab / Event Listeners in devtools to see what events are set up on the element.
Use .trigger() to fire the events that are listed. Even if they are one the above, still try to fire them after the .type() since there may be a timing issue.
Check for fetch
Take a look at the devtools Network tab to see if a fetch is triggered. The .type() command may be working but the fetch of customer data failing.
Switch to cypress-real-events
Add the package cypress-real-events and use
cy.get('#ID').focus()
cy.realtype('1234567{enter}')
cy.get('#ID').trigger(...) // events found in devtools
or
cy.get('#ID').focus()
cy.realtype('1234567').blur()
cy.get('#ID').trigger(...) // events found in devtools
You can try these:
cy.get('#ID').type('1234567', {force: true})
cy.get('#ID').type('1234567').trigger('change')