Table of contents

E2E Signup

On this page

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 and Puppeteer are quick enough to blaze through these in seconds.

Steps

The flow will often match the following:

Navigate to the signup form.
Fill in all text fields, check all boxes etc.
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.

Playwright


const { chromium } = require('playwright')

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

  await page.goto('https://danube-web.shop/')

  await page.click('#signup')
  await page.click('#s-name')

  await page.type('#s-name', 'John')
  await page.type('#s-surname', 'Doe')
  await page.type('#s-email', process.env.USER_EMAIL)
  await page.type('#s-password2', process.env.USER_PASSWORD)
  await page.type('#s-company', 'John Doe Inc.')

  await page.click('#business')
  await page.click('#marketing-agreement')
  await page.click('#privacy-policy')
  await page.click('#register-btn')

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

  await browser.close()
})()

Puppeteer


const puppeteer = require('puppeteer')

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

  await page.goto('https://danube-web.shop/')

  await page.setViewport({ width: 1200, height: 800 })

  await page.waitForSelector('#signup')
  await page.click('#signup')

  await page.waitForSelector('#s-name')
  await page.click('#s-name')

  await page.type('#s-name', 'John')
  await page.type('#s-surname', 'Doe')
  await page.type('#s-email', process.env.USER_EMAIL)
  await page.type('#s-password2', process.env.USER_PASSWORD)
  await page.type('#s-company', 'John Doe Inc.')

  await page.waitForSelector('#business')
  await page.click('#business')

  await page.waitForSelector('#marketing-agreement')
  await page.click('#marketing-agreement')

  await page.waitForSelector('#privacy-policy')
  await page.click('#privacy-policy')

  await page.waitForSelector('#register-btn')
  await page.click('#register-btn')

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

  await browser.close()
})()

Run this example as follows:

macOS

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

Windows

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

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>');

Takeaways

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