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

Jump to bottom

DOM snapshots not correct when using Bootstrap Modals. #2584

Closed
jeff-h opened this issue Oct 10, 2018 · 2 comments
Closed

DOM snapshots not correct when using Bootstrap Modals. #2584

jeff-h opened this issue Oct 10, 2018 · 2 comments
Labels
topic: snapshot

Comments

@jeff-h
Copy link

jeff-h commented Oct 10, 2018

Current behavior:

When running tests that open and close Bootstrap modals, you see the modals open and close in rapid succession while the test runs as expected, but after the test is completed, you can't see the modals in the DOM Snapshots.

Desired behavior:

I expect you should be able to flick through the various DOM snapshots and see the modals in the state they were at in each step.

Steps to reproduce:

Run the following test.

context('Bootstrap modal', function() {

  it('should store the modal state in each DOM snapshot', function() {
    // Would have used https://getbootstrap.com/docs/3.3/javascript/ but it
    // contains too  much markup for this test to be convenient.

    cy.visit('https://www.w3schools.com/bootstrap/bootstrap_modal.asp')
    cy.get('.btn-success').click() // Open the modal.
    cy.get('.modal-footer > .btn').click() // Close the modal.
  })
})

In any DOM snapshot that should show the modal, the only modal-related element you see is the <div class="modal-backdrop fade in"></div> (the grey translucent modal backdrop).

The <body> correctly has the modal-open class. However the modal's div:

  • has modal fade but should also have an in class
  • is missing style="display: block"
  • has aria-hidden="true" which is wrong, but doesn't affect the visibility in the DOM snapshot

In a nutshell, if you add the in class, and add the style="display: block" the DOM snapshot is then correct. See before and after screenshots:

As Cypress captured it:
screen shot 2018-10-10 at 4 00 13 pm

How Cypress should have captured it, I think:
screen shot 2018-10-10 at 4 00 49 pm

Versions

Cypress 3.1.0
operating system: macOS Mojave 10.14
browser: Chrome 69
@jennifer-shehane jennifer-shehane added type: unexpected behavior User expected result, but got another stage: ready for work The issue is reproducible and in scope topic: snapshot labels Oct 10, 2018
@mjhea0 mjhea0 mentioned this issue Jul 12, 2019
Closed
@jacob-8
Copy link

jacob-8 commented Dec 28, 2019

I also have the same problem with Ionic 4 modals and Cypress 3.8.1 on Windows 10. I can give more details if necessary, but just hoping to +1 this. It almost makes Cypress useless for any modal related behavior with Ionic.

@jennifer-shehane
Copy link
Member

@jeff-h After looking this over, there doesn't seem to be any action required from Cypress here.

We show the snapshot of what occurs immediately after you click - we don't know what the action of the click is so would not know to 'wait' for a modal to be visible or to have the in class. If the modal animates in after 5000 milliseconds, for example, how would Cypress know that you wanted to wait for the modal to be visible.

Cypress is just catching it in an in between behavior, before the in class is added.

You can see the DOM snapshot correctly build if you add an extra assertion.

it('should store the modal state in each DOM snapshot', function () {
  cy.visit('https://www.w3schools.com/bootstrap/bootstrap_modal.asp')
  cy.get('.btn-success').click() // Open the modal.
  cy.get('.modal-footer').should('be.visible')
  cy.get('.modal-footer > .btn').click() // Close the modal.
})

@jennifer-shehane jennifer-shehane removed stage: ready for work The issue is reproducible and in scope type: unexpected behavior User expected result, but got another labels Dec 30, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
topic: snapshot
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@jeff-h @jennifer-shehane @jacob-8