Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Cypress 3 complains about covered elements that make no sense

See original GitHub issue

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

Issue Analytics

State:
Created 5 years ago
Reactions:5
Comments:47 (15 by maintainers)

Top GitHub Comments

18reactions

jennifer-shehanecommented, Jul 25, 2018

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.

3reactions

pawelgalazkacommented, Jul 27, 2018

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

Top Results From Across the Web

cypress fix this problem, or use {force: true} to disable error ...

Since your element is covered by another element, you can use click({force: true}) , to disable the error checking and perform the click....

How to check for an element that may not exist using Cypress

What is the correct way to check for the existence of an element? I need something like cy.get() that doesn't complain if the...

Element Coverage - Cypress

I have no idea, and yet the function was 100% covered by the unit tests … Data coverage. How well some code constructs...

Solving The Element Is Detached From DOM Error In Cypress

A video of a page refreshing and breaking a Cypress test and several possible solutions. Many people complain about the dreaded "Element is ......

The Most Common Cypress Mistakes - Christian Lüdemann

#1: Not making commands/assertions retry-able. This is the #1 reason people complain over Cypress being “flaky” as this destroys the main stability benefit ......