NodeJS 使用人偶师时等待元素出现

8yparm6h  于 2023-04-05  发布在  Node.js
关注(0)|答案(6)|浏览(156)

我想知道是否有类似于Selenium的方法来等待特定元素的文本出现。我尝试过类似的方法,但它似乎没有等待:

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

ycl3bljg1#

您可以使用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');
qvtsj1bj

qvtsj1bj2#

除了Nilobarp的答案中提出的方法外,还有两种方法可以做到这一点:

page.waitForSelector

使用伪选择器:empty可以找到不包含子节点或文本的元素。结合:not选择器,我们可以使用page.waitForSelector查询非空选择器:

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

XPath表达式

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

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

只有当页面上有一个属性为class="count"并包含文本Expected text的元素时,这一行才会被解析。

gg58donl

gg58donl3#

使用waitForFunction()可以做的最好的解决方案(避免奇怪的字符串函数):

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

根据文本的类型,将value替换为innerText
检查puppeteer API

pbossiut

pbossiut4#

page.waitFor()

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

等待函数

如果元素是input字段,我们可以在检查value之前检查.count元素是否存在,以避免潜在的错误:

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

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

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

等待CSS选择器

如果元素是包含placeholderinput字段,并且您想要检查当前是否存在value,则可以使用:not(:placeholder-shown)

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

如果元素是一个input字段,它包含placeholder,并且你想检查value属性是否包含字符串,你可以使用:not([value=""])

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

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

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

page.waitForXPath()

等待XPath

否则,可以使用page.waitForXPath()等待XPath表达式在页面上定位元素。
以下XPath表达式即使在count以外的元素上存在其他类也可以工作。换句话说,它的工作方式类似于.count,而不是[class="count"]
如果元素是input字段,则可以使用以下表达式等待value属性包含字符串:

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

如果元素是notan input字段,则可以使用以下表达式等待元素包含文本:

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

w9apscun5#

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

ru9i0ody6#

waitForXPath很简单,可以很好地查找具有特定文本的元素。

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

相关问题