Puppeteer 中复杂的 CSS 选择器

【问题标题】：Complicated CSS selector in PuppeteerPuppeteer 中复杂的 CSS 选择器
【发布时间】：2019-04-03 10:32:03
【问题描述】：

有没有更短的等待复杂选择器的方法？

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：无法在“文档”上执行“querySelector”：“div[class="asset"]:contains("Assets Folder")' 不是有效的选择器。

【问题讨论】：

如果我没记错的话，:contains() 选择器只适用于 jQuery。见this question
好的，所以也许有更短的解决方法，没有evaluate + promise + setinterval 链？

标签： javascript node.js css-selectors google-chrome-devtools puppeteer

【解决方案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"]');

【讨论】：