Playwright Tutorial - Locators and Selectors (NodeJS)

• 01:40 Finding elements by id, class, and attribute
• 03:47 Finding elements by text and placeholder
• 06:42 Using located options
• 07:56 Best practices for locators

In this video tutorial, Jared from Commit Quality demonstrates how to work with locators and selectors in Playwright Test.

Locators are a way to find elements on a webpage, and Playwright Test has built-in functionality for auto-weighting and retriability. This allows for resilient tests that can perform actions on specific elements.

Jared explains that there are several selector options available, such as CSS, XPath, and text values. However, he recommends avoiding XPath due to its flakiness and lack of reliability. Instead, he focuses on using CSS and text values.

To create a locator, you need to choose a selector type and define the element you want to find. Jared demonstrates examples using CSS ids, classes, attributes, and text values. He also shows how to locate elements by specific attributes like name or placeholder.

Jared emphasizes the importance of best practices, such as prioritizing user-facing attributes and using explicit contracts like test ids. He advises against using complex selectors and XPath, as they can make tests less reliable and harder to maintain.

Additionally, the video briefly mentions the located.n-first and located.n-last options, which are useful for dealing with multiple elements on a page. However, Jared mentions that he will cover these in a future video.

Overall, this tutorial provides a comprehensive overview of working with locators and selectors in Playwright Test, emphasizing best practices for creating resilient and maintainable tests.