Advanced Playwright TypeScript Tutorial | Locator Strategies | Part IV | LambdaTest

About The Video

In this Part 4 of the advanced Playwright TypeScript tutorial, join 𝐕𝐢𝐠𝐧𝐞𝐬𝐡 𝐒𝐫𝐢𝐧𝐢𝐯𝐚𝐬𝐚𝐧, Udemy Instructor and Software Quality Engineer at N26, as he deep dives into locator strategies in Playwright – a crucial skill for identifying and interacting with web elements during test automation.

This session covers the standard automation locator strategies and introduces Playwright's 7 powerful locator methods, such as 𝙜𝙚𝙩𝘽𝙮𝙍𝙤𝙡𝙚, 𝙜𝙚𝙩𝘽𝙮𝙏𝙚𝙭𝙩, 𝙖𝙣𝙙 𝙜𝙚𝙩𝘽𝙮𝙋𝙡𝙖𝙘𝙚𝙝𝙤𝙡𝙙𝙚𝙧, to simplify element identification. You’ll also learn how to effectively use the Playwright Inspector to record locators and streamline your test creation process.

Additionally, the tutorial highlights an easy and maintainable approach to using CSS selectors and XPath, ensuring your tests remain reliable and future-proof. To make locator generation even simpler, the session demonstrates the use of browser extensions like SelectorsHub and ChroPath. By the end of this tutorial, you’ll have practical insights to master locator strategies, build robust automated tests, and optimize your end-to-end testing workflow with Playwright.

Video Chapters

00:00 Introduction

01:41 General Automation Locator Strategies

03:16 Locators Supported by Playwright

10:22 General Rules to Easily Write Playwright Locators

11:52 Recording Locators Using Playwright Inspector

20:30 Writing a Sample Login Test With Custom Locators

26:19 Using Browser Extensions to Locate Elements

28:37 Closing Words

Key Topics Covered

Introduction to Locator Strategies in Web Automation:

General rule for creating locators applicable to automation tools like Selenium, Cypress, Playwright, etc.

Hierarchical order of locators: ID → Name → Class → Link Text → CSS/XPath.

Playwright's Locator Strategies:

Overview of seven locator strategies supported by Playwright: getByRole

getByLabel

getByPlaceholder

getByAltText

getByTitle

getByTestId

Explanation of each strategy with practical examples.

Simplifying Locator Creation:

Recommendation to use generic locator() with CSS/XPath for simplicity and future-proofing against Playwright updates.

Recording Locators Using Playwright Inspector:

Using page.pause and Playwright Inspector to fetch locators dynamically.

Comparison between dynamic locator methods and manually written locators.

Writing Custom Locators:

Using CSS or XPath for constructing locators:

CSS example: #id, .class, [attribute=value]

XPath example: //tag[@attribute='value']

Comparison of CSS and XPath, with a preference for CSS due to performance.

Chrome Extensions for Locator Generation:

Overview of tools:

SelectorsHub: Generates CSS/XPath locators automatically.

LetXPath: Provides locator suggestions in multiple formats.

Sample Login Test Implementation:

Using both Playwright Inspector and custom locators to write a login test for the LambdaTest e-commerce playground.

Differences in using inspector-generated locators versus manually crafted locators.

Final Recommendations:

Benefits of understanding multiple locator strategies.

Using plugins and best practices to speed up and improve accuracy in writing locators.

Related Blogs & Hubs

Playwright End To End Testing Tutorial: A Complete Guide

Playwright Tutorial: Getting Started With Playwright Framework

How to Use Playwright Locators: A Detailed Guide

How to Scroll to an Element in Playwright