User-Visible Locators | Bondar Academy

Lesson Summary

In this lesson, you will learn how to use user-visible locators to locate web elements on a web page using Playwright . The main idea is to interact with web elements that are visible to users, avoiding reliance on implementation details. Key Concepts User-visible behavior: Automated tests should verify that the application works for end users, focusing on what users can see and interact with. Locators: Locators should mimic user behavior. For example, if users see the text on a button, the locator should also reference that text. Best Practices for Locators Use the following methods to create user-facing locators: getByRole : Identifies elements by their role. Example: await page.getByRole('textbox', { name: 'email' }) . getByLabel : Finds elements by their associated label. Example: await page.getByLabel('email').click() . getByPlaceholder : Locates elements by their placeholder text. Example: await page.getByPlaceholder('Jane Doe').click() . getByText : Uses static text displayed on the web page. Example: await page.getByText('Using the grid').click() . getByTitle : Finds elements by their title attribute. Example: await page.getByTitle('IoT dashboard').click() . getByTestId : Uses custom test IDs defined in the source code. Example: await page.getByTestId('sign-in').click() . In summary, user-facing locators, especially getByRole , are considered best practice in Playwright as they reflect actual user interactions. This approach enhances test reliability and aligns with user experience.