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.

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

Range Error :Maximum call stack size exceeded when calling scrollIntoView on shadow DOM el #7986

Closed
rameshrc opened this issue Jul 15, 2020 · 5 comments · Fixed by #8106 · May be fixed by Omrisnyk/npm-lockfiles#145 or Omrisnyk/npm-lockfiles#164
Assignees
Labels
pkg/driver This is due to an issue in the packages/driver directory topic: shadow dom Issues when testing shadow dom type: bug

Comments

@rameshrc
Copy link

rameshrc commented Jul 15, 2020

I have application with lit-html web component. When button is clicked on a test bed html, dialog (lit-html web component) appears with ok button. I am trying to hover over it. Since no solutions of hover work for me, i tried out "cypress-nhover": "1.0.0",

cy.get('dialog').get('.ok-button', { includeShadowDom: true }).nhover()

It creates an error

get  .ok-button 
scrollIntoView {log: false}
RangeError
Maximum call stack size exceeded

View stack trace
 Print to console
    at Sizzle (http://localhost:8002/__cypress/runner/cypress_runner.js:85876:27)
    at Function.Sizzle.matches (http://localhost:8002/__cypress/runner/cypress_runner.js:86505:10)
    at Function.jQuery.filter (http://localhost:8002/__cypress/runner/cypress_runner.js:87883:22)
    at winnow (http://localhost:8002/__cypress/runner/cypress_runner.js:87866:22)
    at jQuery.fn.init.is (http://localhost:8002/__cypress/runner/cypress_runner.js:87919:13)
    at findScrollableParent (http://localhost:8002/__cypress/runner/cypress_runner.js:151206:16)
    at findScrollableParent (http://localhost:8002/__cypress/runner/cypress_runner.js:151214:11)
    at findScrollableParent (http://localhost:8002/__cypress/runner/cypress_runner.js:151214:11)
    at findScrollableParent (http://localhost:8002/__cypress/runner/cypress_runner.js:151214:11)
    at findScrollableParent (http://localhost:8002/__cypress/runner/cypress_runner.js:151214:11)
    at findScrollableParent (http://localhost:8002/__cypress/runner/cypress_runner.js:151214:11)
    at findScrollableParent (http://localhost:8002/__cypress/runner/cypress_runner.js:151214:11)
    at findScrollableParent (http://localhost:8002/__cypress/runner/cypress_runner.js:151214:11)
    at findScrollableParent (http://localhost:8002/__cypress/runner/cypress_runner.js:151214:11)
    at findScrollableParent (http://localhost:8002/__cypress/runner/cypress_runner.js:151214:11)
@jennifer-shehane
Copy link
Member

Very likely the nhover plugin is not handling shadow DOM. I would suggest following through with the issue you've already opened on their project: avallete/cypress-nhover#14

If you have an example provided using solely Cypress without a plugin that causes an error when trying to trigger events on shadow dom, we'd be happy to look at it with a reproducible example provided.

@avallete
Copy link
Contributor

avallete commented Jul 17, 2020

Hi there,

With the help of @rameshrc I've been able to reproduce the error without cypress-nhover plugin in this MWE.

The issue seems to come from the scrollIntoView command when used with shadowDom.

I will try to investigate on this issue when I have some free time, but if anyone has any suggestion or known related issue I any piece of information would be appreciated.

@jennifer-shehane you may want to reopen this issue.

@jennifer-shehane
Copy link
Member

@avallete Nice! Thanks for providing the example. I can see that a Maximum call stack size exceeded error is thrown when calling scrollIntoView here.

cypres.json

{
  "experimentalShadowDomSupport": true
}

specs.js

it('renders a message on button click', () => {
  cy.visit('index.html')
  cy.get('button', { includeShadowDom: true }).scrollIntoView()
})

index.html

<html>
  <body>
    <element-one></element-one>

    <script type="module">
      import { LitElement, html } from 'https://unpkg.com/lit-element/lit-element.js?module'

      window.customElements.define('element-one', class extends LitElement {
        render() {
          return html`
            <button>Click me</button>
          `
        }
      })
    </script>
  </body>
</html>

Screen Shot 2020-07-20 at 5 18 06 PM

@jennifer-shehane jennifer-shehane added topic: shadow dom Issues when testing shadow dom type: bug pkg/driver This is due to an issue in the packages/driver directory labels Jul 20, 2020
@cypress-bot cypress-bot bot added the stage: ready for work The issue is reproducible and in scope label Jul 20, 2020
@jennifer-shehane jennifer-shehane changed the title Range Error :Maximum call stack size exceeded Range Error :Maximum call stack size exceeded when calling scrollIntoView on shadow DOM el Jul 20, 2020
@cypress-bot cypress-bot bot added stage: work in progress stage: needs review The PR code is done & tested, needs review and removed stage: ready for work The issue is reproducible and in scope stage: work in progress labels Jul 28, 2020
@cypress-bot cypress-bot bot added stage: pending release and removed stage: needs review The PR code is done & tested, needs review labels Aug 18, 2020
@cypress-bot
Copy link
Contributor

cypress-bot bot commented Aug 18, 2020

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

@cypress-bot
Copy link
Contributor

cypress-bot bot commented Aug 20, 2020

Released in 5.0.0.

This comment thread has been locked. If you are still experiencing this issue after upgrading to
Cypress v5.0.0, please open a new issue.

@cypress-bot cypress-bot bot locked as resolved and limited conversation to collaborators Aug 20, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
pkg/driver This is due to an issue in the packages/driver directory topic: shadow dom Issues when testing shadow dom type: bug
Projects
None yet
4 participants