E2E Account Settings

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:


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



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


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.

Takeaways

  1. Use environment variables to inject secrets.
  2. Use uploadFile (Puppeteer) or 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.

Further reading

  1. Official documentation on file upload with Puppeteer and Playwright.