Add support for find by attribute and content

[gztomas]

Proposed changes

Add support for selecting elements by attribute as well as content.
Before this change it was only possible to select some element by a given tag name, id or class and a certain content, like div#main*=Hello.
After this change it will be also possible to select by attribute, like div[data-test-name="main"]*=Hello

Motivation

In our project we are using data-test-name attributes for marking elements that will be consumed by our tests. Since we are using styled components which already generate random class names for elements, we avoid polluting the class attribute by using this specific attribute for tests element targeting.

Types of changes

• Bugfix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)

Checklist

• I have read the CONTRIBUTING doc
• I have added tests that prove my fix is effective or that my feature works
• I have added necessary documentation (if appropriate)

Further comments

I have taken this as an opportunity for removing some repeated code, so now all the id class or attribute + content cases are handled by a single regular expression.

Reviewers: @webdriverio/technical-committee

[jsf-clabot]

All committers have signed the CLA.

[codecov]

Codecov Report

Merging #2965 into master will decrease coverage by 0.02%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##           master    #2965      +/-   ##
==========================================
- Coverage   95.34%   95.32%   -0.03%     
==========================================
  Files         111      111              
  Lines        2235     2223      -12     
  Branches      461      455       -6     
==========================================
- Hits         2131     2119      -12     
  Misses         94       94              
  Partials       10       10

Impacted Files	Coverage Δ
packages/webdriverio/src/utils.js	100% <100%> (ø)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 8e04bf7...ca1f5e5. Read the comment docs.

[gztomas]

@christian-bromann please let me know if you need anything from my side to move this forward.

[christian-bromann]

👍