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() 等待给定函数 return 一个真值。

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

因此，您可以等到 some element (at least one) in an array of nodes matching the selector has textContent which includes 指定的文本出现在 DOM:

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

page.waitForXPath()

或者，XPath 包含一个 contains() function, so you can use page.waitForXPath() 和相应的 XPath 表达式，以等待您的元素被添加到 DOM:

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