Click events on svg element generates: CypressError: Timed out retrying: Illegal invocation

[mechanical-turk]

Current behavior:

We have a click assertion:

cy.get('[data-role="rater-button"]')
    .first()
    .click();

instead of it clicking and continuing, we get this error: CypressError: Timed out retrying: Illegal invocation

Desired behavior:

It should click and advance.

Steps to reproduce:

Create an svg object, select it and click it.

Versions

Cypess 3.0.3
Mac OS X (10.12.6)

[brian-mann]

Yup, for sure a bug in 3.0.3.

[mechanical-turk]

@brian-mann Fyi, this wasn't a problem on 3.0.2.

[brian-mann]

Yup this was an area that we completely rewrote and it's a simple fix.

[yourownmood]

Just upgraded to 3.0.3 in my experience its not only related to SVG but to all css selectors like [aria-label="Title"]', [name="Title"]', etc.

3.0.2 is working fine! 😄

[brian-mann]

Can you provide more details? I’m not sure what you mean by “all CSS selectors”. A selector is just a way to target an element it’s not the actual element itself. Can you provide a small snippet of the underlying HTML structure that you’re interacting with that’s throwing this error? We are trying to get this bug fix out ASAP.

…

On Jul 31, 2018, at 2:30 AM, Steven Bax ***@***.***> wrote: Just upgraded to 3.0.3 in my experience its not only related to SVG but to all css selectors like [aria-label="Title"]',[name="Title"]', etc. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[yourownmood]

Sorry false, alarm i landed here because of the CypressError: Timed out retrying: Illegal invocation
Found out that the tests failing were clicking on a svg in a button.
So it should be svg related and not css selector related

[mattvb91]

Same issue here clicking on svg 3.0.3

[msmfsd]

Same issue with svg click and aria click

[gopijaganthan]

cy.get('a[href="/a/contacts"]', {timeout: 100000}).click(**{ force: true }**)

This worked for me

[0102qa]

Hi @brian-mann, i can reproduce problem for
cy.get('[data-test-generic="dashboardheader::iconbutton"]')
cy.get('[data-test-specific="middlenav-div(0)"] > :nth-child(1)')
on version 3.0.3. Works fine for 3.0.2

[brian-mann]

@0102qa we've already fixed the bug and it will go out in the next release

[ghost]

Hello all,

I'm not sure, but this might needs reopening. I just installed v3.1.0 and the same behaviour is occuring.
I have a button with an SVG element inside of it and when I run .click() on it (the button), it will throw the error: CypressError: Timed out retrying: Illegal invocation

I tried switching the button for a span with text (no SVG) and this works. Then I switched the button with SVG for a button with text and this also works. However the difference for me is when I downgrade to 3.0.2 the same error appears.

[brian-mann]

@webdevbe can you please put together a minimally reproducible repo showing the problem? We did fix this (and added tests) in 3.1.0 and if this is still failing we'll need help tracking down why.

[nmchaves]

fwiw 3.1.0 resolved the issue for my team. Thanks Brian!

[ghost]

Hi @brian-mann,

You can see the problem here: https://github.com/webdevbe/svg-cypress
To run please

• clone the repo
• run npm install
• run npm start
• in another tab run cypress open

Then you can select the project and the spec is called svg-test.js .

I tried two instances, one with an svg inside a button (which is the problem in my project) and one where there is just the SVG. Both throw the same error.

If you need any extra info, please let me know.

Thanks!

[ghost]

Hi @brian-mann,

Were you able to reproduce the issue with my test setup?

Thanks

[kuceb]

Hi @webdevbe
I was not able to reproduce this on Linux with Cypress 3.1.0
Here's the result of the tests:

I would try cypress cache clear and cypress install again

[ghost]

Hi @bkucera ,

I tried your suggestions, but they didn't change anything. I then went to one of my colleagues running Linux and there it does work. Personally I'm working on a Windows machine, perhaps this is the reason?

See the output here:

Regards

[kuceb]

@webdevbe what version of Chrome are you using?

[ghost]

@bkucera Version 68.0.3440.106 (Official Build) (64-bit)

[ghost]

@bkucera I can open a new issue if that is more clear then communication over a closed one. Let me know, thanks.

[mattrlong]

I'm also experiencing this error using 3.1.0 on macOS High Sierra, clicking an svg errors with: CypressError: Timed out retrying: Illegal invocation error.

Clicking the same selector through JQuery via Chrome console works as expected.

[kuceb]

@mattrlong what version of chrome are you on? I can't reproduce this on linux on chrome 68

[kuceb]

@webdevbe I think we should keep the issue here (for future reference), but I will reopen if I can get a reproducable

[mattrlong]

@bkucera sorry looked to be a version/caching issue. Can now no longer reproduce.

[kuceb]

@webdevbe are you still experiencing this issue?

[ghost]

@bkucera Yes, I just did a fresh run of the specs. But only on Windows, on Linux it works (as mentioned above). Still the same error : CypressError: Timed out retrying: Illegal invocation

Is there someone else in the team (running Windows) that can copy the example I've setup and test?

[kuceb]

I can try it in a windows VM

[kuceb]

@webdevbe Just fired up a windows 10 vm, the spec passed with both cypress run and cypress open on Chrome Version 68.0.3440.106 (Official Build) (64-bit)

[ghost]

@bkucera I don't know what the issue is then. As it seems that I'm the only one experiencing this issue for now, it will probably be something on my configuration.
FWIW, I'll paste the error trace from cypress run here:

 1) testblock should work, clicking on a btn:
     CypressError: Timed out retrying: Illegal invocation
      at Object.cypressErr (http://localhost:3000/__cypress/runner/cypress_runner.js:68160:11)
      at Object.throwErr (http://localhost:3000/__cypress/runner/cypress_runner.js:68125:18)
      at Object.throwErrByPath (http://localhost:3000/__cypress/runner/cypress_runner.js:68152:17)
      at Object.retry (http://localhost:3000/__cypress/runner/cypress_runner.js:61893:16)
      at retryActionability (http://localhost:3000/__cypress/runner/cypress_runner.js:53692:19)
      at tryCatcher (http://localhost:3000/__cypress/runner/cypress_runner.js:7091:23)
      at Function.Promise.attempt.Promise.try (http://localhost:3000/__cypress/runner/cypress_runner.js:4470:29)
      at tryFn (http://localhost:3000/__cypress/runner/cypress_runner.js:62129:24)
      at whenStable (http://localhost:3000/__cypress/runner/cypress_runner.js:62157:12)
      at http://localhost:3000/__cypress/runner/cypress_runner.js:61917:16
      at tryCatcher (http://localhost:3000/__cypress/runner/cypress_runner.js:7091:23)
      at Promise._settlePromiseFromHandler (http://localhost:3000/__cypress/runner/cypress_runner.js:5113:31)
      at Promise._settlePromise (http://localhost:3000/__cypress/runner/cypress_runner.js:5170:18)
      at Promise._settlePromise0 (http://localhost:3000/__cypress/runner/cypress_runner.js:5215:10)
      at Promise._settlePromises (http://localhost:3000/__cypress/runner/cypress_runner.js:5294:18)
      at Promise._fulfill (http://localhost:3000/__cypress/runner/cypress_runner.js:5239:18)
      at http://localhost:3000/__cypress/runner/cypress_runner.js:6778:46

As I can still continue by applying {force:true} I'm not blocked by this, so hopefully somewhere in the future it works as expected.

Thanks for looking into my issue and best regards