Add the capability to filter elements by their visibility

[miherlosev]

:hidden Selector - https://api.jquery.com/hidden-selector/
:visible Selector - https://api.jquery.com/visible-selector/

Updated:
Finally we plan to use the following syntax:

Selector('.hey').filterVisible()
Selector('.hey').filterHidden()

[inikulin]

These pseduo-selectors are not a part of any CSS spec and implementing them as pseudo-selectors will be quite complicated since we'll need to parse queries. We can introduce filter method instead:

Selector('.hey').hidden(true); // default
Selector('.hey').hidden(false);

Note that we can't use visible filter since there is a shorthand property with the same name.

[VasilyStrelyaev]

What do you think we should use instead of visible?
I guess visible is the only right word for this, so we will have to take something not quite correct yet simple enough.

Is it

1. displayed
2. shown (plays sort of nice with hidden)
3. ..?

[AlexanderMoskovkin]

I think visible, displayed and shown are to similar and can make more confusion. I prefer hidden

[inikulin]

Selector('.hey').filterVisible()
Selector('.hey').filterHidden()

[miherlosev]

In most cases we need a visible and accessible element (in viewport and etc.),
so I prefer Selector('.class').visible(true|false)

[inikulin]

@miherlosev #1018 (comment)

[VasilyStrelyaev]

Oh, after reading the user's issue I thought we were going to have two methods with bool parameters like hidden(bool) and visible(bool) and I was going to ask what's the difference between hidden(false) and visible(true).

It turns out that we don't. So, we need either two methods with no parameters or one parameterized.

Yet I can't choose between hidden(bool) and filterVisible + filterHidden

[miherlosev]

Note that we can't use visible filter since there is a shorthand property with the same name.

I don't see logic problem for this (I don't know technical context).

DOMNode State has visible property, but Selector has visible method.

[inikulin]

@VasilyStrelyaev https://derickbailey.com/2014/03/27/double-negatives-in-code-dont-not-avoid-double-negative-boolean-logic/

[inikulin]

@miherlosev Apart from it being a bad design decision for the API:

If you need to get the entire DOM element state, call the selector with the await keyword like you would do with regular async functions. It returns a DOM Node Snapshot that contains all property values exposed by the selector in a single object.

in https://devexpress.github.io/testcafe/documentation/test-api/selecting-page-elements/selectors.html#dom-node-snapshot (BTW, section that explains selector properties points to the DOM Node snapshot, so it's not quite clear that we expose these properties on Selector as well \cc @VasilyStrelyaev)

[VasilyStrelyaev]

@inikulin The topic that lists the DOM Node State members no longer uses the word snapshot. Now we say that it lists the State API.

And that topic is linked from a section that says about the selector API.

Selectors and promises returned by selectors expose API to get the state (size, position, classes, etc.) of the matching element. See DOM Node State.

Did I get right what you were asking about?

[inikulin]

@VasilyStrelyaev Yep, maybe it's worth mentioning that they are exposed as promises on Selectors and SelectorPromises, and as regular properties on snapshot in https://devexpress.github.io/testcafe/documentation/test-api/selecting-page-elements/dom-node-state.html

[AlexanderMoskovkin]

Selector('.hey').filterVisible()
Selector('.hey').filterHidden()

Looks clear

[VasilyStrelyaev]

Oliver suggested to refactor the entire Selectors topic (#1760) so I'll think of it as a part of this complex task.

[inikulin]

@VasilyStrelyaev And we should deprecate snapshots and SelectorPromises for the love of god. It will significantly simplify both codebase and the API.

[chit786]

How to click on this pseudo-selector, we have a situation where we have to 'click' on the pseudo selector (which is basically an icon). Any suggestion?

[chit786]

Currently this is how I am clicking on the element

await t
    .hover(Selector('div.display.inline-textarea'));

            const clickedElem = await t.eval(() => document.getElementsByClassName('release-description')[0]
                .getElementsByClassName('edit-icon')[0].click());

[AndreyBelym]

What do you call a pseudo selector? Could you give a part of the HTML markup?

From you code, they looks like regular CSS classes, so you would write something like

await t.click('release-description edit-icon');

[mkubrycz]

As a temporary workaround for this issue I'm using this module, maybe someone here will find it helpful

[lock]

This thread has been automatically locked since it is closed and there has not been any recent activity. Please open a new issue for related bugs or feature requests. We recommend you ask TestCafe API, usage and configuration inquiries on StackOverflow.