javascript - In Playwright asserting for the presence of any text in a element - Stack Overflow

admin管理员组

文章数量:1402975

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? /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?

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?

• javascript
• node.js
• playwright
• playwright-test

Share Improve this question Follow edited Jan 29 at 15:01 ggorlen 57.9k88 gold badges114114 silver badges157157 bronze badges asked Aug 30, 2023 at 5:23 utkarsh-kutkarsh-k 99111 gold badge1616 silver badges2828 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Instead of using toHaveText with plex 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.

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

How about:

await expect(targetPage.locatorToSomeElement).not.toBeEmpty();

toBeEmpty Added in: v1.20

Ensures the Locator points to an empty editable element or to a DOM node that has no text.

or, more flexibly:

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")).toBeEmpty();
  await expect(page.locator("h1")).toHaveText(/\S/);
  await expect(page.locator("h1")).not.toBeEmpty();
});

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*$/);
});

test("multiple paragraphs have text", async ({page}) => {
  await page.setContent(`<p>a</p><p>b</p>`);
  await expect(page.locator("p")).toHaveText([/\S/, /\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.

本文标签： javascriptIn Playwright asserting for the presence of any text in a elementStack Overflow