Cypress: Cypress fails with Maximum call stack size exceeded when clicking on SVG

[jwalton]

Current behavior:

Desired behavior:

I'm not even sure why this is "timing out"; the .tag-icon element is clearly visible in the rendered window on the right long, long before it times out:

But I suspect the "Maximum call stack size exceeded" is the real problem. Sometimes this works fine, and sometimes it fails. There doesn't seem to be any rhyme or reason to it. I had this proble on 1.4.2, and just upgraded to 3.0.3, but no change.

Steps to reproduce:

??? This is after some other stuff happens in my test, but I'm literally just trying to click an svg.

Any advice on how to debug this would be welcome.

Versions

Cypress: 1.4.2, 3.0.3
OS: High Sierra 10.13.6

[jwalton]

Sometimes I can also get it to fail with "CypressError: Timed out retrying: Illegal invocation".

The only thing that's at all weird about this element is that it's an <svg>.

[brian-mann]

That's a bug that's been fixed already by a PR and going out in the next release. Approx within next 24 hours.

https://github.com/cypress-io/cypress/pull/2246

[jwalton]

@brian-mann This is still happening for me in 3.1.0.

[brian-mann]

@jwalton will need a minimally reproducible repo then.

We added tests, they were breaking on 3.0.3, and the PR fixed the tests in 3.1.0.

[jwalton]

