Cypress: difference on how cypress click and user click behaves

[basileperraud]

I'm trying cypress to test my application and I'm using a popup to select a date. Normally the popup closes automatically when the user chooses a date, the cypress click function allows me to select a date but does not close the popup, which prevents the tests from proceeding properly. Indeed, the elements of my page are then hidden by the popup. After gitter discussion we think it might be some difference on how cypress click and user click behaves

Current behavior:

When I select a date manually the popup closes while when cypress does it the pop up remains open

Desired behavior:

That when I select my date with cypress the popup closes

Steps to reproduce: (app code and test code)

Here is a reproducible example https://pastebin.com/FBnrQqSm that targets this stackblitz example https://stackblitz.com/edit/github-ylq5q4

Versions

3.1.4

[bahmutov]

The problem in this example is not the difference in behavior, Cypress does its thing correctly - except it clicks _too soon_. When modal shows up, Cypress clicks immediately, but the app in this case has NOT attached event listeners to the click event yet. Thus the click gets lost. Here is rewritten test that adds a delay of 500ms to give the app a chance to "catch up"

/* eslint-env mocha */
/* global cy */
describe('Date component sample', () => {
  before(() => {
    cy.visit('https://github-ylq5q4.stackblitz.io')
  })
  context('Calendar', () => {
    it('Auto closes the calendar', () => {
      const day = 5
      cy.get('[data-context="container"]', { timeout: 20000 }).within(() => {
        cy.get('input').click()
      })

      cy.wait(500)

      cy.get('.owl-dt-popup')
        .should('be.visible')
        .find('.owl-dt-calendar-cell-content')
        .contains(new RegExp(`^\\b${day}\\b$`))
        .click()

      cy.get('.owl-dt-popup').should('not.be.visible')
    })
  })
})

The test passes fine

Without cy.wait(500) there is a race condition between the app code and Cypress click. It would be nice to add event or a way to say "click when app is ready", hmm, I need to think how to better do this.

[bahmutov]

Good reading: https://www.cypress.io/blog/2018/02/05/when-can-the-test-start/

[bahmutov]

Note: thanks to @NicholasBoll and his cypress-pipe you can keep clicking on the button until the following should(cb) passes. This is the fastest way to implement this test and does not require cy.wait(...)

/* eslint-env mocha */
/* global cy */
describe('Date component sample', () => {
  before(() => {
    cy.visit('https://github-ylq5q4.stackblitz.io')
  })
  context('Calendar', () => {
    it('Auto closes the calendar', () => {
      const day = 5
      cy.get('[data-context="container"]', { timeout: 20000 }).within(() => {
        cy.get('input').click()
      })

      const click = $el => $el.click()

      cy.get('.owl-dt-popup')
        .should('be.visible')
        .find('.owl-dt-calendar-cell-content')
        .contains(new RegExp(`^\\b${day}\\b$`))
        .pipe(click)
        .should($el => {
          expect($el).to.not.be.visible
        })

      cy.get('.owl-dt-popup').should('not.be.visible')
    })
  })
})

It keeps clicking until the element disappears again.

[bahmutov]

Described the problem in blog post https://www.cypress.io/blog/2019/01/22/when-can-the-test-click/