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.

Steps

In its simplest form, a login procedure requires the user to:

1. Navigate to the login form
2. Fill in a username/email field
3. Fill in a password field
4. Click a button to finalise the login

At the end of our test, we need to check if our login procedure has been successful. For example, we could verify that an element is shown that we know only appears for logged-in users.

On our test site (opens new window) this could look like the following:

const puppeteer = require("puppeteer");

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  await page.setViewport({ width: 1280, height: 800 });
  await page.goto("https://danube-webshop.herokuapp.com/");

  await page.waitForSelector("#login");
  await page.click("#login");

  await page.waitForSelector("#n-email");
  await page.type("#n-email", process.env.USER_EMAIL);

  await page.waitForSelector("#n-password2");
  await page.type("#n-password2", process.env.USER_PASSWORD);

  await page.waitForSelector("#goto-signin-btn");
  await page.click("#goto-signin-btn");

  await page.waitForSelector("#login-message", { visible: true });

  await browser.close();
})();

const { chromium } = require("playwright");

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();

  await page.goto("https://danube-webshop.herokuapp.com/");

  await page.click("#login");

  await page.type("#n-email", process.env.USER_EMAIL);

  await page.type("#n-password2", process.env.USER_PASSWORD);

  await page.click("#goto-signin-btn");

  await page.waitForSelector("#login-message", { visible: true });

  await browser.close();
})();

Run this example as follows. Replace the username and password placeholder with your own credentials.

USER_EMAIL=user@email.com USER_PASSWORD=supersecure1 node login.js

SET USER_EMAIL=user@email.com
SET USER_PASSWORD=supersecure1
node login.js

Takeaways

1. Use environment variables to inject secrets.
2. You might need to wait for the navigation as you are redirected to the login screen/modal.