That would be quite a bit of work. :P If this gives you any hints; I tried wrapping my SVG in a div and clicking on the div instead - this sometimes works, and sometimes fails claiming the div is 0x0 and not visible (even though, again, this is plainly not the case - I can see the div, I can use the cross hairs icon at the top to select the div and it shows me it's size).

[jwalton]

I tried a quick pass at reproducing this by just copying all the HTML out of my page and generating a cypress test that just clicks on the svg element, but this doesn't reproduce it. More complicated than that...

[jwalton]

Although it doesn't fail consistently even in my "real" test - sometimes it fails, sometimes it passes. It's kinda random.

[dule]

I think I determined a possible reason why this is failing for us. It may be that the component of the element being clicked is getting detached from the DOM, and cypress is trying to be helpful by determining the reason why the element is not visible.

However, there may be an issue here in Cypress still; in this part of the algorithm:
https://github.com/cypress-io/cypress/blob/e46edab964c96b725ec55597b27cbf94eec18df6/packages/driver/src/dom/elements.coffee#L397L407.

What appears to be happening is it's recursively walking up the parent hierarchy, but eventually $el.parent() returns an empty jQuery object, and because it's not null, and calling .parent() on it still returns another jQuery object, it gets stuck in a recursive loop and eventually blows the stack.

I.e., Cypress might need an additional check here for $el.length === 0, and warn that the element or one of its parents is detached from the DOM.

[JeffBaumgardt]

I have just ran into the same issue in Cypress 3.1.0

I find a svg click in one test is clickable and fires the onClick event
The second test, same as before, find the svg (highlighted in DOM snapshot) but the click fails.

I'm going to have to wrap these svg's in another element just to move the click handler and see if that even works.

[dracos]

Seems to happen to us too with 3.1.0, only sometimes, retrying generally passes. The test that fails is the only one that involves a click on an SVG, making me think this must be related:
https://github.com/mysociety/fixmystreet/blob/85293da04381215fbf8384ec2e8d99d9862d6129/.cypress/cypress/integration/around_filters.js#L118

I agree with @dule that it does appear to be a bug in Cypress getting stuck in a loop (to blow the call stack) and that function and the one under it do seem possible places that could cause this in some manner. The function above the linked function does have a .length check, for example.

[brian-mann]

We just need a minimally reproducible example to confirm and fix the bug.

On Tue, Oct 2, 2018 at 10:58 AM M Somerville [e-mail]
wrote:

Seems to happen to us too with 3.1.0, only sometimes, retrying generally
passes. The test that fails is the only one that involves a click on an
SVG, making me think this must be related:

https://github.com/mysociety/fixmystreet/blob/85293da04381215fbf8384ec2e8d99d9862d6129/.cypress/cypress/integration/around_filters.js#L118

I agree with @dule https://github.com/dule that it does appear to be a
bug in Cypress getting stuck in a loop (to blow the call stack) and that
function and the one under it do seem possible places that could cause this
in some manner. The function above the linked function does have a .length
check, for example.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/cypress-io/cypress/issues/2267#issuecomment-426306226,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ABNc8PdOkospBsssbz-fA_6ApKZzwe3nks5ug375gaJpZM4Vs4FW
.

[dracos]

It's hard, given it does not happen every time, plus it does not send data to cypress when it happens. Any of the 'timed out' ones we have e.g. this one are due to it happening (but we then rerun so clicking through to Travis will show it passed second time). Also hard to provide a minimal example given our app is very server-side and so involves running a test server setup.

Here you go:

describe('fixmystreet.com test', function() {
    it('clicks on an SVG image', function() {
        cy.visit('https://www.fixmystreet.com/around?lon=-2.295894&lat=51.526877&zoom=6');
        cy.get('image[title="Drain cover gone in on one side"]:last').invoke('attr', 'xlink:href').should('contain', 'small');
        cy.get('image[title="Drain cover gone in on one side"]:last').click();
    })
})

is as minimal as I can make it, hope that's helpful. This is pointing at our live site, so please treat nicely.

[Hiestaa]

@brian-mann would it be possible to reopen this issue or should we bring the discussion somewhere else? The issue is legit and still happening in cypress 3.1.0, and @dracos example above allow reproducing the issue reliably.

I found a way to modify @dracos example above to make it behave the way it should, that may help figuring out how to fix the problem:

describe('fixmystreet.com test', function() {
    it('clicks on an SVG image', function() {
        cy.pause();  
        cy.visit('https://www.fixmystreet.com/around?lon=-2.295894&lat=51.526877&zoom=6');
        cy.get('image[title="Drain cover gone in on one side"]:last').invoke('attr', 'xlink:href').should('contain', 'small');
        cy.get('image[title="Drain cover gone in on one side"]:last').click({force: true});
    })
})

There are two main changes here:

• {force: true} option passed to the failing click. This disable verifications which trigger the Maximum call stack size exceeded error.
• Added cy.pause(). This effectively pause the script before clicking. Without this command, the call to click doesn't error, but doesn't do anything either. With this command, even if the run is resumed right away, the click does what it should every time.

Obviously this render the test unusable without the interactive runner, so that's not an acceptable workaround. But any advice into how to troubleshoot the case and get it to run would be welcome

[KakitLee]

I am still having the same issue as everyone reported above, I think the issue still persists in 3.1.0. I am clicking on a svg too.

[Bkucera]

Hi @Hiestaa, I could not reproduce with the above code. Are you still experiencing this problem?

[Hiestaa]

Sorry @Bkucera, the code I posted above points to a server I don't own, which seem to changed. An updated working version is shown below but the bug isn't showing up anymore on this page, I don't know if that's due to a fix in cypress or the tested UI but the click on the image element inside a SVG appear to work fine:

describe('fixmystreet.com test', function() {
    it('clicks on an SVG image', function() {
        cy.visit('https://www.fixmystreet.com/around?lon=-2.295894&lat=51.526877&zoom=6');
        cy.get('image[title="Large pothole reappeared after fixing"]:last').invoke('attr', 'xlink:href').should('contain', 'small');
        cy.get('image[title="Large pothole reappeared after fixing"]:last').click();
    });
});

I am definitely not experiencing the "Maximum call stack size exceeded" error anymore.

That being said, I am still experiencing an issue where a mouse click on the svg element triggers an event, but the same cy.click() does not. I am not able to provide a minimal example for this tho, so I cannot be sure this is still an issue in cypress. This will need more information until I or somebody else manages to reproduce something on a smaller example than his entire app.

[Bkucera]

@hiestaa when you say an event isn't being fired, which event specifically?
Currently we're working on fixing the events we fire, specifically adding pointer events and mouseover/mouseenter

[Hiestaa]

@Bkucera I was talking about he click event. It may be a different issue not specifically related to the svg element tho, I don't think we should focus on this in this thread. I'll open a separate issue if I manage to provide a minimal example where the problem can be reproduced.

It does look to me like the _maximum call stack size exceeded_ error is resolved which makes me wanna say the ticket is closed again, but not knowing what fixed it bothers me...

[justinebolinas]

Hi,

I am a newbie in cypress scripting, I just want to raise that this error is currently happening on my end. my cypress version is 3.2.0.

I am getting this whenever I am calling a parent.
RangeError: Maximum call stack size exceeded

Is there anyone can suggest a better way for me not to encounter this?

[jennifer-shehane]

@justinebolinas Can you provide the exact test code you are running where this .get('a') is located?

[HomoncikT]

Hi,

Cypress fails with "Maximum call stack size exceeded" when select an item from the drop-down menu.
The error occurred unexpectedly in the test that had worked properly before. It appeared for the first time in version 3.1.5. Upgrading to 3.2 did not help. The test tries to select items from several drop down lists.

function code :

Cypress.Commands.add('DropDownSelect',
/**
 * @param  {string} select
 * @param  {string} element
 */
  function (select, element) {
    cy.get('button[data-id="' + select.replace('#', '') + '"]')
      .click()
      .then(($dropdown) => {
        cy.wrap($dropdown).siblings('div.dropdown').within(() => {
          cy.get('ul.dropdown > li span').contains(element).click({force: true})
        })
      })
  }
) 

[Bkucera]

@HomoncikT just to confirm, the bug doesn't happen in 3.1.4?

[HomoncikT]

@Bkucera not before, now yes. The same as with version 3.1.5

[rodoabad]

This is still happening in 3.3.x.

[jennifer-shehane]

@rodoabad Can you provide the code to cause this failure please? Thanks

[marymuniz]

Hi,
Cypress 3.3.1 fails with "Maximum call stack size exceeded" during an API test.
The log is something like that:

RangeError: Maximum call stack size exceeded
    at _hasBinary (C:\Users\munizm\AppData\Local\Cypress\Cache\3.3.1\Cypress\resources\app\packages\socket\node_modules\has-binary\index.js:25:22)
    at _hasBinary (C:\Users\munizm\AppData\Local\Cypress\Cache\3.3.1\Cypress\resources\app\packages\socket\node_modules\has-binary\index.js:49:63)
at C:\Users\munizm\AppData\Local\Cypress\Cache\3.3.1\Cypress\resources\app\packages\socket\node_modules\socket.io\lib\socket.js:369:16
    at C:\Users\munizm\AppData\Local\Cypress\Cache\3.3.1\Cypress\resources\app\packages\server\lib\socket.js:308:22
    at tryCatcher (C:\Users\munizm\AppData\Local\Cypress\Cache\3.3.1\Cypress\resources\app\packages\server\node_modules\bluebird\js\release\util.js:16:23)
    at Promise._settlePromiseFromHandler (C:\Users\munizm\AppData\Local\Cypress\Cache\3.3.1\Cypress\resources\app\packages\server\node_modules\bluebird\js\release\promise.js:510:31)
    at Promise._settlePromise (C:\Users\munizm\AppData\Local\Cypress\Cache\3.3.1\Cypress\resources\app\packages\server\node_modules\bluebird\js\release\promise.js:567:18)
    at Promise._settlePromise0 (C:\Users\munizm\AppData\Local\Cypress\Cache\3.3.1\Cypress\resources\app\packages\server\node_modules\bluebird\js\release\promise.js:612:10)
    at Promise._settlePromises (C:\Users\munizm\AppData\Local\Cypress\Cache\3.3.1\Cypress\resources\app\packages\server\node_modules\bluebird\js\release\promise.js:687:18)
    at Async._drainQueue (C:\Users\munizm\AppData\Local\Cypress\Cache\3.3.1\Cypress\resources\app\packages\server\node_modules\bluebird\js\release\async.js:133:16)
    at Async._drainQueues (C:\Users\munizm\AppData\Local\Cypress\Cache\3.3.1\Cypress\resources\app\packages\server\node_modules\bluebird\js\release\async.js:143:10)
    at Immediate.Async.drainQueues (C:\Users\munizm\AppData\Local\Cypress\Cache\3.3.1\Cypress\resources\app\packages\server\node_modules\bluebird\js\release\async.js:17:14)
    at runCallback (timers.js:789:20)
    at tryOnImmediate (timers.js:751:5)
    at processImmediate [as _immediateCallback] (timers.js:722:5)

[ericraio]

I am getting the same error as @marymuniz

[slappinlappin]

I can confirm I am also getting the same error as @marymuniz when running an all tests via VSTS CI:

RangeError: Maximum call stack size exceeded
    at _hasBinary (C:\Users\VssAdministrator\AppData\Local\Cypress\Cache\3.3.0\Cypress\resources\app\packages\socket\node_modules\has-binary\index.js:25:22)
    at _hasBinary (C:\Users\VssAdministrator\AppData\Local\Cypress\Cache\3.3.0\Cypress\resources\app\packages\socket\node_modules\has-binary\index.js:49:63)
    at _hasBinary (C:\Users\VssAdministrator\AppData\Local\Cypress\Cache\3.3.0\Cypress\resources\app\packages\socket\node_modules\has-binary\index.js:49:63)
    at _hasBinary (C:\Users\VssAdministrator\AppData\Local\Cypress\Cache\3.3.0\Cypress\resources\app\packages\socket\node_modules\has-binary\index.js:49:63)
    at _hasBinary (C:\Users\VssAdministrator\AppData\Local\Cypress\Cache\3.3.0\Cypress\resources\app\packages\socket\node_modules\has-binary\index.js:49:63)
    at _hasBinary (C:\Users\VssAdministrator\AppData\Local\Cypress\Cache\3.3.0\Cypress\resources\app\packages\socket\node_modules\has-binary\index.js:49:63)
    at _hasBinary (C:\Users\VssAdministrator\AppData\Local\Cypress\Cache\3.3.0\Cypress\resources\app\packages\socket\node_modules\has-binary\index.js:49:63)
    at _hasBinary (C:\Users\VssAdministrator\AppData\Local\Cypress\Cache\3.3.0\Cypress\resources\app\packages\socket\node_modules\has-binary\index.js:49:63)
    at _hasBinary (C:\Users\VssAdministrator\AppData\Local\Cypress\Cache\3.3.0\Cypress\resources\app\packages\socket\node_modules\has-binary\index.js:49:63)
    at _hasBinary (C:\Users\VssAdministrator\AppData\Local\Cypress\Cache\3.3.0\Cypress\resources\app\packages\socket\node_modules\has-binary\index.js:49:63)
    at _hasBinary (C:\Users\VssAdministrator\AppData\Local\Cypress\Cache\3.3.0\Cypress\resources\app\packages\socket\node_modules\has-binary\index.js:49:63)
    at _hasBinary (C:\Users\VssAdministrator\AppData\Local\Cypress\Cache\3.3.0\Cypress\resources\app\packages\socket\node_modules\has-binary\index.js:49:63)

It is always showing at the same point. Sometimes it works, other times it doesn't. These tests contain a foreach but are limited to checking 20 results.

[flotwig]

When 3.3.2 is released, it will fix the has-binary "Maximum call stack exceeded" error (#4407).

[Bkucera]

Locking this as most recent discussions belong here https://github.com/cypress-io/cypress/issues/4346