Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

difference on how cypress click and user click behaves #3135

Closed
basileperraud opened this issue Jan 15, 2019 · 4 comments

Comments

2 participants
@basileperraud
Copy link

commented Jan 15, 2019

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

This comment has been minimized.

Copy link
Collaborator

commented Jan 15, 2019

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

close

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 bahmutov closed this Jan 15, 2019

@bahmutov

This comment has been minimized.

Copy link
Collaborator

commented Jan 15, 2019

@bahmutov

This comment has been minimized.

Copy link
Collaborator

commented Jan 15, 2019

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.

pipe-click

@bahmutov

This comment has been minimized.

Copy link
Collaborator

commented Jan 23, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.