Implementing Advanced Selectors

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:

import { test, expect } from '@playwright/test';

test('verify number of book titles', async ({ page }) => {
  await page.goto('http://localhost:3000/books');
  const titles = page.locator('.book-title');
  expect(await titles.count()).toBe(10);
});

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

  <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.