In playwright asserting for the existence of a text in a element

Question

There is an element that loads up after a few seconds the form is submitted(page doesn't reload after submission). I want to assert that this element has some text value in it. Value doesn't matter but there should be some text in the element.

Currently I am asserting it like this -

await expect(await targetPage.locatorToSomeElement.innerText()).toBeTruthy();

OR this -

await expect(targetPage.locatorToSomeElement).toBeTruthy();

targetPageis class instance of Page Object Model class TargetPage and locatorToSomeElement is locator with value page.getByTestId("some-span-element");

Please let me know the best way to achieve this. Please check below points as well.

1. The first statement seems like a manual assertion? await is inside expect? It's a bad practice? https://playwright.dev/docs/best-practices#use-web-first-assertions

2. toBeTruthy() is an assertion that doesn't not auto wait so I believe second statement will always be true?

Answer 1

Correct--you need to use web-first assertions to ensure auto-waiting.

How about:

await expect(targetPage.locatorToSomeElement).toHaveText(/\S/);

The regex here means "contains at least one non-space character".

Complete, runnable example:

import {expect, test} from "@playwright/test"; // ^1.30.0

test("h1 is eventually not empty", async ({page}) => {
  await page.setContent(`<h1></h1><script>
    setTimeout(() =>
      document.querySelector("h1").textContent = "ok",
      2000
    )</script>
  `);
  await expect(page.locator("h1")).toHaveText(/\S/);
});

test("h1 is eventually empty", async ({page}) => {
  await page.setContent(`<h1>test</h1><script>
    setTimeout(() =>
      document.querySelector("h1").textContent = "   ",
      2000
    )</script>
  `);
  await expect(page.locator("h1")).not.toHaveText(/\S/);
  await expect(page.locator("h1")).toHaveText(/^\s*$/);
});

I'm not sure what your use case is, but you may want to strengthen the assertion further. For example, .toHaveText(/.{42,}/) ensures there are at least 42 characters present.

Answer 2

Instead of using toHaveText with complex regex , you can simply use toContainText in places where exact string is unknown.

Note:

Unlike toHaveText toContainText, when specified with the partial text, it will assert and confirm the element with its presence. You don't need to provide the exact text like toHaveText.

Ultimately both gives you an option to use regex to use them with flexibility.