Table of contents

How to Test Account Settings with Playwright

Most services allow users to manage their account settings. These oftentimes have far-reaching implications on how the user experiences the platform. Verifying that the account settings can be viewed and modified is key in making sure we are offering a smooth service.

Account properties to verify can run the gamut from simple text to connected third party services. In this example, we will focus on a popular case: changing a profile image by uploading one of our own.

On our test site, such a test could look as follows:

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('#login')
  await page.click('#n-email')

  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.click('.fa-user')

  await page.waitForSelector('#user-details > div > input')

  const handle = await page.$('input[type="file"]')
  await handle.setInputFiles(process.env.FILE_PATH)

  await page.waitForSelector('#user-details > div > button')
  await page.click('#user-details > div > button')

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

  await browser.close()
})()

USER_EMAIL=user@email.com USER_PASSWORD=supersecure1 FILE_PATH=file.jpg node file-upload.js

SET USER_EMAIL=user@email.com
SET USER_PASSWORD=supersecure1
SET FILE_PATH=file.jpg
node file-upload.js

Here, we are simply checking for a message giving us feedback on the status of the upload. Depending on the website we are testing, it might be possible to also download the profile image afterwards to run a comparison locally for a more robust check.

1. Use environment variables to inject secrets.
2. Use setInputFiles (Playwright) to upload the file.
3. If possible, download the file from the platform and compare it with the one that was just uploaded.

1. Official documentation from Playwright