Wait for text to appear when using Puppeteer

Question

I wonder if there\'s a similar way as in Selenium to wait for text to appear for a particular element. I\'ve tried something like this, but it doesn\'t seem to wait:

Answer 1

page.waitFor()

You can also just simply use page.waitFor() to pass a function or CSS selector for which to wait.

Wait for Function

If the element is an input field, we can check that the .count element exists before checking that a value is present to avoid potential errors:

await page.waitFor(() => {
  const count = document.querySelector('.count');
  return count && count.value.length;
});

If the element is not an input field, we can check that the .count element exists before checking that innerText is present to avoid potential errors:

await page.waitFor(() => {
  const count = document.querySelector('.count');
  return count && count.innerText.length;
});

Wait for CSS Selector

If the element is an input field that contains a placeholder, and you want to check if a value currently exists, you can use :not(:placeholder-shown):

await page.waitFor('.count:not(:placeholder-shown)');

If the element is an input field that does not contain a placeholder, and you want to check if the value attribute contains a string, you can use :not([value=""]):

await page.waitFor('.count:not([value=""])');

If the element is not an input field that does not have any child element nodes, we can use :not(:empty) to wait for the element to contain text:

await page.waitFor('.count:not(:empty)');

---

page.waitForXPath()

Wait for XPath

Otherwise, you can use page.waitForXPath() to wait for an XPath expression to locate element(s) on the page.

The following XPath expressions will work even if there are additional classes present on the element other than count. In other words, it will work like .count, rather than [class="count"].

If the element is an input field, you can use the following expression to wait for the value attribute to contain a string:

await page.waitForXPath('//*[contains(concat(" ", normalize-space(@class), " "), " test ") and string-length(@value) > 0]')

If the element is not an input field, you can use the following expression to wait for the element to contain text:

await page.waitForXPath('//*[contains(concat(" ", normalize-space(@class), " "), " count ") and string-length(text()) > 0]');