Selectors

In Puppeteer, it’s common to interact with different elements in the loaded web page, such as extracting data from paragraphs, clicking buttons, etc. We must learn to isolate and locate only the specific element we need to do that. For this purpose, we use selectors.

Selectors are primarily associated with HTML and JavaScript, particularly in web development. Selectors are used to target and manipulate HTML elements in the Document Object Model (DOM) using JavaScript. They are commonly employed with functions like querySelector or getElementById to access and interact with specific elements on a web page. In the context of Puppeteer, selectors are still relevant, but they are used within the browser automation scripts to identify and interact with DOM elements with their own interface.

Note: The querySelector and getElementById selectors are used to interact with DOM in pure JavaScript. We don’t use them in Puppeteer since Puppeteer has its own selectors, which we'll explain below.

We know that the elements we see on a web page are structured in HTML. So, we can interact with DOM with selectors to target these elements and interact with them as we want. In this lesson, let’s explore the different types and applications of selectors.

We’ll explore books.toscrape.com, a website created for web scraping learning purposes to get hands-on experience. Let’s see the example page below for what we are trying to learn. Suppose we need to go to this website and extract the title of that book, “A Light in the Attic.”