Implement page.getBy* APIs

[ankur22]

trafficstars

Feature Description

Working with page.locator is better than working with page.$ since it allows us to work with elements on the page at any moment. These APIs both face the same issue which is that they work with XPath or CSS selectors which are cumbersome to use, hard to work with if you're not a frontend engineer, and depend on the DOM structure which can easily change. Having your tests depend on your DOM structure can lead to flakey/difficult to maintain failing tests (PW link to best practices)

Suggested Solution (optional)

Playwright has the following APIs on page:

getByAltText, getByLabel, getByPlaceholder, getByRole, getByTestId, getByText, and getByTitle.

They are less prone to DOM structure changes, instead working with use facing attributes. Take a look at these two and you will see that one is easier to understand than the other as well as less prone to DOM structures (which can be very flakey when id and class names are auto generated by the underlying frontend framework):

page.locator('button.buttonIcon.episode-actions-later');

vs

page.getByRole('button', { name: 'submit' });

Already existing or connected issues / PRs (optional)

https://github.com/grafana/k6/issues/4394

---

• [ ] https://github.com/grafana/k6/issues/4764
• [ ] https://github.com/grafana/k6/issues/4788
• [ ] https://github.com/grafana/k6/issues/4789
• [ ] https://github.com/grafana/k6/issues/4790
• [ ] https://github.com/grafana/k6/issues/4791
• [ ] https://github.com/grafana/k6/issues/4792
• [ ] https://github.com/grafana/k6/issues/4793