Web Automation Framework Project
Part of the QA Testing Roadmap
In short
This is the project interviewers open first. A clean framework with page objects, config, reports and CI shows you can build automation a team could actually live with.
The flagship portfolio piece — extend Phase 7's practice project into a more polished, well-documented automation framework showcasing your full technical skill set.
Think of it like this
The well-organised toolbox
A mechanic with a tidy toolbox finds the 10 mm spanner in two seconds, every time. One with a sack of tools wastes ten minutes per job. A framework is your tidy toolbox: everything has a place, so tests stay quick to write and fix.
Watch it happen
Folder structure of a clean framework
1/5One repo, with a README that explains how to install and run everything in three commands.
The big ideas
What you need to know
Page Object Model
Locators and page actions live in classes. When the UI changes, you fix one file, not fifty tests.
Config, not hardcoding
Base URLs, browsers and credentials come from config and environment variables.
Reports and evidence
HTML report, screenshots and traces on failure. Reviewers should see results without running anything.
A README that sells
Explain the app under test, the structure, how to run it, and a screenshot of the report.
See it in code
Walk through the code
1// pages/LoginPage.ts2import type { Page } from "@playwright/test";3 4export class LoginPage {5 constructor(private page: Page) {}6 7 async open() {8 await this.page.goto("/login");9 }10 11 async loginAs(email: string, password: string) {12 await this.page.getByLabel("Email").fill(email);13 await this.page.getByLabel("Password").fill(password);14 await this.page.getByRole("button", { name: "Log in" }).click();15 }16}1/3The class receives Playwright's page object, so every method can drive the browser.
A minimal page object. Tests call loginPage.loginAs(user.email, user.password) and never touch locators directly.
Save yourself the pain
Common mistakes
Oops
Building a huge framework with ten layers before writing any tests.
Do this instead
Start with three solid tests and page objects, then add structure as real needs appear.
Oops
A repo with no README and tests that only run on your laptop.
Do this instead
Anyone should clone it, run two commands and see green tests. Add CI to prove it.
Your mission
Framework skeleton
Quick check
The login button's label changes from 'Log in' to 'Sign in'. In a good framework, how many files do you change?
Go deeper
- 1Extend your Phase 7 framework with additional test coverage and cleaner Page Object structure.
- 2Add CI/CD integration (Phase 11) so tests run automatically on every push.
- 3Write a thorough README explaining your framework's architecture and setup instructions.
More projects at this stop
Manual Test Case Suite for a Real App
API Automation Testing Project
Performance Testing Report
Mobile Automation Project
CI/CD Integrated Test Suite
Portfolio Website or GitHub Showcase
Stuck on this topic? Ask an Insider
Get 1:1 guidance from people who've walked this exact path — on the InsideEdge app.
