Locator Syntax Rules | Bondar Academy
Course: Playwright UI Testing with TypeScript
Module: Locators and Assertions
Instructor: Artem Bondar
Lesson Summary
In this lesson, you will learn how to use the locator method in Playwright to find various web elements on a page. The lesson covers the syntax rules for locating elements by ID , attribute , tag , and more. Key Concepts Git Usage : Create a new branch for this lesson, write code alongside the instructor, and commit your changes at the end. This practice will help you become familiar with Git. Locator Syntax Rules : By Tag Name : Use the tag name as a string. For example, page.locator('input') . By ID : Prefix the ID with a hash sign. Example: page.locator('#input-email1') . By Class : Prefix the class with a dot. Example: page.locator('.shape-rectangle') . By Attribute : Use square brackets. Example: page.locator('[placeholder="email"]') . Combining Selectors : Combine tag and attribute without spaces. Example: page.locator('input[placeholder="email"]') . XPath : While possible, it is not recommended. Example: page.locator('//input[@id="input-email1"]') . Text Matching : Use page.locator({ text: 'partial text' }) for partial matches and page.locator({ text: 'exact text' }) for exact matches. Important Notes The locator method returns all matching elements. If multiple elements are found, actions like click require a unique locator. Use await with actions that return promises, such as click . In the next lesson, the focus will shift to user-facing locators , which are considered best practices in Playwright.