Puppeteer 中复杂的 CSS 选择器

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"]');