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

.should("be.visible") doesn't interpet elements with " style='transform: scale(0,0)' " correctly #723

Closed
garrett-thompson opened this issue Oct 10, 2017 · 3 comments · Fixed by #5590 · May be fixed by ngChile/ngx-devkit-cypress-builder#20 or qsays/grafana#1
Closed

.should("be.visible") doesn't interpet elements with " style='transform: scale(0,0)' " correctly #723

garrett-thompson opened this issue Oct 10, 2017 · 3 comments · Fixed by #5590 · May be fixed by ngChile/ngx-devkit-cypress-builder#20 or qsays/grafana#1
Labels
pkg/driver This is due to an issue in the packages/driver directory topic: visibility 👁 type: bug

Comments

@garrett-thompson
Copy link

garrett-thompson commented Oct 10, 2017 •
edited by jennifer-shehane
Loading

Current behavior:

.should('be.visible') recognizes elements with style="transform: scale(0,0)" as being visible.

Desired behavior:

.should('be.visible') should determine that elements with style="transform: scale(0,0)" are actually not visible

How to reproduce:

  1. create an element on a page that has style="transform: scale(0,0)"
  2. write test that checks that element's visibility like so: cy.get('#el').should('be.visible');

Additional Info (images, stack traces, etc)

screen shot 2017-10-10 at 4 08 01 pm

  • Operating System: Mac OS Sierra
  • Cypress Version: 1.0.1
  • Browser Version: Chrome 61
@jennifer-shehane jennifer-shehane added pkg/driver This is due to an issue in the packages/driver directory topic: visibility 👁 labels Oct 11, 2017
@jennifer-shehane jennifer-shehane mentioned this issue Jan 31, 2018
Closed
15 tasks
@cypress-bot cypress-bot bot added the stage: ready for work The issue is reproducible and in scope label Feb 19, 2019
@jennifer-shehane jennifer-shehane added difficulty: 1️⃣ stage: ready for work The issue is reproducible and in scope and removed stage: ready for work The issue is reproducible and in scope labels Feb 19, 2019
@jennifer-shehane
Copy link
Member

Can recreate with following code. The span should clearly not be visible as it cannot be seen.

index.html

<!DOCTYPE html>
<html>
<head></head>
<body>
  <div style="transform: scale(0,0)">
    <span id="transform-scale">TRANSFORMERS</span>
  </div>
</body>
</html>

spec file

it('should not be visible', function () {
  cy.visit('index.html')

  cy.get('#transform-scale').should('be.visible')
  cy.get('#transform-scale').should('not.be.visible')
})

Added a failing test here: #4421

jennifer-shehane added a commit that referenced this issue Jun 12, 2019
@jennifer-shehane
Add failing tests for transform scale
8a5a996 
Addresses #723
jennifer-shehane added a commit that referenced this issue Jun 19, 2019
@jennifer-shehane
Address some visibility issues (#4421)
e2205f9 
* Add failing test case for visible element within overflow hidden then position absolute element.

Addresses #4395

* Write failing test case for when parent is flex and overflow hidden with el outside bounds

Addresses #4161

* Wrote failing test for visibility outside of clip-path

Addresses #1178

* Add failing tests for transform scale

Addresses #723

* Add failing test for backfact-visibility hidden example

* cs -> js fixes

* Add more specific error when el is not element

* Always return as visible when checking html or body

* Add comments + rename methods to be more exact

* Add case for isHidden when visibility is collapse

* Add failing test cases for visibility issues

* Add comment about how ensureVisibility works under the hood

* Add checks and tests for opacity: 0 to be hidden

* Simplify if/case statements to be more readable

* Expand check for offset parents to also check children of ancestor for positioning attributes

close #4395
close #755

* Fix issue where els with parents with absolute position inside overflow hidden would be calculated as not visible

* comment out opacity checks for patch release

* Add more tests around new visibility assertions

- Add case to make sure display none is not on the option or optgroup
itself

* Fix failing assertion - where el was undefined when looking for visibiliyt

* remove commented out code involving opacity 😬
@sainthkh sainthkh mentioned this issue Nov 4, 2019
Merged
1 task
@cypress-bot cypress-bot bot added stage: work in progress and removed stage: ready for work The issue is reproducible and in scope labels Nov 4, 2019
@cypress-bot cypress-bot bot added stage: needs review The PR code is done & tested, needs review stage: work in progress and removed stage: work in progress stage: needs review The PR code is done & tested, needs review labels Nov 26, 2019
@cypress-bot
Copy link
Contributor

cypress-bot bot commented Dec 5, 2019

The code for this is done in cypress-io/cypress#5590, but has yet to be released.
We'll update this issue and reference the changelog when it's released.

@cypress-bot cypress-bot bot removed the stage: needs review The PR code is done & tested, needs review label Dec 5, 2019
@cypress-bot
Copy link
Contributor

cypress-bot bot commented Dec 12, 2019

Released in 3.8.0.

@cypress-io cypress-io locked as resolved and limited conversation to collaborators Dec 16, 2019
@jennifer-shehane jennifer-shehane mentioned this issue Dec 18, 2019
Closed
@cypress-io cypress-io unlocked this conversation Dec 18, 2019
@snyk-bot snyk-bot mentioned this issue Dec 21, 2019
Open
@snyk-bot snyk-bot mentioned this issue Mar 5, 2020
Open
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 👁 type: bug
Projects
None yet
Milestone
No milestone
2 participants
@jennifer-shehane @garrett-thompson