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

Visibility check should incorporate visibility of parent element(s) #3495

Closed
stefanschenk opened this issue Feb 26, 2019 · 6 comments · Fixed by #6799
Closed

Visibility check should incorporate visibility of parent element(s) #3495

stefanschenk opened this issue Feb 26, 2019 · 6 comments · Fixed by #6799
Assignees
@Aleksey28
Labels
AREA: client FREQUENCY: level 1 TYPE: bug The described behavior is considered as wrong (bug).
Milestone
Planned

Comments

@stefanschenk
Copy link
Contributor

Looking at the following example:

<body>
  <div>
    <span data-test="checkbox">
      <div style="display:none">
        <svg>...</svg>
      </div>
    </span>
...

If I perform a visibility check on the svg my test fails.
.expect(Selector('[data-test="checkbox"]).find('svg').visible).notOk()
AssertionError: expected true to be falsy

I suspect this happens because the svg element itself does not have display:none or a width and height of 0. But the parent of the svg is invisible, therefore from a DOM perspective (and user perspective), the child elements of the div are also invisible.

I would like to see that the visibility check incorporates the visibility of the parent element(s) of the tested element.

  • testcafe version: 0.23.3
  • node.js version: v9.5.0
  • command-line arguments: testcafe chrome test/specs/component-test
  • browser name and version: Chrome 71.0.3542
  • platform and version: Linux Ubuntu 17.10
@need-response-app need-response-app bot added the STATE: Need response An issue that requires a response or attention from the team. label Feb 26, 2019
@miherlosev miherlosev self-assigned this Feb 27, 2019
@miherlosev
Copy link
Collaborator

Thank you for the detailed description. I've reproduce the problem.

@need-response-app need-response-app bot removed the STATE: Need response An issue that requires a response or attention from the team. label Feb 27, 2019
@miherlosev miherlosev added TYPE: bug The described behavior is considered as wrong (bug). AREA: client STATE: Need response An issue that requires a response or attention from the team. and removed STATE: Need response An issue that requires a response or attention from the team. labels Feb 27, 2019
@AndreyBelym AndreyBelym added this to the Planned milestone Apr 17, 2019
@miherlosev
Copy link
Collaborator

For team:

index.html

<html>
    <body>
		<div>
			<span data-test="checkbox">
				<div style="display:none">
					<svg viewBox="0 0 300 100" stroke="red" fill="grey">
						<circle cx="50" cy="50" r="40" />
						<circle cx="150" cy="50" r="4" />
					</svg>
				</div>
			</span>
		</div>
	</body>
</html>

test.js

import { Selector } from 'testcafe';

fixture `Fixture`
	.page('http://localhost:8080/index.html');
	
test('test', async t => {
	const svg = Selector('[data-test=checkbox]').find('svg');
	
	await t
	.expect(svg.exists).ok()
	.expect(svg.visible).notOk();
});

@adlantz
Copy link

adlantz commented Jan 15, 2021

Hello was wondering if there's an update on this/should I expect a fix any time soon?

@need-response-app need-response-app bot added the STATE: Need response An issue that requires a response or attention from the team. label Jan 15, 2021
@aleks-pro
Copy link
Contributor

Hello @adlantz ,

There are no updates yet. Once we have any news, we will post it here.

@need-response-app need-response-app bot removed the STATE: Need response An issue that requires a response or attention from the team. label Jan 18, 2021
@adlantz
Copy link

adlantz commented Jan 19, 2021

In the meantime I've found a workaround that works for me. The code

yourSelector = yourSelector.filter((element) => element.closest('[style="display: none;"]') === null)

will filter out any invisible elements selected by your selector. Then you could do something like

t.expect(yourSelector.count).lte(0);

Ain't the prettiest solution but it does the deed.

@need-response-app need-response-app bot added the STATE: Need response An issue that requires a response or attention from the team. label Jan 19, 2021
@wentwrong
Copy link
Contributor

Hello @adlantz,

Thank you for sharing your workaround.

@need-response-app need-response-app bot removed the STATE: Need response An issue that requires a response or attention from the team. label Jan 20, 2021
@Aleksey28 Aleksey28 self-assigned this Dec 23, 2021
Aleksey28 added a commit to Aleksey28/testcafe that referenced this issue Dec 24, 2021
@Aleksey28
test: added test [Regression](DevExpressGH-3495) - Visibility check s…
96dc495 
…hould incorporate visibility of parent SVG element(s)
@Aleksey28 Aleksey28 mentioned this issue Dec 24, 2021
Merged
2 tasks
Aleksey28 added a commit to Aleksey28/testcafe that referenced this issue Dec 27, 2021
@Aleksey28
test: added test [Regression](DevExpressGH-3495) - Visibility check s…
ce8d64a 
…hould incorporate visibility of parent SVG element(s)
Aleksey28 added a commit to Aleksey28/testcafe that referenced this issue Dec 27, 2021
@Aleksey28
test: added test [Regression](DevExpressGH-3495) - Visibility check s…
01d1f02 
…hould incorporate visibility of parent SVG element(s)
AndreyBelym pushed a commit that referenced this issue Jan 19, 2022
@Aleksey28
fix: fixed incorrect check visibility of an SVG element in a hidden e…

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Verified
Learn about vigilant mode
048f96e 
…lement (#6799)

* test: added test [Regression](GH-3495) - Visibility check should incorporate visibility of parent SVG element(s)

* type: made optional second and third params of the method findParent

* fix: added check visibility for the parent of the svg element

* test: fixed test
@Makavelic Makavelic mentioned this issue Apr 22, 2022
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@Aleksey28 Aleksey28

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

Successfully merging a pull request may close this issue.

fix: fixed incorrect check visibility of an SVG element in a hidden element Aleksey28/testcafe
7 participants
@miherlosev @AndreyBelym @stefanschenk @aleks-pro @wentwrong @Aleksey28 @adlantz