Complicated CSS selector in Puppeteer

Question

Is there a shorter method to wait for complicated selector?

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() throws an error:

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

If i remember correctly, the `:contains()` selector only works with jQuery. See [this question](https://stackoverflow.com/questions/1520429/is-there-a-css-selector-for-elements-containing-certain-text) — Martijn Vissers, Oct 30 '18 at 12:01
Ok, so maybe there is shorter workaround, without `evaluate + promise + setinterval` chain? — John Lenson, Oct 30 '18 at 13:28
my approach is to use javascript to insert a value to role or name for better selection. Puppeteer currently only supports for selection of name and role. — Alston, Jun 13 '22 at 14:01

Grant Miller · Accepted Answer · 2018-10-30T18:09:04.920

page.waitForFunction()

You can use page.waitForFunction() to wait for a given function to return a truthy value.

Keep in mind that the :contains() selector is part of the jQuery API and not a standard CSS selector.

Therefore, instead, you can wait until some element (at least one) in an array of nodes matching the selector has textContent which includes the specified text and is present in the DOM:

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

page.waitForXPath()

Alternatively, XPath includes a contains() function, so you can use page.waitForXPath() with a corresponding XPath expression to wait for your element to be added to the DOM:

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

Complicated CSS selector in Puppeteer

1 Answers1

page.waitForFunction()

page.waitForXPath()