[Playwright] About E2E Tool Playwright: Functions Part 2

In this article, I would like to dive deeper into each function as "Functions Part 2".
Although these are described in the official documentation, I will summarize only the necessary parts here.

Preparation

Please create a sample by referring to the article below, or obtain the source from Github.

• [Playwright] About the E2E tool Playwright - Introduction
• Github - playwright_sample

Official locators

https://playwright.dev/docs/locators

Recommended functions

Playwright has officially recommended functions for retrieving elements.
They are as follows.
The function names are explicit and their purposes are easy to understand.

Function	Description
getByRole()	getByRole retrieves elements by specifying heading etc., defined by WAI-ARIA roles*1.
getByText()	Retrieves elements by the text within the page.
getByLabel()	Retrieves elements from the text of a Label tag.
getByPlaceholder()	Retrieves elements based on the text entered in the placeholder of a text box.
getByAltText()	Retrieves elements based on the alt text of an image.
getByTitle()	Retrieves elements by the text in the title attribute.
getByTestId()	Retrieves elements based on the data-testid attribute.

*1
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles

Usage Examples

• getByRole()

sample html

<h3>Sign up</h3>
<label>
  <input type="checkbox" /> Subscribe
</label>
<br/>
<button>Submit</button>

Usage Example

await expect(page.getByRole('heading', { name: 'Sign up' })).toBeVisible();

await page.getByRole('checkbox', { name: 'Subscribe' }).check();

await page.getByRole('button', { name: /submit/i }).click();

• getByText()

sample html

<span>Welcome, John</span>

Usage Example

// Text only
await expect(page.getByText('Welcome, John')).toBeVisible();
// Exact match option
await expect(page.getByText('Welcome, John', { exact: true })).toBeVisible();
// Regular expression
await expect(page.getByText(/welcome, [A-Za-z]+$/i)).toBeVisible();

• getByLabel()

sample html

<label>Password <input type="password" /></label>

Usage Example

await page.getByLabel('Password').fill('secret');

• getByPlaceholder()

sample html

<input type="email" placeholder="[e-mail]" />

Usage Example

await page
    .getByPlaceholder('[e-mail]')
    .fill('[e-mail]');

• getByAltText()

sample html

<img alt="playwright logo" src="/img/playwright-logo.svg" width="100" />

Usage Example

await page.getByAltText('playwright logo').click();

• getByTitle()

sample html

<span title='Issues count'>25 issues</span>

Usage Example

await expect(page.getByTitle('Issues count')).toHaveText('25 issues');

• getByTestId()

sample html

<button data-testid="directions">Itinéraire</button>

Usage Example

await page.getByTestId('directions').click();

locator function

It doesn't seem to be deprecated.
According to the official documentation, it is used when you want to retrieve elements using CSS or XPath.

Usage Example

// Add css / xpath as a prefix
await page.locator('css=button').click();
await page.locator('xpath=//button').click();

// Automatic detection if the prefix is omitted
await page.locator('button').click();
await page.locator('//button').click();

Additionally, the official documentation warns against long CSS or XPath chains as a bad practice, as they lead to unstable tests:

Original text

XPath and CSS selectors can be tied to the DOM structure or implementation. These selectors can break when the DOM structure changes. Long CSS or XPath chains below are an example of a bad practice that leads to unstable tests:

Examples to avoid

await page.locator(
    '#tsf > div:nth-child(2) > div.A8SBwf > div.RNNXgb > div > div.a4bIc > input'
).click();

await page
    .locator('//*[@id="tsf"]/div[2]/div[1]/div[1]/div/div[2]/input')
    .click();

Postscript

Through creating this article, I learned a lot about WAI-ARIA roles, which I was lacking knowledge on, and how to specify locators which made me think, "Ah, that's true."
If the DOM structure actually changes, it might not be suitable for E2E testing on sites where designs are frequently updated.
And I need to provide feedback elsewhere... (lol)

Related Articles

• [Playwright] About the E2E tool Playwright - Study Session
• [Playwright] About the E2E tool Playwright - Introduction
• [Playwright] About the E2E tool Playwright - Functions

Github

Sample code corresponding to the article
https://github.com/beeeegle/playwrightSample