Inserting data in reloadable field in Cypress script

user_19784990 0
Viewed 34

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?

cypress javascript
2 Answers

You can try these:

cy.get('#ID').type('1234567', {force: true})
cy.get('#ID').type('1234567').trigger('change')
user_45712710

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

These steps should help you

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
user_169977070
Related