Playwright Assert Element Text

In Playwright, we use the toHaveText() and toContainText() with expect() to verify the text of an element.

You can also use toEqual(), toContain(), or toContainEqual() methods after getting the text using textContent(), but the above two are preferred over these three because they provide additional options while handling text.

Table of Contents

1. Syntax
2. Demo Website
3. Verify the Text of an Element
4. Verify Partial Text
5. Verify Text Ignoring Case
6. Verify Inner Element Text
7. Verify Text with Spaces
8. Verify the Text of the List of Elements
9. Verify Nth Element Text from the List
10. Video Tutorial

Syntax

toHaveText()

(method) LocatorAssertions.toHaveText(expected: string | RegExp | (string | RegExp)[], options?: {
    ignoreCase?: boolean | undefined;
    timeout?: number | undefined;
    useInnerText?: boolean | undefined;
} | undefined): Promise<...>

toContainText()

(method) LocatorAssertions.toContainText(expected: string | RegExp | (string | RegExp)[], options?: {
    ignoreCase?: boolean | undefined;
    timeout?: number | undefined;
    useInnerText?: boolean | undefined;
} | undefined): Promise<...>

Demo Website

For the demo, let's consider Nested List Here.

Verify the Text of an Element

Let's verify the text of the heading is "Nested List Example."

Using toEqual()

expect(await page.locator(".heading1").textContent()).toEqual("Nested List Example")

using toHaveText()

await expect(page.locator(".heading1")).toHaveText('Nested List Example');

Verify Partial Text

Partial Match using toHaveText()

await expect(page.locator(".heading1")).toHaveText(/List Example/);

Partial Match using toContainText()

await expect(page.locator(".heading1")).toContainText('List Example')

Verify Text Ignoring Case

By default, methods are case-sensitive. To ignore the case, set the ignoreCase option to true.

await expect(page.locator(".heading1")).toHaveText('Nested list Example', {ignoreCase: true});

Verify Inner Element Text

When you want to match inner elements text by parent locator, you can set the useInnerText option value to true.

await expect(page.locator("ul.nav-bar")).toHaveText(/Night/,{useInnerText:true});

Verify Text with Spaces

toHaveText() and toContainText() methods ignore the leading, trailing, and multiple space by default. If you use other techniques like the toEqual() method or iterating loops, you can use the JavaScript trim() function.

await expect(page.locator(".heading2")).toHaveText('Heading with Spaces');

Verify the Text of the List of Elements

You can also use the toHaveText() method to match the text of the list of elements.

Using toHaveText()

await expect(page.locator("ul.nav-bar>li")).toHaveText(['Install','Dream','Night']);

Using toEqual()

const expectedList = ['Install','Dream','Night'];
expect(await page.locator("ul.nav-bar>li").allTextContents()).toEqual(expectedList)

Verify Nth Element Text from the List

For the first element, use the first() method. For the last, use the last() method; for any other element, use the nth() method with an index starting from 0.

await expect(page.locator("ul.nav-bar>li").first()).toHaveText('Install');
await expect(page.locator("ul.nav-bar>li").last()).toHaveText('Night');
await expect(page.locator("ul.nav-bar>li").nth(1)).toHaveText('Dream');