Selector Syntax in Puppeteer

user_12620195 0
Viewed 11312

I'm trying to create a script that in part functions press buttons on a webpage using Puppeteer. I keep getting a "not a valid selector " error or a variable remaining undefined after trying to execute the line shown below shown below.

var termselector = await page.$$( ":button" );
//yields "not a valid selector"

or


var termselector = await page.$$( "#zci-images > div.detail.detail--slider.detail--images.detail--xd > div > div.detail__panes.js-detail-panes > div:nth-child(1) > div > div.detail__body.detail__body--images > div > div > a" );
//yields "termselector undefined"

Perhaps I am just fundamentally misunderstanding how selectors work, but I've looked through some JQuery documentation, and I still can't seem to properly format my selectors. Where can I find rules for proper selector syntax for use in puppeteer? Please excuse my ignorance

puppeteer node.js web-scraping jquery
1 Answers

With the line:

await page.$$( );

you have to use css selectors: https://www.w3schools.com/cssref/css_selectors.asp

Or you can use xpath query too: https://www.w3schools.com/xml/xpath_syntax.asp

await page.$x( );

If you know well JQuery, maybe give a try to cheerio:

https://tshaped.io/javascript-scraping-for-marketers-cheerio-and-puppeteer/
https://github.com/cheeriojs/cheerio

CSS selector example for the first picture on your provided link:

$$('#zero_click_wrapper img[src^="//external-content"]')[0]

It means:

  • start matching HTML nodes with ID: zero_click_wrapper
  • ...followed by an image img that the src tag starts with //external-content
user_4651830
Related