search

cypress-io / cypress

Fast, easy and reliable testing for anything that runs in a browser.
https://cypress.io
MIT License
46.8k stars 3.17k forks source link

Cypress 3 complains about covered elements that make no sense #2037

Closed aldarund closed 6 years ago

aldarund commented 6 years ago

Current behavior:

In 2.1.0 tests work fine. In 3.0(1) cypress test fails because cypress think that elements covered, but that just dont make any sense. For example:

CypressError: Timed out retrying: cy.click() failed because this element:
<a href="/auth/signup" class="v-btn v-btn--block v-btn--router primary white--text">...</a>
is being covered by another element:
<html lang="en" data-n-head="lang">...</html>

Or like this

CypressError: Timed out retrying: cy.click() failed because this element:
<button type="button" primary="" data-cy="signup" class="v-btn v-btn--block primary">...</button>
is being covered by another element:
<i data-cy="invalid-check" aria-hidden="true" class="v-icon grey--text text--lighten-1 mdi mdi-close-circle-outline"></i>

Desired behavior:

No errors with hovered elements like in 2.1

Versions

Windows 10, Chrome 68

jennifer-shehane commented 6 years ago

The first error message definitely looks unusual.

Could you provide an example of some html / tests that throw this error? We won't be able to investigate this issue without a reproducible example. If it is private code, try recreating the css/html just to reproduce the error.

aldarund commented 6 years ago

@jennifer-shehane https://beta.tenantreport.net - here is url test that produce first error

  it('Go to signup', () => {
    cy.visit('/')
    cy.contains('a', 'Try It Now').click()
    cy.contains('button', 'Sign up')
  })

