Power up your web automation with Playwright’s new locators

Playwright is an open-source tool that has been gaining popularity among developers and testers for its advanced automation features. One of the most powerful features of Playwright is its locator system, which provides a variety of options to easily locate elements on a web page.

Playwright provides a set of new locators that allow you to locate elements using explicit and implicit accessibility attributes, text content, associated labels, placeholders, and other attributes. These locators provide a powerful and flexible way to interact with elements on a web page, making it an ideal choice for web application automation.

Here are some examples of the new locators in Playwright:

1.Page.GetByRole(): This locator allows you to locate elements by explicit and implicit accessibility attributes. This can be useful when you need to locate elements that are not visible or that have dynamic content. For example, you can use this locator to locate a button with a specific role attribute:

const button = await page.getByRole(‘button’, {name: ‘Submit’});

await button.click();

2. Page.GetByText(): This locator allows you to locate elements by text content. This can be useful when you need to locate elements that have dynamic content or that are not easily identifiable by other attributes. For example, you can use this locator to locate a paragraph with specific text content:

const paragraph = await page.getByText(‘Lorem ipsum dolor sit amet’);

3. Page.GetByLabel(): This locator allows you to locate form controls by associated label’s text. This can be useful when you need to locate input fields that are not easily identifiable by other attributes. For example, you can use this locator to locate an input field by its associated label:

const input = await page.getByLabel(‘Username’);

await input.type(‘testuser’);

4. Page.GetByPlaceholder(): This locator allows you to locate input fields by placeholder text. This can be useful when you need to locate input fields that have dynamic content or that are not easily identifiable by other attributes. For example, you can use this locator to locate an input field by its placeholder text:

const input = await page.getByPlaceholder(‘Enter your email address’);

await input.type(‘[e-mail]’);

5. Page.GetByAltText(): This locator allows you to locate an element, usually an image, by its text alternative. This can be useful when you need to locate images that are not easily identifiable by other attributes. For example, you can use this locator to locate an image by its alternative text:

const image = await page.getByAltText(‘A beautiful landscape’);

6. Page.GetByTitle(): This locator allows you to locate an element by its title attribute. This can be useful when you need to locate elements that have dynamic content or that are not easily identifiable by other attributes. For example, you can use this locator to locate a link by its title:

const link = await page.getByTitle(‘Click here to learn more’);

await link.click();

7. Page.GetByTestId(): This locator allows you to locate elements by their test ID attribute. This can be useful when you need to locate elements that are specifically added for testing purposes. For example, you can use this locator to locate a button with a specific test ID:

const button = await page.getByTestId(‘submit-button’);

await button.click();

Overall, the new locators in Playwright provide a powerful and flexible way to interact with elements on a web page, making it an ideal choice for web application automation.