Table of contents

Automating User Signup with Playwright

Signups are key transactions in most web platforms, and therefore prime targets for automation.

Oftentimes, registering an account is where we will find longer forms asking the user to answer a variety of questions. Luckily, Playwright is quick enough to blaze through these in seconds.

The flow will often match the following:

1. Navigate to the signup form.
2. Fill in all text fields, check all boxes etc.
3. Submit the form by clicking a button.

We will likely want to also check that some change occurred in the UI to confirm that the registration worked.

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

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

  await page.getByRole('button', { name: 'Sign up' }).click()
  await page.getByPlaceholder('Name', { exact: true }).fill('John')
  await page.getByPlaceholder('Surname').fill('Doe')
  await page.getByPlaceholder('Email').fill('user@email.com')
  await page.getByPlaceholder('Password').fill('supersecure1')

  await page.getByPlaceholder('Company (optional)').fill('Test Inc.')
  await page.getByLabel('Myself').check()
  await page.getByLabel('I would like to receive').check()
  await page.getByLabel('I have read and accept the').check()

  await page.getByRole('button', { name: 'Register' }).click()
  await expect(page.getByText('Welcome back, user@email.com')).toBeVisible()
})

Run this example as follows:

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

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

The normal signup flow might include asking the user to confirm their email address right away by navigating to a URL included in an automated email. Reliably replicating the steps needed to achieve that is not trivial.

A possible solution to the issue is having the system under test distinguish between test sessions and normal user sessions, and skip the verification step for test sessions. A way to achieve this would be to check for a specific user agent ID which could be set as part of our test:

await page.setUserAgent('Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 \
(KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36 TEST_ID/<MY_SECRET>');

1. Use environment variables to inject secrets.
2. You might need to go through additional steps in case email confirmation or similar is required.