How to write waitForElementText method in Playwright

Question

How to write waitForElementText method in Playwright

188 views Asked by Vasyl At 12 September 2024 at 18:12

I would like to have waitForElementText() in playwright.

E.g I have headers on each page cssSelector = '.header-name'.

and I navigate from Home page to Users

I pass two arguments to the method: waitForElementText( locator: string, expectedText: string)

and I want to wait for the header name to change from Home → Users

I tried to use page.waitForFunction() method but I get error:

page.waitForFunction: TypeError: Cannot read properties of undefined (reading 'locator')

Original Q&A

There are 2 answers

**ggorlen** · Answer 1 · 2023-11-02 20:22:19

Since Playwright's locator's API waits for elements automatically and has a text-based selector, waitForText is already in the API as getByText:

await page.getByText("Users"); // for a substring match

// or an "exact" match (after whitespace normalization):
await page.getByText("Users", {exact: true});

// or as an assertion:
await expect(page.getByText("Users", {exact: true})).toBeVisible();

You can chain locators if this isn't enough to disambiguate the element:

const playwright = require("playwright"); // ^1.39.0

const html = `<!DOCTYPE html><html><body>
<h1 class="header-name">  Users  </h1></body></html>`;

let browser;
(async () => {
  browser = await playwright.firefox.launch();
  const page = await browser.newPage();
  await page.setContent(html);
  await page
   .locator(".header-name")
   .getByText("Users", {exact: true})
   .waitFor();
})()
  .catch(err => console.error(err))
  .finally(() => browser?.close());

**Vishal Aggarwal** · Answer 2 · 2023-11-14 10:08:21

Use auto- retrying assertion toHaveText

It waits until the Locator points to an element with the given text. You can use regular expressions for the value as well.

const locator = page.locator('.title');
await expect(locator).toHaveText(/Welcome, Test User/);
await expect(locator).toHaveText(/Welcome, .*/);

TechQA.

How to write waitForElementText method in Playwright

There are 2 answers

Related Questions in TYPESCRIPT

Related Questions in PLAYWRIGHT

Related Questions in PLAYWRIGHT-TYPESCRIPT

Popular Questions

Popular Tags

Trending Questions