Сложный селектор CSS в Puppeteer

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: не удалось выполнить 'querySelector' для 'Document': 'div [class = "asset"]: содержит ("папка активов")' недопустимый селектор.

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