When automating key site transactions, we inevitably stumble into login scenarios. In most cases, users need to be able to access accounts on a platform to get any value out of it. If they suddenly become unable to do so, we need to be informed as quickly as possible.
Headless browsers are fully capable of taking screenshots, which is very useful in troubleshooting failures or faulty scripts. Using additional libraries and tools, it is also possible to automate vis...
The way you reference a UI element of your target web application for Puppeteer and Playwright to interact with is through CSS selectors
Social login using your personal Google or Google Gsuite account is a common use case for many login scenarios.
- We start at a site that offers Google as an authentication provider. In this case we use Stack Overflow
- We fetch the login page and click the "Login with Google" button.
- We are redirect to Google.
- We provide the username and password, injected by using environment variables.
- We are redirected back to the starting.
Puppeteer and Playwright also allow us to automate logging in to a Microsoft Live account.
- We start at
- We provide the username and password, injected by using environment variables
- We are redirected to the main account page
Let's start by creating a new directory and navigating to it. Assuming you already have Node.js
Straight 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:
Users 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.
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 a
page.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 the
In the example below we trigger two navigations:
- The initial load of the page.
- A navigation to the shopping cart by clicking a link