Welcome back! So far, you've learned how to navigate web pages, perform click actions, fill out forms, and even extract text content using Playwright in TypeScript. You've made fantastic progress! In almost all cases, we used selectors to pick the elements from the page. We collected elements by their text, id, type, or tag name.

In real-world pages, we may need a lot more options to obtain the elements since the same text, type, or tag can be found on various elements on the page. An id is a unique element, but we can't expect developers to give a unique identifier to each new element, which would also be difficult to handle. Let's explore more advanced techniques.

Selectors in Playwright allow you to specify which elements you want to interact with on a web page. In this lesson, we'll dive into advanced selectors. This will enable you to write more flexible and detailed tests. By the end of this lesson, you'll be equipped with new techniques to select elements effectively, even in complex scenarios.

In this lesson, you'll learn how to use advanced selectors in Playwright to interact with specific elements on a web page. This includes using text selectors, element locators, and dynamic element selection.

Here's a peek at the code examples we'll explore:

TypeScript
Copy to clipboard
1import { test, expect } from '@playwright/test';
2
3test('verify number of book titles', async ({ page }) => {
4  await page.goto('http://localhost:3000/books');
5  const titles = page.locator('.book-title');
6  expect(await titles.count()).toBe(10);
7});

Let's break down some key concepts:

• The class attribute in HTML is used to specify one or more class names for an HTML element. These class names can be referenced in CSS and JavaScript to apply styles or interact with the elements. Class attributes are generally used to group elements for styling purposes or to select them for scripting. For example, multiple elements can share the same class to apply the same styling rules or to be targeted for interaction by JavaScript code. Here's an example of an HTML element with a class attribute:

  HTML, XML
  Copy to clipboard
  1<div class="book-title">The Great Gatsby</div>

• A class selector is a type of CSS selector that allows you to select elements based on their class attribute. In Playwright, you can use a class selector by prefixing the class name with a dot (.), like .book-title.
• The locator method in Playwright is used to locate elements on a page by providing a selector. For example, page.locator('.book-title') creates a locator object for all elements that have the class .book-title.
• The count method in the Locator class returns the number of elements that match the specified selector. For example, titles.count() returns the number of elements with the class .book-title.

Selectors are the backbone of web automation. With basic selectors, you can perform many tasks, but advanced selectors elevate your capabilities to the next level. Whether you're dealing with dynamically loaded content, navigating through deeply nested elements, or selecting elements based on their characteristics, mastering advanced selectors empowers you to handle any scenario.

Think about running tests on a complex web application. Advanced selectors allow you to precisely target elements without being derailed by changes in the application’s structure or content. This ensures your tests are robust, reliable, and maintainable. Imagine needing to verify that a dynamically loaded list properly updates with new content. By using advanced selectors, you ensure accurate and efficient validation.

Exciting, isn't it? Let's dive into the practice section and see these advanced selectors in action. Your journey to becoming a proficient web automation engineer continues here!