Skip to content

/ cypress

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
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
Labels
type: duplicate
Milestone
3.1.0

Comments

@greglds
Copy link

@greglds 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

@brian-mann brian-mann commented Aug 2, 2018

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 closed this 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
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
Projects
None yet
Milestone
3.1.0
Linked pull requests

Successfully merging a pull request may close this issue.

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