Make demo example from `@puppeteer/replay` work

[christian-bromann]

In https://github.com/puppeteer/replay/issues/268 there is currently an example outlined that projects can use for demo purposes. This example doesn't work with this extension for the following reasons:

1. calling await browser.$("[data-test=Americano]").click() fails as the checkout element overlays the click position, I created an issue in the WebDriver spec suggesting that elements should be scrolled into the center of the view rather than to the end to increase the likelyhood to not run into this situation
2. ~We currently transform this selector~

   "selectors": [
       [
         "aria/Add one Espresso"
       ],
       [
         "#app > div:nth-child(4) > div.pay-container > ul > li:nth-child(2) > div.unit-controller > button:nth-child(1)"
       ]
     ],

   ~into the following WebdriverIO selector button=Add one Espresso which translates this WebDriver xPath: .//button[normalize-space() = "Add one Espresso"], unfortunately the button has an aria label and its text is just a + which means that the aria label takes precedence and finding the element by text won't work.~

Both issues can be solved by:

1. always scroll the element into the center of the view via:

   await browser.execute((elem) => elem.scrollIntoView(), elem)

   but this would make the test script very verbose and doesn't guarantee it is solved in all occasions.

2. ~we could make an exemption to use "find by element text" for buttons and just use the CSS selector provided by @puppeteer/replay, unfortunately that selector also doesn't work for us~

Edit: The second problem was solved by introducing an accessibility name selector to WebdriverIO

[christian-bromann]

The second issue will be solved by https://github.com/webdriverio/webdriverio/pull/8762

[christian-bromann]

https://github.com/webdriverio/webdriverio/pull/8762 has landed, therefor closing