使用 Puppeteer 时等待文本出现

Question

我想知道是否有与 Selenium 类似的方法来等待特定元素的文本出现。我试过这样的东西，但它似乎没有等待：

await page.waitForSelector('.count', {visible: true});

Answer 1

您可以使用 waitForFunction。参见 https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagewaitforfunctionpagefunction-options-args

包括@elena 的答案完整性解决方案：

await page.waitForFunction('document.querySelector(".count").inner‌Text.length == 7');

Answer 2

除了 nilobarp 的回答中介绍的方法外，还有两种方法可以做到这一点：

page.waitForSelector

使用伪选择器:empty it is possible to find elements that contain no child nodes or text. Combining this with the :not selector, we can use page.waitForSelector查询非空选择器:

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

XPath 表达式

如果您不仅要确保该元素不为空，还要检查它包含的文本，您可以使用 XPath 表达式 page.waitForXPath:

await page.waitForXPath("//*[@class='count' and contains(., 'Expected text')]");

此行只有在页面上有一个元素具有 class="count" 属性并包含文本 Expected text.

后才会解析

Answer 3

你可以使用 waitForFunction() 的最佳解决方案（避免奇怪的函数作为字符串）：

const selector = '.count';
await page.waitForFunction(
    selector => document.querySelector(selector).value.length > 0,
    {},
    selector
);

取决于文本类型，将 value 替换为 innerText。

勾选puppeteer API

Answer 4

page.waitFor()

您也可以简单地使用 page.waitFor() 传递函数或 CSS 选择器等待。

等待函数

如果元素是 input field, we can check that the .count element exists before checking that a value 则存在以避免潜在的错误：

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

如果元素不是，则存在 input field, we can check that the .count element exists before checking that innerText 以避免潜在的错误：

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

等待CSS选择器

如果元素是input field that contains a placeholder, and you want to check if a value当前存在，可以使用:not(:placeholder-shown):

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

如果元素是一个 input field that does not contain a placeholder, and you want to check if the value 属性包含一个字符串，你可以使用 :not([value=""]):

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

如果元素是不是一个没有任何子元素节点的input字段，我们可以使用:not(:empty)等待元素包含文本：

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

page.waitForXPath()

等待 XPath

否则，您可以使用 page.waitForXPath() 等待 XPath 表达式在页面上定位元素。

即使 count 以外的元素上存在其他类，以下 XPath 表达式也将起作用。换句话说，它将像 .count 一样工作，而不是 [class="count"].

如果元素是input字段，可以使用下面的表达式等待value属性包含字符串：

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

如果元素不是一个 input 字段，您可以使用以下表达式等待元素包含文本：

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

Answer 5

await page.waitFor((name) => {
 return document.querySelector('.top .name')?.textContent == name;
}, {timeout: 60000}, test_client2.name);

Answer 6

waitForXPath 很简单，适用于查找具有特定文本的元素。

const el = await page.waitForXPath('//*[contains(text(), "Text to check")]');

使用 Puppeteer 时等待文本出现

Wait for text to appear when using Puppeteer

javascript

node.js

google-chrome-devtools

google-chrome-headless

puppeteer

page.waitForSelector

XPath 表达式

page.waitFor()

page.waitForXPath()