javascript - 使用 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可以找到不包含子节点或文本的元素。将它与:not选择器结合起来，我们可以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字段，我们可以.count在检查 a 是否存在之前检查元素value是否存在以避免潜在的错误：

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

如果元素不是input字段，我们可以在.count检查元素存在之前检查元素innerText是否存在以避免潜在的错误：

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

等待 CSS 选择器

如果元素是input包含 a 的字段placeholder，并且您想检查 avalue当前是否存在，则可以使用:not(:placeholder-shown)：

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

如果元素是不包含 a的input字段，并且您想检查属性是否包含字符串，则可以使用：placeholdervalue:not([value=""])

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

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

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

---

page.waitForXPath()

等待 XPath

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

即使元素上存在除count. 换句话说，它将像.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

简单而且效果很好。

await page.waitForXPath('//*[contains(text(), "要检查的文本")]');