test that produce second error

  it('Fill signup page', () => {
    cy.visit('/auth/signup/')
    cy.get('input[name=landlordType]')
      .click({ force: true })
      .then(() => {
        cy.contains('estate agent').click()
      })

Both code work fine in 2.1.0

jennifer-shehane commented 6 years ago

I am not experiencing this on my Mac in Chrome 67 or Canary 69. Will have to check in Windows/Chrome 68.

screen shot 2018-06-26 at 5 14 48 pm

Are you running these tests in 'interactive mode' or by running it using cypress run?

aldarund commented 6 years ago

@jennifer-shehane cypress open. Here screenshot when i run agains that url : https://i.imgur.com/4s8aT95.png

aldarund commented 6 years ago

@jennifer-shehane tried cypress run. This two test works fine with cypress run. But another bug -> https://github.com/cypress-io/cypress/issues/2044

aldarund commented 6 years ago

3.0.2 still have same problem

Vitao18 commented 6 years ago

I'm also having the same issue. Many of my tests broke when upgrading from version 2.x to 3.0.2 Errors are all very similar to each other:

CypressError: Timed out retrying: cy.click() failed because this element is not visible:

<button tabindex="0" class="jss104 jss89" type="button" id="new-ticket-button">...</button>

This element '<button#new-ticket-button.jss104.jss89>' is not visible because it has CSS property: 'position: fixed' and its being covered by another element:

undefined

Fix this problem, or use {force: true} to disable error checking.
CypressError: Timed out retrying: cy.type() failed because this element is not visible:

<input aria-invalid="false" aria-required="true" class="jss29" name="user" required="" type="text" value="">

This element '<input.jss29>' is not visible because it has CSS property: 'position: fixed' and its being covered by another element:

<label class="jss16 jss11 jss12 jss15" data-shrink="false">...</label>

Fix this problem, or use {force: true} to disable error checking.

https://on.cypress.io/element-cannot-be-interacted-with
brian-mann commented 6 years ago

We're aware of some issues regarding visibility that need refactoring. However in order to prioritize these issues we must have a reproducible repo.

Simply pasting the error is not enough. We have hundreds of tests around clicking and visibility, and need specific scenario's in which the algorithms aren't working.

Per your comment @Vitao18 we have no idea if this should even be happening or not. Is the element really being covered? Have you tried { force: true }? Was this happening on 2.x.x? Have you tried 3.0.1? Does this happen in cypress open vs cypress run? Can you paste an animated gif? Can you send us your test code.

aldarund commented 6 years ago

@brian-mann what about my reproducible example ? :)

brian-mann commented 6 years ago

I'm going off of what @jennifer-shehane said https://github.com/cypress-io/cypress/issues/2037#issuecomment-400464817

She usually takes the lead on reproducing issue.

Vitao18 commented 6 years ago

Per your comment @Vitao18 we have no idea if this should even be happening or not. Is the element really being covered? Have you tried { force: true }? Was this happening on 2.x.x? Have you tried 3.0.1? Does this happen in cypress open vs cypress run? Can you paste an animated gif? Can you send us your test code.

@brian-mann thanks for the fast response. My tests where passing in version 2.x.x. They break when upgrading to version 3.0.1 or 3.0.2, both using chrome-67 or electron(both headless and headed) It happens in cypress run but not in cypress open. I'll try to make a reproducible example and paste it here Also, I haven't tried using force: true as testings were passing before

aldarund commented 6 years ago

@jennifer-shehane any luck replicating issue?

larkintuckerllc commented 6 years ago

FYI... I just installed Cypress 3.0.2 (and then reverted back to 3.0.1) and going through the tutorial, I get the same "cover" error message on the following test in both cases.

describe('My First Test', function() {
  it('clicks the link "type"', function() {
    cy.visit('https://example.cypress.io')

    cy.contains('type').click()
  })
})

Finally started over with version 2.1.0 and it was successful. Something is odd here.

aldarund commented 6 years ago

@larkintuckerllc what os are u using and what version of chrome?

larkintuckerllc commented 6 years ago

Ok... Here is some more info...

OS: macOS High Sierra, Version: 10.13.5 Browser: Version 68.0.3440.59 (Official Build) beta (64-bit)

Shows up in Cypress as "Chrome 68". Here is the screenshot of the error:

note: I happen to know that I have not taken MacOS updates for a bit (will try that next).

screen shot 2018-07-17 at 3 11 07 pm

aldarund commented 6 years ago

Chrome 68 like in my case..

larkintuckerllc commented 6 years ago

A bit more information... Upgraded OS to MacOS 10.13.6 (no change).

BUT... Downgraded my browser to: Chrome Version 67.0.3396.99 (Official Build) (64-bit)

And the test was successful.

larkintuckerllc commented 6 years ago

screen shot 2018-07-17 at 3 38 50 pm

jennifer-shehane commented 6 years ago

I haven't downloaded and tested this in Chrome version 68.0.3440.59.

aldarund commented 6 years ago

Version 68.0.3440.59 (Official Build) beta (64-bit) - thats mine chrome at this moment where cypress 3.0.2 fails, but 2.1 works. But when i reported it 21 days ago there was earlier version of chrome, since then chrome updated itself several times

aldarund commented 6 years ago

Version 68.0.3440.68 (Official Build) beta (64-bit) - still not working :(

gregtillbrook commented 6 years ago

Im also experiencing the errors 'is being covered by another element <html lang="em"...'

Im on macOS Sierra 10.12.4 and using chrome Version 68.0.3440.75 (Official Build) (64-bit) (Id thought this was also occurring on chrome 67 but not so sure now).

Error seems to occur for all 'interaction' commands like; click, select & type

albertored commented 6 years ago

Same here on Ubuntu 16.04 and Google Chrome 68.0.3440.75. Downgrading to Google Chrome 67.0.3396.79 solves the issue.

kapalkat commented 6 years ago

I have the exact same thing after my Chrome updated to 68 version. Previously it was ok with 67 and Cypress 3.0.2. I haven't found a way to downgrade Chrome on Mac (haven't found any binaries on the web). What I did as a workaround: I switched on Cypress test runner to Electron 59 and it works fine now! Worry about my production tests as it is also using Chrome...headlessly though so maybe it's gonna work. Will check that and update my post here.

jennifer-shehane commented 6 years ago

Now having this fail in our own Cypress project on Chrome version 68.0.3440.75. This error is not happening in Canary 70...which makes me feel like this is a Chrome error. Trying to track this down in their issue.

Working in:

Likely introduced between:

Working in:

aldarund commented 6 years ago

Well, if it's chrome error why it work fine in Cypress 2? Also it certainly before build 59. At the moment I created issue there was either build 34 or 43 at that time.

aepplerplangrid commented 6 years ago

Running into this same issue

jennifer-shehane commented 6 years ago

Alright, I've narrowed down the issue. We recently added the --disable-blink-features=RootLayerScrolling flag to Cypress on browser launch to fix this issue.

It appears that this flag is now causing the issue within this thread, where the registered click positions of elements are shifted, so that the area Cypress calculates to click at, is not the coordinate that Chrome is listening at due to a bug. I have not tracked down the bug in Chromium yet because their bugs list is insanely long.

Hopefully removing this flag does not cause the AUT to shake again. I am not seeing this behavior anyway.

The Workaround Today

Within your cypress/plugins/index.js file, we will want to remove the --disable-blink-features=RootLayerScrolling flag from the flag arguments being sent to chrome before launch.

module.exports = (on) => {
  on('before:browser:launch', (browser = {}, args) => {
    if (browser.name === 'chrome') {

      args = args.filter((arg) => {
        return arg !== '--disable-blink-features=RootLayerScrolling'
      })

      return args
    }
  })
}

Cypress Fix

We will remove this flag in our next release of Cypress after tracking down the exact Chromium issues and ensuring the AUT shaking bug does not return.

brian-mann commented 6 years ago

We are going to remove --disable-blink-features=RootLayerScrolling for Chrome versions 68 or higher

brian-mann commented 6 years ago

The AUT shaking was primarily affecting versions 66 and 67, so it seems safe to remove although it is still an open bug on Chromium's bug tracker

pawelgalazka commented 6 years ago

Can confirm, had the same issue. @jennifer-shehane your work around helped

gramie commented 6 years ago

I was getting this error this morning, whereas it was working perfectly yesterday (and I made no changes). I'm using the local version of Cypress on OSX, and when my computer woke up this morning there was an error message about not being able to contact the server or something.

Closing Cypress.app and restarting it solved the problem.

egucciar commented 6 years ago

I'm still having this problem, what is the proposed fix? Do i need to C/P those LOCs above? Just upgraded to 3.1 in attempt to have this solved to no avail

jennifer-shehane commented 6 years ago

@egucciar Ensure that you remove the following code below from your plugins/index.js file (as you may have added this as a workaround previously for https://github.com/cypress-io/cypress/issues/1620)

module.exports = (on) => {
  on('before:browser:launch', (browser = {}, args) => {
    if (browser.name === 'chrome') {
      args.push('--disable-blink-features=RootLayerScrolling')
      return args
    }
  })
}
carollacerdaf commented 6 years ago

Hello there, I'm having the same problem.

Chrome: 68.0.3440.106 Cypress: 5.0.3

LekoArts commented 6 years ago

@jennifer-shehane Still getting this error and https://github.com/cypress-io/cypress/issues/2037#issuecomment-407898194 doesn't help either. Should I open an issue?

konekoya commented 6 years ago

Ran into the exact same issue. Upgrading to 3.1.0 fixed the issue for me. Thank you!

I'm using Chrome 68.0.3440.106 on macOS 10.13.6

jennifer-shehane commented 6 years ago

@LeKoArts What version of Cypress are you using?

LekoArts commented 6 years ago

@jennifer-shehane I'm using cypress@^3.1.0 and the only way my tests are passing right now is by using .click({ force: true }) which is a real bummer.

jennifer-shehane commented 6 years ago

@LeKoArts Could you include some of the errors you are getting / screenshots? Also include what version of Chrome you are using to test?

LekoArts commented 6 years ago

@jennifer-shehane I'm using Chrome 68 if you meant that:

image

18_08_8t64470e

As you see the element is clearly visible

jennifer-shehane commented 6 years ago

@LeKoArts This is an issue related to Cypress calculations used for visibility - where it thinks the element has height/width of 0 at the time of clicking. We need to improve our calculations on this.

Have you tried using .click({force: true})? This will bypass our visibility check.

See this issue: https://github.com/cypress-io/cypress/issues/2000

This is unrelated to the bug in this issue - which was effectively shifting the coordinates of every DOM element in the application.

LekoArts commented 6 years ago

@jennifer-shehane .click({force: true}) is solving this issue, yes. But for me it's a big bummer to bypass all this checks which are quite nice.

I don’t want to use force everywhere :(

nikhiletc commented 6 years ago

I am still facing this issue, .click({force: true}) it doesn't work for me, i am using chrome 69.0.3497.81 any updates ?

chilikasha commented 6 years ago

Cypress 3.1.0 Chrome 69.0.3497.100

Attaching a screenshot with my failure (though assert for "Unverified" label works fine)

cy.contains(mail_address).should('be.visible')
cy.contains('Unverified').should('be.visible')

2018-09-24 17 06 38

UPD: today I'm getting the following for "Unverified" label

This element '<title>' is not visible because its content is being clipped by one of its parent elements, which has a CSS property of overflow: 'hidden', 'scroll' or 'auto'
JamboBuenna commented 5 years ago

Any updates, still seeing this?

jennifer-shehane commented 5 years ago

This was a very bizarre issue concerning some Chrome flags in versions over 67 that inadvertently shifted the DOM so that it would cover elements. I am locking this conversation due to many comments about other visibility issues with assumptions that it is related to this use case.

We are aware of many other visibility issues and suggest you search the other issues tagged as such or open a new issue giving a reproducible example. Existing Visibility Issues