Polyfill for nth-match CSS 4 selector

[Risto-Stevcev]

It would be nice to have the nth-match pseudo-selector polyfill when using WebdriverIO.

In jQuery, this can easily be achieved programatically with something like: $('elem.someclass').eq(2), but it would require using messy xPath in the current version of WebdriverIO, because the nth element of .someclass can't be selected using any other CSS selector except for currently unavailable CSS 4 nth-match.

There's the elements protocol, but there's no way to send the nth element from that to another command.

It would be nice to either have that polyfill like this:

browser.selectByValue('select.comparators:nth-match(2)', 'Some value')

Which could be polyfilled by using the this.elements protocol and selecting the WebElement JSON index from what is asked for in nth-match. If there's no nth-match in the selector, it can just default to it's current behavior and use this.element.

Or something generic and similar to jQuery, which would detect if the selector argument is left out and would attempt to read the result from the previous promise, such as this:

browser.elements('select.comparators').eq(2).selectByValue('Some value')

[christian-bromann]

Let's also enable :visible and :hidden

[jkwaldrip]

I'm running into a problem with this right now. Is this issue scoped for any future release?

[christian-bromann]

@jkwaldrip this wasn't really high on my prio list. Happy to receive PRs for that. You can work around this now by doing:

const comparators = $$('select.comparators');
comparators[2].selectByValue('Some value');

[jkwaldrip]

@christian-bromann Thanks, I've added an update on #1140 for the issue I was encountering with setValue() in case anyone else runs into it.

[BlueRaja]

This should probably be closed. nth-match doesn't even exist anymore. It also was never equivalent to jQuery's :eq() selector (which is confusing, which is why it was removed)

Though, getting support for the :eq() selector would be extremely useful..

[christian-bromann]

agree with @BlueRaja. My workaround above is actually the valid solution. You can also use .filter to limit the selection by arbitrary functions, e.g.

        const results = $$('.commands.property a').filter(function (link) {
            return link.isVisible();
        });