Playwright Practice Assignments: Module-wise Exercises for Beginners to Advanced

Reading is not enough: you learn Playwright by building. This page gives you one checkpoint challenge per module of the course, using free practice sites, so you can prove your skills step by step from your first test to a CI-ready framework.

---

🏋️ How to Use This Page

Every lesson in the Playwright Tutorial with TypeScript ends with its own assignment. This page adds one module checkpoint per module: a slightly bigger challenge that combines the lessons of that module. Complete it before moving on.

Rules for every checkpoint:

• Write the solution in TypeScript with Playwright Test.
• Every test must pass three times in a row: npx playwright test --repeat-each=3.
• No waitForTimeout, no force: true, no selectors inside tests from Module 10 onward.
• Commit each checkpoint to Git with a clear message, so your repository shows your progress.

Practice applications used: https://www.saucedemo.com, https://the-internet.herokuapp.com, https://demo.playwright.dev/api-mocking, https://jsonplaceholder.typicode.com, https://automationexercise.com and the SQA Tools practice pages.

Level	Modules	Badge
🟢 Beginner	1 to 5	Playwright Practitioner
🔵 Intermediate	6 to 9	Playwright Engineer
🟠 Advanced	10 to 13	Playwright Architect
🟣 Career	14 to 15	Interview Ready

---

🟢 Module 1 Checkpoint: Getting Started

Lessons: What Is Playwright, Install, First Test, Config, CLI

1. Create a new TypeScript project with npm init playwright@latest and remove the example test.
2. Configure baseURL for Sauce Demo, list plus html reporters, screenshots on failure and Chromium plus Firefox projects.
3. Write three login tests (valid, locked out, empty form) in one describe block.
4. Add npm scripts test, test:headed, test:ui and report.
5. Write a short README explaining how to install and run the project.

---

🟢 Module 2 Checkpoint: JavaScript Essentials

Lessons: Variables to Promises and Async/Await

1. Write a function calculateCartTotal(items) that takes an array of { name, price, qty } objects and returns the total rounded to two decimals.
2. Write a function that returns the most expensive item using reduce.
3. Write an async function fetchUser(id) that calls https://jsonplaceholder.typicode.com/users/<id> with fetch and handles errors with try/catch.
4. Fetch users 1 to 5 in parallel with Promise.all and print their names.

---

🟢 Module 3 Checkpoint: TypeScript for Playwright

Lessons: TypeScript Variables to TypeScript for Playwright

1. Create interfaces Product and CartItem, and a type SortOption = 'az' | 'za' | 'lohi' | 'hilo'.
2. Create a generic class Repository<T extends { id: number }> with add, findById and all methods.
3. Rewrite calculateCartTotal from Module 2 with full types.
4. Add tsconfig.json with strict: true and make npx tsc --noEmit pass.

---

🟢 Module 4 Checkpoint: Locators and Interactions

Lessons: Locators, CSS and XPath, Actions, Codegen, Alerts, Frames, Tabs, Web Tables, Downloads

On the-internet.herokuapp.com:

1. Accept, dismiss and answer the three JavaScript dialogs on /javascript_alerts.
2. Open the new window on /windows and assert its heading, then return to the first tab.
3. Read the text of the middle frame on /nested_frames.
4. On /tables, find the person with the highest amount due in #table1 by reading all rows.
5. Select both options on /dropdown, tick both boxes on /checkboxes, and upload a file on /upload.

---

🟢 Module 5 Checkpoint: Assertions, Waits and Screenshots

Lessons: Assertions, Waits, Screenshots and Videos, Visual Testing

1. On /dynamic_loading/1 of the-internet, click Start and assert “Hello World!” appears, using only auto-waiting and web-first assertions.
2. Use expect.soft to check five product prices on Sauce Demo in one test.
3. Configure screenshots and videos on failure and attach a custom screenshot with testInfo.attach.
4. Create visual baselines for the Sauce Demo login page (full page and .login-box element), masking the credentials panel.

---

🔵 Module 6 Checkpoint: Organizing Tests

Lessons: Hooks, Tags and grep, Annotations, Fixtures, Custom Fixtures, Retries and Flaky Tests

1. Replace every beforeEach login in your Sauce Demo suite with a custom loggedInPage fixture.
2. Tag tests @smoke and @regression and add npm scripts for each.
3. Mark one test test.fixme with a reason and one test.slow.
4. Configure retries for CI only with trace: 'on-first-retry', write a deliberately flaky test, and find it under Flaky in the report. Then delete it.

---

🔵 Module 7 Checkpoint: Test Data, Configuration and Cross-Browser

Lessons: Parameterized Tests, JSON, CSV, .env, Multiple Configs, Cross-Browser, Mobile

