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.

Sign up for GitHub

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

4.12.0-4.12.1 visibility check regression issue #8190

Closed
maximkoshelenko opened this issue Aug 5, 2020 · 3 comments
Closed

4.12.0-4.12.1 visibility check regression issue #8190

maximkoshelenko opened this issue Aug 5, 2020 · 3 comments
Assignees
@kuceb
Labels
pkg/driver This is due to an issue in the packages/driver directory stage: ready for work The issue is reproducible and in scope type: duplicate This issue or pull request already exists type: regression A bug that didn't appear until a specific Cy version release v4.12.0 🐛 Issue present since 4.12.0

Comments

@maximkoshelenko
Copy link

maximkoshelenko commented Aug 5, 2020 •
edited by sync-by-unito bot

Current behavior:

Starting from 4.12.0 should('not.be.visible') check fails.

Desired behavior:

During running same test on 4.10.0 - 4.11.0 test pass.

Test code to reproduce

    cy.visit('https://live-mdmc.pantheonsite.io');
        cy.get('#global-search-block-form')
      .should('not.be.visible');
    cy.get('#searchAnchor')
      .click();
    cy.get('#global-search-block-form')
      .should('be.visible');
    cy.get('button[aria-label=Close]')
      .click();
    cy.get('#global-search-block-form')
      .should('not.be.visible');

Versions

4.12.0-4.12.1 (Mac, Windows, Linux)
@jennifer-shehane
Copy link
Member

I can confirm this from the test code provided. This DOM element disappears after clicking the 'close' button in the app - so should no longer be visible, but the test fails saying it is still visible.

This is a regression introduced in 4.12.0, specifically in #8095 (I compared the commit before and this commit - it fails in this commit).

Repro

I've narrowed down the reproducible issue to the following. It's still a bit complex, so I'm not exactly sure which piece is causing the issue.

index.html

<html>
<head>
  <style>
    .global-search-modal {
      opacity: 0;
      pointer-events: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
    }

    .open {
      opacity: 1;
      pointer-events: auto;
    }
  </style>
</head>
<body>
  <header style="padding: 30px 0">
    <div style="display: flex;">
      <div style="display: flex; margin-left: auto">
        <nav>
          <ul>
            <li style="width: 500px;"></li>
          </ul>
        </nav>
        <button class="global-search">Search</button>
        <div class="global-search-modal">
          <div style="display: flex; align-items: center; height: 168px;">
            <form id="global-search-block-form" style="position: relative; margin-left: auto;">
              <input />
            </form>
            <button class="close">Close</button>
          </div>
        </div>
      </div>
    </div>
  </header>
  <div style="height: 1000px"></div>
<script>
  const $searchModal = document.querySelector('.global-search-modal');
  var isModalOpen = false;

  document.querySelector('.global-search').addEventListener('click', function () {
    if (isModalOpen) {
      isModalOpen = false;
      $searchModal.classList.remove('open');
    } else {
      isModalOpen = true;
      $searchModal.classList.add('open');
    }
  })

  document.querySelector('.global-search-modal .close').addEventListener('click', function () {
    isModalOpen = false;
    $searchModal.classList.remove('open');
  })
</script>
</body>
</html>

spec.js

it('test', () => {
  cy.visit('index.html');
  cy.get('#global-search-block-form')
    .should('not.be.visible');
  cy.get('.global-search')
    .click();
  cy.get('#global-search-block-form')
    .should('be.visible');
  cy.get('.close')
    .click();
  cy.get('#global-search-block-form')
    .should('not.be.visible');
})

4.11.0

Screen Shot 2020-08-07 at 2 30 03 PM

4.12.0

Screen Shot 2020-08-07 at 2 29 17 PM

@jennifer-shehane jennifer-shehane added v4.12.0 🐛 Issue present since 4.12.0 type: regression A bug that didn't appear until a specific Cy version release internal-priority pkg/driver This is due to an issue in the packages/driver directory labels Aug 7, 2020
@cypress-bot cypress-bot bot added the stage: ready for work The issue is reproducible and in scope label Aug 7, 2020
@kuceb
Copy link
Contributor

kuceb commented Oct 2, 2020 •
edited

This is due to the element being 'hidden' with opacity:0 and pointer-events:none. In previous versions we incorrectly considered some visible pointer-events:none elements as being hidden, which was fixed in 4.12.0.

It looks like this is an edge case where Cypress doesn't consider opacity:0 as hidden, similar to #4474. Working on a fix

@kuceb
Copy link
Contributor

kuceb commented Oct 2, 2020

fixed in #8244, however that PR is a breaking change so it's scheduled for 6.0.

@kuceb kuceb added the type: duplicate This issue or pull request already exists label Oct 2, 2020
@kuceb kuceb closed this as completed Oct 2, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@kuceb kuceb

Labels
pkg/driver This is due to an issue in the packages/driver directory stage: ready for work The issue is reproducible and in scope type: duplicate This issue or pull request already exists type: regression A bug that didn't appear until a specific Cy version release v4.12.0 🐛 Issue present since 4.12.0
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@jennifer-shehane @kuceb @maximkoshelenko