Advanced Selectors: nth, has, and filter in Playwright

Playwright is a powerful end-to-end testing framework that offers rich selector APIs for targeting elements in modern web applications. While basic selectors like text=, css=, or id= are sufficient in many cases, complex DOM structures and dynamic content often require more advanced approaches. That’s where Playwright’s advanced selectors — such as nth, has, and filter — come into play.

In this blog, we’ll explore how these selectors work, when to use them, and best practices to make your Playwright tests more reliable and efficient.


1. The nth Selector

The nth selector is used to target an element by its index among a list of matching elements. This is particularly useful when multiple elements match a selector, and you need to interact with a specific one.

Syntax:

js

page.locator('div.item').nth(2);

Example:

Let’s say you have a list of products on a page:


html


<div class="product">Product A</div>

<div class="product">Product B</div>

<div class="product">Product C</div>

To click on the second product:


js

await page.locator('.product').nth(1).click(); // Index starts at 0

Use Case:

  • Selecting the nth row in a table.
  • Clicking the third button in a list of action buttons.
  • Verifying content of a particular list item.


2. The has Selector

The has selector allows you to match a parent element that contains a child element or text. It’s extremely helpful when multiple similar containers are present, but you want the one that contains specific sub-elements.

Syntax:

js

page.locator('div.card', { has: page.locator('button:has-text("Submit")') });

Example:

Given this HTML:


html

Copy

Edit

<div class="card">

  <p>Card 1</p>

  <button>Submit</button>

</div>

<div class="card">

  <p>Card 2</p>

</div>

To click the button inside the card that has the "Submit" button:


js

Copy

Edit

await page.locator('.card', { has: page.locator('button:has-text("Submit")') }).locator('button').click();

Use Case:

Targeting forms that contain specific fields.


Finding containers with certain child elements (e.g., images, icons).


Interacting with rows in a grid that contain specific data.


3. The filter Method

The filter() method allows further narrowing of a locator based on attributes or text content. It’s especially useful when the locator matches multiple elements but only some meet additional criteria.


Syntax:

js

page.locator('div.product').filter({ hasText: 'Laptop' });

Example:

Given:

html

<div class="product">Laptop - $1000</div>

<div class="product">Phone - $500</div>

To click the product that mentions "Laptop":


js

Copy

Edit

await page.locator('.product').filter({ hasText: 'Laptop' }).click();

Use Case:

Selecting elements based on dynamic text.

Clicking buttons or links with unique inner content.

Validating presence of specific product names or labels.


Best Practices

Combine nth, has, and filter for maximum precision.

Avoid over-relying on hardcoded indexes (nth) if the UI changes frequently.

Use has and filter for more semantic and stable test locators.

Always prefer role, aria-label, and data-testid attributes for accessibility and testability.


Conclusion

Advanced selectors like nth, has, and filter significantly enhance the flexibility and reliability of your Playwright test scripts. They help you write cleaner, more readable, and more robust tests — especially when dealing with dynamic content or complex DOM hierarchies. Mastering these selectors will elevate your test automation and make maintaining your test suite easier as your application evolves.

Learn Playwright Testing Training
Read More: Building an Internal Playwright Testing CLI


Visit IHUB Talent Institute Hyderabad
Get Direction

Comments

Post a Comment

Popular posts from this blog

How to Use Tosca's Test Configuration Parameters

Tosca by Tricentis is a powerful model-based test automation tool widely used in enterprise environments for end-to-end testing. One of its most useful features is Test Configuration Parameters (TCPs), which provide flexibility and control in managing test execution. TCPs enable testers to create reusable test cases by passing dynamic values without hardcoding them. This significantly enhances test maintenance, scalability, and efficiency. In this blog, we’ll explore what Test Configuration Parameters are, how to create and use them, and the best practices to follow when working with TCPs in Tosca. What Are Test Configuration Parameters? Test Configuration Parameters are custom-defined key-value pairs that can be associated with test cases, test case folders, or execution lists in Tosca. They help manage configuration data such as environment URLs, browser types, credentials, or any other variable data that may differ across test runs. By using TCPs, you can avoid duplicating test case...
Read more

Using Hibernate ORM for Fullstack Java Data Management

In the world of fullstack Java development, managing data efficiently and seamlessly across the application is critical. One of the most powerful tools in the Java ecosystem for handling database operations is Hibernate ORM (Object-Relational Mapping). Hibernate simplifies the interaction between Java applications and relational databases, reducing boilerplate code and improving maintainability. This blog explores how Hibernate ORM works, why it’s widely used, and how it fits into the data management strategy of a fullstack Java application. What is Hibernate ORM? Hibernate ORM is an open-source Java framework that provides a powerful and flexible mechanism for mapping Java objects to database tables. It abstracts the low-level JDBC code, allowing developers to work with high-level object-oriented concepts. Instead of writing raw SQL queries, Hibernate allows developers to define database interactions using simple Java classes (also known as POJOs) and annotations or XML configurations...
Read more

Creating a Test Execution Report with Charts in Playwright

Modern test automation isn't just about running tests—it's also about presenting clear, visual feedback on test results. When working with Playwright, one of the most powerful end-to-end testing tools for modern web apps, generating detailed execution reports can help your team track progress, identify issues quickly, and make data-driven decisions. A visual report with charts brings your testing efforts to life. In this blog, we’ll walk through how to create a test execution report with charts using Playwright’s built-in capabilities along with third-party tools for enhanced visualization. Why Visual Reports Matter Plain text logs and console outputs are hard to parse at scale. A good report should answer questions like: How many tests passed or failed? What’s the overall success rate? Which tests are flaky or slow? How have test results changed over time? Visualizing this data with charts—like pie charts, bar graphs, or timelines—helps QA teams and stakeholders better underst...
Read more