As a QA Automation Engineer, I’ve worked with different frameworks and tools, but Playwright quickly became one of my favorites — especially when paired with TypeScript. So I decided to build a reusable Playwright Automation Starter Kit that new testers and developers can pick up and run with immediately.
This article shares the structure, tools, and logic behind the framework. At the end, you’ll also find a link to a complete, ready-to-run version for anyone who wants to skip setup and go straight into testing.
🏠 Project Goal
Create a minimal, clean and modular Playwright framework that:
- Covers a full E2E user flow: Sign Up → Login → Profile Update
- Uses TypeScript + Playwright Test Runner
- Implements the Page Object Model (POM) structure
- Records test videos and produces HTML + JSON reports
🔧 Technologies Used
- Playwright
- TypeScript
- @playwright/test
- Page Object Model pattern
🔮 BasePage Utility
All common methods like clickElement, typeText, verifyElementVisible, selectDropdownByValue, etc. are inside BasePage.ts.
This makes every page class clean and focused only on selectors.
✅ What the Test Covers
The main test file user-flow.spec.ts simulates a full user journey:
- Sign Up
- Login
- Update Profile
Each step includes proper assertions and uses Header navigation and User model data.
🎞️ Sample Code Snippet
// user-flow.spec.ts
await header.goToSignup();
await signupPage.fillAndSubmitSignupForm(user);
await signupPage.verifySignupSuccess();
await loginPage.login(user);
await loginPage.verifyLoginSuccess();
await header.goToProfile();
await profilePage.updateProfile(updatedUser);
await profilePage.verifyProfileUpdateSuccess();
🎥 Bonus: Test Reports + Video
- HTML report: npx playwright show-report
- Video recording for each run: stored in test-results folder
🎯 Who It’s For
This is perfect for:
- Junior QA Engineers
- Bootcamp grads
- Developers who want to explore automation without boilerplate
💸 Want to Skip Setup?
If you want a plug-and-play version with everything ready:
✨ Download the full Playwright Starter Kit here:
It includes the working code, reusable utilities, config files, test video, and HTML report.
🚀 Just unzip → install → run tests:
- npm install playwright
- npm install @playwright/test --save-dev
- npx playwright install
- npm install typescript ts-node @types/node --save-dev
- npx playwright test
Add --headed if you want to see the UI during execution:
- npx playwright test --headed
Feel free to fork, improve, or ask questions below. Hope it helps others jumpstart their automation journey!
Top comments (0)