Let's start by creating a new directory and navigating to it. Assuming you already have Node.js
Giovanni Rago
9
posts in
basics
Giovanni RagoStraight from the official documentation
Puppeteer is a Node library which provides a high-level API to control Chrome or Chromium over the DevTools Protocol. Puppeteer runs headless by default, but can be configured to run full (non-headless) Chrome or Chromium.
Let's break that down:
Giovanni RagoUsers normally access most website functionality through clicks, keystrokes etc. Puppeteer and Playwright allow us to replicate these events by referencing elements on the page using CSS selectors
Every useful script that we will write will almost certainly do three key things:
- Navigating to some web page
- Waiting for something
- Possibly getting a timeout 😐
Both frameworks handle these scenarios in very similar ways but Playwright explicitly differentiates itself from Puppeteer by having a "built in" waiting mechanism that covers a lot of common scenarios.
# Navigating
Initial navigation to any page is pretty much the same for both frameworks and can happen in multiple ways.
- Whenever your code does a
page.goto(), or apage.click()on a link, you explicitly trigger a navigation. - The webpage you are on can also trigger a navigation by executing
location.href= 'https://example.com'or using thehistory.pushState()API.
In the example below we trigger two navigations:
- The initial load of the page.
- A navigation to the shopping cart by clicking a link
Tim Nolet