E2E Login

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.

Taking screenshots

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...

Working with selectors

The way you reference a UI element of your target web application for Puppeteer and Playwright to interact with is through CSS selectors. Becoming proficient in the usage of such selectors is therefore a requirement for writing quality scripts.

Login with Google

Social login using your personal Google or Google Gsuite account is a common use case for many login scenarios.

# Steps

  1. We start at a site that offers Google as an authentication provider. In this case we use Stack Overflow.
  2. We fetch the login page and click the "Login with Google" button.
  3. We are redirect to Google.
  4. We provide the username and password, injected by using environment variables.
  5. We are redirected back to the starting.

Microsoft Live login

Puppeteer and Playwright also allow us to automate logging in to a Microsoft Live account.

# Steps

  1. We start at https://login.live.com
  2. We provide the username and password, injected by using environment variables
  3. We are redirected to the main account page

What is Puppeteer?

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:

Navigating & waiting

Every useful script that we will write will almost certainly do three key things:

  1. Navigating to some web page
  2. Waiting for something
  3. 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 history.pushState() API.

In the example below we trigger two navigations:

  1. The initial load of the page.
  2. A navigation to the shopping cart by clicking a link