Playwright Text Selector

Text selector locates elements that contain given text. Using this text, we can perform the click operation on the link or button or perform any other action on elements.

Table of Content

1. Demo Link
2. Text Selector Default Matching
3. Text Selector Exact Matching
4. Matching Text with Tags
5. Clicking the Button with the Input Tag
6. Clicking on Link
7. Optional Text Keyword
8. Using Regular Expressions
9. Using pseudo-classes with Text Selector (Coming Soon)
10. Video Tutorial

1. Demo Link

We will visit this link for the demo and perform a click action on the given buttons and links.

2. Text Selector Default Matching

Text Selector Default Matching is case-insensitive and searches for a substring.

The above locator will return an error because it will find the first three buttons on the page containing substring log ignoring the case of text.

// will find first 3 buttons - Log In, log in, Login 
await page.locator('text=log').click();

Error Output

Error: strict mode violation: "text=log" resolved to 3 elements:
    1) <button class="button" value="Button1">Log In</button> aka playwright.$("text=Log In >> nth=0")
    2) <button class="button" value="Button2">log in</button> aka playwright.$("text=log in >> nth=1")
    3) <button class="button" value="Button3">…</button> aka playwright.$("text=Login")

You can avoid such errors by using first(), Last and nth selector method.

// Click on Log In
await page.locator('text=log').first().click();
// Click on log in
await page.locator('text=log').nth(1).click();
// click on Login
await page.locator('text=log').last().click();

3. Text Selector Exact Matching

For an exact case-sensitive match, surround the text with double quotes if it is inside single quotes or vice versa. Below code will click on the first two buttons.

// Click on Button 1 with text Log In
await page.locator('text="Log In"').click();
// or
await page.locator("text='Log In'").click();


// Click on Button 2 with text log in
await page.locator('text="log in"').click();
// or
await page.locator("text='log in'").click();

4. Matching Text with Tags

Third Login button is a text between multiple tags.

<button class="button" value="Button3">Log<span>in</span></button>

You can click on it using

await page.locator('text=Login').click();

Here, span Tags will be ignored.

Or you can use the exact match with substring

await page.locator('text="Log"').click();

5. Clicking the Button with the Input Attribute

If for buttons tag is input instead of the button, use the value of the value attribute instead of text.

<input class="button" type="submit" value="Click Me">

await page.locator('text="Click Me"').click();

This will click on the click me button.

6. Clicking on Link

You can also locate elements by link text. This will click on ProgramsBuzz Link and open the programsbuzz website.

await page.locator('text=ProgramsBuzz Link').click()

7. Optional Text Keyword:

Selector starting with pair of single and double quotes is assumed to be text selector. That means you can skip text keyword. Below code will click on button1 and button2.

 // Click on Button 1 with Log In
await page.locator('"Log In"').click();
 // Click on Button 1 with Log In
await page.locator("'Log In'").click();
 // Click on Button 2 with log in
await page.locator('"log in"').click();
 // Click on Button 2 with log in
await page.locator("'log in'").click();

8. Using Regular Expressions

You can also use JavaScript regular expressions in the text selector. Below code will find first 3 buttons and gives you error.

await page.locator('text=/Log\\s*in/i').click();

Error: strict mode violation: "text=/Log\s*in/i" resolved to 3 elements:
    1) <button class="button" value="Button1">Log In</button> aka playwright.$("text=Log In >> nth=0")
    2) <button class="button" value="Button2">log in</button> aka playwright.$("text=log in >> nth=1")
    3) <button class="button" value="Button3">…</button> aka playwright.$("text=Login")