Playwright Filter Locators

UI automation can sometimes feel overwhelming, especially when it’s challenging to find unique locators for elements in the UI.

With over 17 years of experience working with various automation testing tools, I’ve consistently faced issues with locators. However, modern tools like Playwright have made significant strides in solving this problem, making automation much more efficient and we are going to discuss once such feature in this article.

Common Scenario while working with Tables

Consider this scenario where I have a Table with multiple rows and columns.

Scenario

I want to click the Edit or Delete link for the User Jai

But as you can see there are following challenges

1. Jai user name is duplicated
2. Also the rest of the values in the Row is duplicate as well, for example the email address
3. Finally, neither the row items in the table nor the table itself has any unique locators (as you know, none of the table rows will have any locator

In order to get around all these problem, I have to write quite a lot of code in Selenium automation testing tool, if you have worked with it already.

Solution

So, whats the solution for this problem ?

Well, we can use Playwright Locator Filter

Here is the code which can you can

await Page
    .GetByRole(AriaRole.Row)
    .Filter(new() { HasText = "pajani.arjunan@gmail.com" })
    .Filter(new() { HasText = "jai"})
    .Filter(new() { HasNotText = "34343"})
    .GetByRole(AriaRole.Link, new() { Name = "Edit" })
    .ClickAsync();

The code is doing quite a lot of operation chained together to perform the complex operation we illustrated above

The code is

1. Dynamically finding the Row from a table using the AriaRole.Row
2. Then its finding the row by filtering it using
   — Its email address
   — Its name with Jai
   — Its text which is not 34343
3. Then its finding the Link on the Row it has found using AriaRole.Link
4. Finally, its clicking the link Edit

Wow, thats a lot of operation handled one one nested line of code, which is amazing.

Now, I am optimistic that a tool which I can recommend to anyone for their future automation testing would be Playwright !

Learning More

If you want to learn more on Playwright with C# .NET you can learn from my Udemy Course

If you want to learn Playwright using Typescript, Java and Javascript, try this course in Udemy

Thank you so much for reading this article.

Happy automating !