Support More Complex CSS Selectors

[diba1013]

Problem

When we encounter missing elements with the Unbreakable Selenium, we try to find the old element inside the golden master. Therefore, we query the By used and look what type was used (i.e. By.id, By.class).

However, when we try to find By.cssSelector, we currently only support simple css selectors. The supported selectors look for some known attributes like id or class. For example:

• By.cssSelector( "#id" );
• By.cssSelector( ".class" );

This should be the same for @FindBy.

Solution

We want to support more complex selectors. Note, that this issue should only address selectors that query the current element. It should not look for children or parents. A complete specification of CSS selectors can be found in the CSS specification.

The current element would mean to selects any element (this also includes any * or no selector) and queries a predicate [] or state :. Note that the state may only look at the elements' attributes. Please refer to the examples below.

Examples this issue should address:

• .class1.class2
• p.intro
• div, p
• a[target]
• a[target=_blank
• input:checked

Examples not considered for this issue (see #390):

• div p
• div > p
• p::before
• p:nth-child(4)

Community

I kindly ask the community to provide examples below that should be reflected with this issue, so that we can use these to test the implementation.

[roesslerj]

By large parts implemented in https://github.com/retest/recheck-web/compare/feature/implement-issue-389

[briemla]

I checked the css files of some popular websites listed on Wikipedia. Pseudo-Selectors starting with : or :: or class, id and tag based ones are quite common. Attribute based selectors are present, too. Selectors starting with : or :: might be implemented by one rule each. This will allow more selectors than specified on w3schools. As I would expect the sites to be compatible with definition on w3school, this should be no big deal. Otherwise recheck will start to check syntax errors, e.g. allowing :in-range only on elements with min and max attributes.

[briemla]

All kinds of attribute selectors using [*] specified on w3schools are implemented.

[briemla]

Recheck currently supports the following pseudo-class selectors:

• checked
• disabled
• read-only (Different spelling than html attribute)

Recheck currently does not support the following pseudo-class selectors:

• root
• indeterminate
• default
• enabled
• link
• target
• visited
• optional
• required
• in-range
• out-of-range
• invalid
• valid
• read-write

An integration test checks all those selectors.

The following classes could be easily supported by a small extension in getAllElementsByPath.js:

• indeterminate via boolean property
• root as the property is only defined for the root element (typeof variable === 'undefined')
• enabled as the opposite of disabled

[briemla]

Other improvements concerning TestHealer are added as JIRA issues: RET-1913 and RET-1912.