Table of contents

How to Automate Login with Playwright

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.

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 this could look like the following:

import { test, expect } from '@playwright/test'

test('Login', async ({ page }) => {
  await page.goto('https://danube-web.shop/')

  await page.getByRole('button', { name: 'Log in' }).click()
  await page.getByPlaceholder('Email').fill(process.env.USER_EMAIL)
  await page.getByPlaceholder('Password').fill(process.env.USER_PASSWORD)
  await page.getByRole('button', { name: 'Sign In' }).click()

  await expect(page.getByText('Welcome back, user@email.com')).toBeVisible()
})

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

USER_EMAIL=user@email.com USER_PASSWORD=supersecure1 npx playwright test login.spec.ts

SET USER_EMAIL=user@email.com
SET USER_PASSWORD=supersecure1
npx playwright test login.spec.ts

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.