Question

是否有较短的方法来等待复杂的选择器？

await page.evaluate(() => {
  return new Promise(resolve => {
     var aid = setInterval(function(){
        let block = $('div[class="asset"]:contains("Assets Folder")');

        if(block.length){
           clearInterval(aid);
           block.click();
           resolve();
        }

     }, 100);
  })
});

page.waitFor()引发错误：

错误：评估失败：DOMException：无法在'Document'上执行'querySelector'：'div [class =“ asset”]：contains（“ Assets Folder”）'不是有效的选择器。

Answer 1

page.waitForFunction（）

您可以使用page.waitForFunction()等待给定的函数返回真实值。

请记住，:contains()选择器是jQuery API的一部分，而不是标准CSS选择器。

因此，相反，您可以等到匹配选择器的节点数组中的some个元素（至少一个）具有textContent个includes指定的文本并出现在DOM：

await page.waitForFunction(() =>
  [...document.querySelectorAll('div[class="asset"]')].some(e => e.textContent.includes('Assets Folder'))
);

page.waitForXPath（）

或者，XPath包含一个contains()函数，因此您可以将page.waitForXPath()与相应的XPath表达式一起使用，以等待将元素添加到DOM：

await page.waitForXPath('//*[contains(text(), "Assets Folder")]/ancestor-or-self::div[@class="asset"]');

Puppeteer中复杂的CSS选择器

1 个答案:

page.waitForFunction（）

page.waitForXPath（）