Introduce CodecetptJS WebElement Class to mirror chosen helpers' element instance

[m3t4n]

Discussed in #3001

^{Originally posted by m3t4n August 24, 2021}
While we are using CodeceptJS with test framework helpers, the main entity for a DOM object is not exposed.
These are referred to as different names in frameworks. ElementHandle for Playwright, WebElement for WebDriverIO, ElementFinder for Protractor etc...

CodeceptJS currently is swallowing this exposure and only accepting locator parameters to the wrapped assertion methods such as I.click('#submit');. Whereas we should be able to locate element(s) and should be able to perform desired actions on these element(s) accordingly.

A common use case can be:

1. locate multiple elements matching the selector criteria in the page
2. populate them in an Array
3. perform a check for an attribute value on all these elements using a loop.
4. find the matching one
5. perform a click action on that specific element or any further test.

with current design we can only use a hack like below to perform this action (using Playwright for this example):

1. create a variable in :any type
2. find the element using I.usePlayWrightTo(...., ({page}) => { this.localElm = page.$$(...) });
3. then loop to find your match, again using I.usePlayWrightTo(...., ({page}) => { this.localElm.foreach(elm => (elm. getProperty(....)........

This class should bind according to the chosen helper and shall allow us to be exposed to further methods of DOMElement such as getProperty, getInnerHtml, getBoundingBox etc... further more, it will also allow us to perform additional searches within the element, such as: elm.$ or elm.$$....