1. Move all login test data into test-data/logins.json and generate one test per row.
2. Read the Sauce Demo password from a .env file and add .env.example.
3. Run the suite in Chromium, Firefox, WebKit, branded Chrome and a Pixel 5 project.
4. Add responsive tests for 375, 768 and 1440 px widths.

---

🔵 Module 8 Checkpoint: Authentication and Network

Lessons: Login Sessions, Network Mocking, Passkeys

1. Add a setup project that logs in to Sauce Demo once and saves storageState; make all inventory tests reuse it.
2. On demo.playwright.dev/api-mocking, mock the fruits API with your own list, then simulate an empty list and a 500 error.
3. Block all images on Sauce Demo and measure the time difference of your suite.

---

🔵 Module 9 Checkpoint: API Testing

Lessons: API Testing, API with POM

1. Create an api project for JSONPlaceholder with baseURL.
2. Write a PostsApi class with typed list, get, create, update and delete methods.
3. Write a full CRUD test suite (at least 8 tests) using the class.
4. Add one negative test (/posts/0 returns 404).

---

🟠 Module 10 Checkpoint: Framework Design

Lessons: POM, Folder Structure, Design Patterns, SOLID, BDD, BDD Framework, Enterprise Framework

1. Restructure your Sauce Demo suite into src/ and tests/ with page objects, a HeaderComponent and fixtures.
2. Add path aliases and an environments.ts file selected by TEST_ENV.
3. Add ESLint with eslint-plugin-playwright and fix all warnings.
4. Write two features in Gherkin (login, checkout) using the BDD approach from Module 10.

---

🟠 Module 11 Checkpoint: Debugging and Reporting

Lessons: Debugging, Trace Viewer, Reporters, Allure

1. Break a locator, then diagnose it three ways: error call log, --debug Inspector, and Trace Viewer. Write a short note on which was fastest.
2. Wrap your checkout test in test.step blocks and view them in the trace and HTML report.
3. Configure list, html, junit and Allure reporters together.
4. Write a custom reporter that prints the five slowest tests.

---

🟠 Module 12 Checkpoint: Parallel Execution and CI/CD

Lessons: Parallel and Sharding, GitHub Actions, Jenkins, Docker and Kubernetes

1. Enable fullyParallel and make the whole suite pass with --workers=4 --repeat-each=3.
2. Push the project to GitHub with a workflow that runs smoke tests on pull requests and the full suite nightly.
3. Shard the nightly run into 3 jobs with a merged HTML report.
4. Run the suite locally inside the official Playwright Docker image.

---

🟠 Module 13 Checkpoint: AI-Powered Testing

Lessons: Playwright MCP, Test Agents, AI Tools for QA

1. Install Playwright MCP in your AI client and use it to explore the Sauce Demo checkout flow.
2. Run npx playwright init-agents, write a seed test, and generate a test plan for sorting and the cart.
3. Generate tests from the plan, review them, and refactor them into your page objects.
4. Write a one-page reflection: what the agents did well, what you had to fix, and where human review was essential.

---

🟣 Module 14 Checkpoint: Projects

Complete Project 1, Project 2: E-commerce Framework and Project 3: API + UI Hybrid Framework, and publish at least Projects 2 and 3 on GitHub with a README, a passing CI badge and a short “design decisions” section.

---

🟣 Module 15 Checkpoint: Interview Readiness

1. Answer the 200 Playwright + TypeScript questions out loud, timing yourself; mark the ones you could not explain.
2. Prepare a 3-minute walkthrough of your Project 2 or 3 framework.
3. Take the Playwright with TypeScript MCQ assessment and review every wrong answer.
4. Practise the scenario questions in interview questions for experienced.

---

❓ FAQ

🤔 Where can I practise Playwright automation for free?

Use the free demo sites listed on this page (Sauce Demo, the-internet, Playwright’s API-mocking demo, JSONPlaceholder and Automation Exercise) and the SQA Tools practice pages, together with the module checkpoints.

🤔 Are solutions provided for these assignments?

Each linked lesson contains the code and techniques you need. Compare your work with the examples in the lessons and the two framework projects.

🤔 How long does it take to complete all assignments?

With 1 to 2 hours a day, most learners finish the module checkpoints and projects in about 2 to 3 months.

🤔 Do I need to finish every checkpoint before the projects?

Finish at least Modules 1 to 10 before Project 2, and Modules 1 to 12 before Project 3.

---

🎯 Next Steps

• 🏗️ Playwright Testing Practice Exercises
• 💼 Playwright Interview Questions and Answers
• 📄 Playwright Cheat Sheet
• 🎭 Playwright Tutorial with TypeScript