Cypress button click return 422 Unprocessable Entity

Question

I'm actually going through some cypress test and i'm facing a strange bug.

I'm filling a form with some data, then I submit it by pressing a button. The form is composed of 2 vuetify select and 1 input.

Everything goes fine, but when I press submit button, I get an 422 Unprocessable Entity from backend, like it was missing one of the field.

1) This occurs only on 1st click. If, on my test, I write 2 click on button, the 2nd click works fine and my form is validated.

2) Also, I have same bug when I try to delete the entry that was just created by the form

Note that when I am on the app, there's isnt any error on button click.

Here is the code

cy.get('#standardindex-addnew').click({force: true})
      // fill the form
      cy.get('#filterrule-propertytype').parent().click()
      // select last item of list
      cy.get('[id^=list-]').last().click()
      // select operand 
      cy.get('#filterrule-operand').parent().click()
      // select last item of menu
      cy.get('[id^=list-]').last().click()
      // set value
      cy.get('#filterrule-value').type('Z1')
      cy.wait(2000)
      // hit the save button
      cy.get('#filterrule-updatebutton').click()
      cy.wait(2000)  // >>> ERROR 1 :1st time not working, 2nd time it works
      cy.get('#filterrule-updatebutton').click()
      // checking delete button 
      // ERROR 2 : the first click doesn't trigger the button !!
      cy.get('[id^=standardindex-card-]').first().find('#standardindex-deletebutton').click()
      cy.get('[id^=standardindex-card-]').first().find('#standardindex-deletebutton').click()
      cy.on('window:confirm', () => true);

here is an image of what happend on delete button

As you can see, the 1st click doesn't trigger the windows confirm event.. it's like the click did not work..

Answer 1

The line cy.on('window:confirm', () => true); is an passive event listener. You should set it above the click() command that triggers it.

Here's an example from Cypress

// app code
$('button').on('click', (e) => {
  const one = confirm('first confirm')

  if (one) {
    const two = confirm('second confirm')

    if (!two) {
      const three = confirm('third confirm')

      confirm('third confirm was ' + three)
    }
  }
})

// test code
it('can control application confirms', (done) => {
  let count = 0

  // make sure you bind to this **before** the
  // confirm method is called in your application
  //
  // this event will automatically be unbound when this
  // test ends because it's attached to 'cy'
  cy.on('window:confirm', (str) => {
    count += 1

    switch (count) {
      case 1:
        expect(str).to.eq('first confirm')
      // returning nothing here automatically
      // accepts the confirmation
      case 2:
        expect(str).to.eq('second confirm')

        // reject the confirmation
        return false

      case 3:
        expect(str).to.eq('third confirm')

        // don't have to return true but it works
        // as well
        return true

      case 4:
        expect(str).to.eq('third confirm was true')

        // using mocha's async done callback to finish
        // this test so we are guaranteed everything
        // got to this point okay without throwing an error
        done()
    }
  })

  // click the button causing the confirm to fire
  cy.get('button').click()
})