Playwright Filter Locator

The filter method narrows the existing locator according to its applied filter. You can use a text filter or locator filter, or both as an option.

Table of Contents

1. Syntax
2. Filter by Locator
3. Filter By Text
4. Apply Multiple Filters
5. Video Tutorial

Syntax

Here is the syntax.

locator.filter([options])

options? <Object>: You can provide two options:

• has? <locator>: Matches elements containing an element that matches an inner locator.
• hasText <string|RegExp>: Matches elements containing a specified string or regular expression.

Filter by Locator

To filter any element using the locator, we use the has option. To understand this option, let's select the Ask Doubt link in the programsbuzz header menu.

test.only('filter with locator', async ({page}) =>{

    await page.goto('https://www.programsbuzz.com')

    await page
        .locator('ul.we-mega-menu-ul>li')
        .filter({has: page.locator("a[href='/ask-doubt']")})
        .click()
})        

Here first, we located all the <li> tags inside the parent <ul> tag, and then out of all the <li>, we filtered for the <li> tag, which contains the locator we referred to using the has.

Here inner locator is queried against the outer one. So click operation will be performed on <li> tag.

Filter By Text

In the same way, we can filter using the string. Here string is case-insensitive and searches for a substring. We can also use regular expressions.

test.only('filter with text', async ({page}) =>{
    await page.goto('https://www.programsbuzz.com')

    await page
        .locator('ul.we-mega-menu-ul>li')
        .filter({hasText: "Ask Doubt"})
        .click()
})

Applying Multiple Filters

We can chain the filter method multiple times using to filter multiple times to locate an element.

Let's select the 2nd header row in the ngx-admin application smart table. [Select Theme -> Table & Data (Left Menu) -> Smart Table) if it redirects.

test.only('multiple filters', async ({page}) =>{
    await page.goto('http://localhost:4200/pages/tables/smart-table')
    
    await page
        .locator('table tr')
        .filter({has: page.locator("th")})
        .filter({has: page.locator("i.nb-plus")})
        .click()
})        

Here the first filter with <th> tag will find the top two rows, and the second filter will find the 2nd row because it contain i.nb-plus locator. Click operation will be performed on the complete row, not on the + button. To click on + button use below code:

test.only('filter locator', async ({page}) =>{
    await page.goto('http://localhost:4200/pages/tables/smart-table')
    
    await page
        .locator('table tr')
        .locator("th")
        .filter({has: page.locator("i.nb-plus")})
        .click()
})

Now we are finding <th> with i.nb-plus locator. So it will click on + button.