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 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();
})();
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();
})();
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
- Use environment variables to inject secrets.
- Use
uploadFile
(Puppeteer) orsetInputFiles
(Playwright) to upload the file. - If possible, download the file from the platform and compare it with the one that was just uploaded.
Further reading
- Official documentation on file upload with Puppeteer and Playwright.