javascript - 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() 抛出错误:

Error: Evaluation failed: DOMException: Failed to execute 'querySelector' on 'Document': 'div[class="asset"]:contains("Assets Folder")' is not a valid selector.

Answer 1

page.waitForFunction()

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

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

因此，您可以等到 some与选择器匹配的 Node 数组中的元素(至少一个)具有 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"]');