Finding elements

It's time to apply everything we have learned so far. We need to master selectors because our Puppeteer code will be mostly about finding elements and interacting with them.

Let's bring back the login page from our e-commerce app:

Login page

If we want to test the login page, we need to find these three elements: The email input, the password input, and the login button.

If we right-click on each input and click on the Inspect element menu item, we will find the following:

• The email has the ID email.
• The password has the ID password.
• The login is a button element, with the btn and btn-success CSS classes, and the style=" width: 100%;" style.

Puppeteer provides two functions to get elements from the page. The $(selector) function will run the document.querySelector function and return the first element matching that selector or null if no elements were found. The $$(selector) function will run...