Playwright offers powerful locator strategies to find elements on a page. One such strategy is internal:has-text, which allows for precise text matching using regular expressions. This is particularly useful when dealing with dynamic elements where the text might have variations or when avoiding brittle XPath selectors.

‍

Solution

You can use internal:has-text to locate elements based on their internal text content. It can be combined with other locators, such as CSS selectors, to further refine your selection. The syntax follows this pattern:

  locator('<css-selector> >> internal:has-text=<regex>')

This approach ensures that you only target elements that match both the CSS selector and the internal text pattern.

‍

Example

Let’s consider a scenario where we want to locate a login button inside a specific section of a webpage. The button’s text may have leading or trailing spaces, or minor variations, so we use a regular expression to match it precisely.

‍

const { test, expect } = require('@playwright/test');

test('Login button locator with internal text match', async ({ page }) => {
    await page.goto('https://example.com');

    // Locate the button inside a specific div with class '.auth-container'
    const loginButton = page.locator('button >> internal:has-text=/^Login$/');

    // Click the login button
    await loginButton.click();

    // Verify the navigation or action after clicking
    await expect(page).toHaveURL(/dashboard/);
});

‍

Summary

• internal:has-text allows text matching using regular expressions within Playwright locators.

• It can be combined with CSS selectors to target elements more precisely.

• This method is particularly useful when text may have variations or whitespace differences.

• It improves test reliability by avoiding brittle selectors like XPath.

Try using internal:has-text in your Playwright tests for more flexible and robust locators! 🚀

‍