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.

Sign up for GitHub

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

Testcafe incorrectly detects svg as hidden #6998

Closed
Makavelic opened this issue Apr 22, 2022 · 4 comments · Fixed by #7042
Closed

Testcafe incorrectly detects svg as hidden #6998

Makavelic opened this issue Apr 22, 2022 · 4 comments · Fixed by #7042
Assignees
@miherlosev
Labels
FREQUENCY: level 1 TYPE: bug The described behavior is considered as wrong (bug).

Comments

@Makavelic
Copy link

Makavelic commented Apr 22, 2022 •
edited

What is your Scenario?

I have a svg with a parent div that has a height of 0. The SVG is visible and I want to click it.

What is the Current behavior?

Testcafe doesn't let me click the SVG because it thinks it's hidden:
The element that matches the specified selector is not visible.

What is the Expected behavior?

I should be able to click the SVG

What is your public website URL? (or attach your complete example)

TestcafeSampleProjectBug.zip

Sample html:

<html>
    <body>
		<div style="height: 0">
			<svg height="100" width="100">
				<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
			</svg>
		</div>
    </body>
</html>

What is your TestCafe test code?

import { t } from "testcafe";

fixture("bugTest").beforeEach(async t => {
	await t.navigateTo(`file://${__dirname}/testcafeBug.html`);
});

test("bug", async t => {
	await t.click("svg");
});

Your complete configuration file

No response

Your complete test report

No response

Screenshots

SVG with hidden parent:
visibleSvg

Steps to Reproduce

Steps

  1. Extract project
  2. Run yarn or npm to build project
  3. Launch test in terminal: testcafe chrome tests

TestCafe version

1.18.6

Node.js version

16.13.0

Command-line arguments

testcafe chrome tests

Browser name(s) and version(s)

Chrome 100

Platform(s) and version(s)

Windows 10

Other

This looks like a regression from #3495

src/client/core/utils/shared/visibility.ts

if (adapter.dom.isSVGElement(el)) {
        if (adapter.style.get(el, 'visibility') === 'hidden' || adapter.style.get(el, 'display') === 'none')
            return false;

        const parent = adapter.dom.findParent(el);

        return parent ? isElementVisible(parent) : true;
}

I suspect the problem is that testcafe checks visibility by looking at the height property. It is possible for a parent element to be hidden while the svg is visible and interactable.

Source:
https://github.com/DevExpress/testcafe/blob/master/src/client/core/utils/shared/visibility.ts#L12

if (elementRectangle.width === 0 || elementRectangle.height === 0)
            return false;
@Makavelic Makavelic added the TYPE: bug The described behavior is considered as wrong (bug). label Apr 22, 2022
@need-response-app need-response-app bot added the STATE: Need response An issue that requires a response or attention from the team. label Apr 22, 2022
@miherlosev
Copy link
Collaborator

Hi @Makavelic,

Thank you for the shared example. I've reproduced the issue.

@need-response-app need-response-app bot removed the STATE: Need response An issue that requires a response or attention from the team. label Apr 26, 2022
@miherlosev miherlosev self-assigned this May 19, 2022
@miherlosev miherlosev mentioned this issue May 20, 2022
Merged
@Makavelic
Copy link
Author

Any chance you can make a dot release? This is the only bug preventing me from upgrading. Thanks!

@need-response-app need-response-app bot added the STATE: Need response An issue that requires a response or attention from the team. label Jun 1, 2022
@Aleksey28
Copy link
Collaborator

Hi @Makavelic

Any personal estimate may be misleading, so I cannot currently tell you the precise date. Usually, we publish a new release approximately once every two weeks.

@need-response-app need-response-app bot removed the STATE: Need response An issue that requires a response or attention from the team. label Jun 2, 2022
@github-actions
Copy link

Release v1.20.0-alpha.1 addresses this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@miherlosev miherlosev

Labels
FREQUENCY: level 1 TYPE: bug The described behavior is considered as wrong (bug).
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

refix visibility check for SVG elements miherlosev/testcafe
3 participants
@miherlosev @Makavelic @Aleksey28