Brief Summary
This video explains how to use Playwright's built-in locators to find web elements, focusing on methods like getByAltText, getByPlaceholder, getByRole, getByText, getByLabel, getByTitle, and getByTestId. It demonstrates how these locators can simplify element selection based on attributes like alt text, placeholder text, roles, text content, labels, titles, and test IDs, offering practical examples within the context of automating an OrangeHRM login scenario.
- Introduces Playwright's built-in locators for efficient web element identification.
- Demonstrates practical usage of various
getBymethods with real-world examples. - Explains how to use these locators based on element attributes and roles.
Introduction to Playwright Built-in Locators
The video introduces Playwright's built-in locators, which are additional methods provided by Playwright to locate web elements, offering more options beyond XPath and CSS. These locators, accessible via the page object (e.g., page.getByRole, page.getByText), enhance the framework's auto-waiting and retrievability features. The video aims to demonstrate these locators and how to use them effectively.
Setting Up the Test Environment
The video walks through setting up a test environment in VS Code, including creating a new test file named locators_built-in.spec.js and importing the necessary functions (test and expect) from the @playwright/test package. A test function named built-in locators is defined, incorporating an asynchronous function with a page fixture to access Playwright's functionalities. The test will automate the login process of an HRM application to demonstrate the usage of Playwright's built-in locators.
Using getByAltText Locator
The video explains how to use the getByAltText locator, which is used to locate elements, specifically images, by their alt attribute. The video demonstrates capturing the logo element of the OrangeHRM application using its alt attribute, "company-branding". It then asserts that the captured logo element is visible on the page using expect(logo).toBeVisible().
Using getByPlaceholder Locator
The video explains how to use the getByPlaceholder locator, which is used to locate input elements by their placeholder attribute. The video demonstrates locating the username and password input fields on the OrangeHRM login page using their respective placeholder values. It then uses the fill method to enter "username" and "password" into these fields.
Using getByRole Locator
The video explains how to use the getByRole locator, which is used to locate elements by their explicit or implicit accessibility roles, such as buttons or links. The video demonstrates locating the login button on the OrangeHRM login page by specifying its role as "button" and using the type attribute with the value "submit". It then performs a click action on the located button.
Using getByText Locator
The video explains how to use the getByText locator, which is used to locate elements by their text content. The video demonstrates locating the username text displayed after a successful login on the OrangeHRM application. It captures the text dynamically using XPath and asserts that the captured text is visible on the page.
Using getByLabel Locator
The video explains how to use the getByLabel locator, which is used to locate elements associated with a specific label. It describes scenarios where the input tag is within the label tag, allowing direct value passing using the fill method. The video also explains how to find labels using DevTools.
Using getByTitle and getByTestId Locators
The video explains how to use the getByTitle locator, which is used to locate elements by their title attribute. It also explains how to use the getByTestId locator, which is used to locate elements by their data-testid attribute. The video emphasizes that getByTestId requires the data-testid attribute to be present on the element.
Summary of Playwright's Built-in Locators
The video summarizes Playwright's built-in locators, emphasizing that most methods rely on element attributes like label, placeholder, alt text, title, and test ID. It highlights that getByRole allows passing any attribute along with the role (button or link) to locate elements. The video concludes by stating that these built-in locators, along with XPath and CSS, provide flexible options for locating elements in Playwright.
