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

Jump to bottom

cy.click on a SVG or an element containing SVG throws Illegal Invocation error in Cypress 3.0.3 #2258

Closed
greglds opened this issue Aug 2, 2018 · 1 comment · Fixed by #2246
Closed

cy.click on a SVG or an element containing SVG throws Illegal Invocation error in Cypress 3.0.3 #2258

greglds opened this issue Aug 2, 2018 · 1 comment · Fixed by #2246
Labels
type: duplicate This issue or pull request already exists
Milestone
3.1.0

Comments

@greglds
Copy link

greglds commented Aug 2, 2018

Current behavior:

Since update to 3.0.3, cy.get( "element containing SVG" ).click() throws an error:
CypressError: Timed out retrying: Illegal invocation

Available workaround is to use { force: true } (doesn't work when clicking on SVG directly)

Desired behavior:

The same behavior as the other elements (not containing SVG): a simple click.

Steps to reproduce:

given this html body:

<body>
    <span id="test-text" href="#">
        text
    </span>
    <span id="test-svg" href="#">
        <svg height="100" width="100">
            <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
        </svg>
    </span>
</body>

and this spec:

describe("test click on svg", () => {
	beforeEach( () => {
		cy.visit('/');
	} );
	
	it( "clicks a span containing text", () => {
		cy.get("#test-text").click();
	} );
	
	it( "clicks a span containing SVG", () => {
		cy.get("#test-svg").click();
	} );
});

I obtain this result:

cypress-svg-bug

My current workaround:

Cypress.Commands.overwrite("click", (originalFn, subject, options = {}) => { 
    if( subject[ 0 ].getElementsByTagName('svg').length ) { 
        Object.assign( options, { force: true } ); 
    } 
 
    return originalFn(subject, options); 
});

Versions

Cypress 3.0.3, Windows 7, Chrome v 67.0.3396.99

On a side note, Cypress is great !
@brian-mann
Copy link
Member

This has already been fixed in a PR and will go out in the next patch release... approximately less than 24 hours.

#2246

@brian-mann brian-mann added the type: duplicate This issue or pull request already exists label Aug 2, 2018
@brian-mann brian-mann mentioned this issue Aug 2, 2018
Merged
@jennifer-shehane jennifer-shehane added this to the 3.1.0 milestone Aug 2, 2018
@jennifer-shehane jennifer-shehane removed stage: work in progress There is an open PR for this issue [WIP] stage: pending release labels Aug 6, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
type: duplicate This issue or pull request already exists
Projects
None yet
Milestone
3.1.0
Development

Successfully merging a pull request may close this issue.

ensure that SVG elements can be clicked and focused correctly cypress-io/cypress
3 participants
@brian-mann @jennifer-shehane @greglds