Table of contents

E2E Account Settings

On this page

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.

Steps

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:

Puppeteer


const puppeteer = require("puppeteer");

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

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

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

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

  await page.waitForSelector("#n-email");

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

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

  page.$eval(".fa-user", (elem) => elem.click());

  await page.waitForSelector("#user-details > div > input");
  const inputUploadHandle = await page.$("#user-details > div > input");
  let fileToUpload = process.env.FILE_PATH;
  inputUploadHandle.uploadFile(fileToUpload);

  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();
})();

Playwright


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.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();
})();

macOS

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

Windows

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.

Takeaways

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

E2E Account Settings

Steps

Takeaways

Further reading