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.

#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 ***@***.***> 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 <#2267 (comment)>, 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.