How to find elements by CSS selector in Puppeteer?

You can use Puppeteer to find elements using CSS selectors with the page.$() or page.$$() functions.

page.$() returns the first occurence of the CSS selector being used, while page.$$() returns all elements of the page that match the selector.

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // Open Scrapingbee's website
  await page.goto('https://scrapingbee.com');

  // Get the first h1 element using page.$
  let first_h1 = await page.$("h1");

  // Get all p elements using page.$$
  let all_p_elements = await page.$$("p");

  // Get the textContent of the h1 element
  let h1_value = await page.evaluate(el => el.textContent, first_h1)

  // The total number of p elements on the page
  let p_total = await page.evaluate(el => el.length, all_p_elements)

  console.log(h1_value);

  console.log(p_total);

  // Close browser.
  await browser.close();
})();

Related Puppeteer web scraping questions: