javascript - Complicated CSS selector in Puppeteer - Stack Overflow

admin管理员组

文章数量:1417363

Is there a shorter method to wait for plicated 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.

Is there a shorter method to wait for plicated 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.

• javascript
• node.js
• css-selectors
• google-chrome-devtools
• puppeteer

Share Improve this question Follow edited Oct 30, 2018 at 18:10 Grant Miller 29.1k1616 gold badges156156 silver badges170170 bronze badges asked Oct 30, 2018 at 11:30 John LensonJohn Lenson 16722 silver badges99 bronze badges 3

• If i remember correctly, the :contains() selector only works with jQuery. See this question – Martijn Vissers Commented Oct 30, 2018 at 12:01
• Ok, so maybe there is shorter workaround, without evaluate + promise + setinterval chain? – John Lenson Commented Oct 30, 2018 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 Commented Jun 13, 2022 at 14:01

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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

本文标签： javascriptComplicated CSS selector in PuppeteerStack Overflow