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

Position: fixed, partially superposed divs, determined as not visible #3369

Closed
nerfologist opened this issue Feb 7, 2019 · 5 comments
Closed

Position: fixed, partially superposed divs, determined as not visible #3369

nerfologist opened this issue Feb 7, 2019 · 5 comments
Labels
pkg/driver This is due to an issue in the packages/driver directory topic: visibility 👁

Comments

@nerfologist
Copy link

nerfologist commented Feb 7, 2019 •
edited by jennifer-shehane
Loading

Hello, I'm developing a simple mobile layout based on a side menu and a backdrop.

Backdrop has:

position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;

Drawer has:

position: fixed;
width: 70%;
height: 100%;
top: 0;
right: 0;

Here's the test

describe('Backdrop and side drawer layout', () => {
  it('recognizes both elements as visible', () => {
    cy.visit('https://507owq3644.codesandbox.io/');
    cy.get('[data-testid="side-drawer"]').should('be.visible');
    cy.get('[data-testid="backdrop"]').should('be.visible');
  });
});

Current behavior:

The test fails with the following error:

CypressError: Timed out retrying: expected '<div#backdrop>' to be 'visible'

This element '<div#backdrop>' is not visible because it has CSS property: 'position: fixed' and its being covered by another element:

<div id="side-drawer" data-testid="side-drawer">side dr...</div>

Desired behavior:

The test should recognize both elements as visible, as the drawer is only partially covering the backdrop.

Steps to reproduce: (app code and test code)

The described layout can be found here: https://codesandbox.io/s/507owq3644

The test code is included in the description.

Versions

Cypress: 3.1.5
Operating system: macOS High Sierra 10.13.6
Browser: Version 72.0.3626.96 (Official Build) (64-bit)

Thanks for your work! 👍
@cypress-bot cypress-bot bot added the stage: needs information Not enough info to reproduce the issue label Feb 7, 2019
@cypress-bot cypress-bot bot added stage: ready for work The issue is reproducible and in scope and removed stage: needs information Not enough info to reproduce the issue labels Apr 25, 2019
@jennifer-shehane
Copy link
Member

Thank you for providing a reproducible example!

@jennifer-shehane
Copy link
Member

Hey @nerfologist Any reason for closing this issue? The error is still reproducible as of yesterday.

@nerfologist
Copy link
Author

nerfologist commented Apr 26, 2019 •
edited
Loading

@jennifer-shehane sorry I probably closed it by mistake while checking your answer on my mobile device (I'm clumsy) and obviously failed to notice it. Reopening!

@nerfologist nerfologist reopened this Apr 26, 2019
@jennifer-shehane jennifer-shehane added the pkg/driver This is due to an issue in the packages/driver directory label Apr 26, 2019
@jennifer-shehane jennifer-shehane mentioned this issue Jun 10, 2019
Closed
15 tasks
@jennifer-shehane
Copy link
Member

jennifer-shehane commented Jun 10, 2019 •
edited
Loading

So, I've taken a look at this issue on visibility of the lefthand sidebar.

This one is a bit tricky. Asserting that the entire #backdrop element is visible is.....kind of untrue. Since the element expands the entire width of the page, truly 70% of that element is being covered by another element. So, should Cypress determine that element as visible truly?

What will be a more accurate test will be testing the elements within the #backdrop sidebar. For example, you can see below, I have a <span>VISIBLE</span> and <span>NOT VISIBLE</span> within the #backdrop where the spans are visible and not visible respectively. If you do use Cypress to assert the visibility of these elements within the #backdrop, Cypress returns the correct results.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div id="backdrop" style="width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); position: fixed; top: 0; left: 0;">
    <span>VISIBLE</span>
    <span style="position: absolute; left: 500px;">NOT VISIBLE</span>
  </div>
  <div id="side-drawer" style="width: 70%; height: 100%; background-color: palevioletred; position: fixed; top: 0; right: 0;">side drawer</div>
</body>
</html>
it('recognizes elements within backdrop as visible or not', () => {
  cy.visit('index.html');
  cy.get('#backdrop>span').first().should('be.visible'); // passes
  cy.get('#backdrop>span').last().should('be.visible');  // correctly fails
});

not-visible-span

While I do not consider this a bug in Cypress, I would qualify this as unexpected behavior. I think this can be improved upon within the issue where we will print reasons why we qualify something as not visible: #677

I will be closing this issue and adding a note in the above linked issue to handle messaging around elements that are partially visible.

@jennifer-shehane jennifer-shehane mentioned this issue Jun 10, 2019
Closed
@jennifer-shehane jennifer-shehane removed the stage: ready for work The issue is reproducible and in scope label Jun 10, 2019
@nerfologist
Copy link
Author

Hello and thanks for your detailed analysis @jennifer-shehane, it makes sense and I agree with your observations.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
pkg/driver This is due to an issue in the packages/driver directory topic: visibility 👁
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@jennifer-shehane @nerfologist