Playwright Beginner Tutorials - Playwright MiniProject: End-to-End Automation with the To-do App (Best Practices) 🔥

🚀 Welcome to Mini Project 1! This is the complete guide to Playwright End-to-End (E2E) Automation using a real-world To-do App. Perfect for absolute beginners, you will master the Playwright setup, locators, assertions, and advanced reporting features like HTML Reports, Screenshots, Video, and Tracing. TIMESTAMPS: Playwright Mastery from Setup to Debugging 00:00 - Intro 00:24 - Project Overview 03:31 - Project Goals 04:38 - Create new project folder 06:41 - Check node is installed 08:42 - Initialize node project 09:26 - Install Playwright 13:20 - Create test script (Record) 19:12 - Run tests 21:28 - Run with TAGS 23:26 - Run in Slow Motion 25:01 - Run in Interactive mode ui 28:55 - HTML Reports 31:20 - Screenshots and Video on Failure 35:06 - Show trace 36:51 - Tips 39:38 - Outro TAKE THE QUIZ and let me know your score https://forms.gle/tA47vDuNHMKY8Jcw5 GitHub - https://github.com/pratik9905/MiniProject_Playwright Project Goals (Measurable): Install Playwright and create tests Automate adding 3 todos, mark 1 as completed, delete Generate Playwright HTML report and open it Add assertions and check failure in report Take screenshots and video on failure and attach to report Run with interactive ui, debug mode, and trace on Scenario Details Demo App: https://todomvc.com/examples/react/dist/ Scenario: Automate core Todo actions (add, complete, delete) on the TodoMVC app. Key Learnings: Setup, locators, assertions, interactions, and advanced reporting configurations. Tools: Node.js, Playwright (use latest if possible), VS Code (or any editor). End Result: A working Playwright Test that runs locally, produces an HTML report, and captures debugging assets on failure. Step-by-Step Implementation and Commands - Step 1 - Create a new project folder and open in VS Code (or any IDE) Step 2 - On terminal goto project folder location and check if node is installed - node -v npm -v Step 3 - Create project folder and initialize npm - npm init -y npm init -y creates package.json. Step 4 - Install Playwright Test (dev dependency) and install browsers: npm init playwright@latest npx playwright install npx playwright install downloads Chromium/Firefox/WebKit used by Playwright. Step 5 - Create tests/todo.spec.ts (TypeScript) or tests/todo.spec.js (JavaScript) - Step 6 - Add test script Can also record - npx playwright codegen https://todomvc.com/examples/react/dist/ Perform the following actions: Add a new To-Do: “Buy Groceries” Add another: “Pay Bills” Mark “Buy Groceries” as complete Delete “Pay Bills” Add assertions for visibility and text - Step 7 - Run all tests (headless) - npx playwright test Step 8 - Run in headed mode - npx playwright test --headed npx playwright test --headed --project=chromium Try npx playwright test --ui Can use tags for running, Can do playback in slow motion Step 9 - Generate and view HTML report - npx playwright test --headed --reporter=html npx playwright show-report Step 10 - Add Assertion - await expect(page.locator('.todo-list li')).toHaveCount(2); Re-run and verify both tasks appear before one is completed - Step 11 - In config file add scripts to take screenshot on failure Make some assertions fail, run and check report - // playwright.config.js import { defineConfig } from '@playwright/test'; export default defineConfig({ testDir: './tests', reporter: [['html', { open: 'never' }]], use: { browserName: 'chromium', headless: false, screenshot: 'only-on-failure', // Take screenshot only when test fails trace: 'retain-on-failure', // Optional: keeps trace for debugging video: 'retain-on-failure' // (Optional) Record video if test fails }, }); TIPS How to always run on chrome browser in headed mode config file headless: false How to run in debug mode - npx playwright test --debug How to run with interactive ui - npx playwright test --ui How to run with Trace - npx playwright test --trace on You can then open the HTML report and click on the trace icon to open the trace. 'on-first-retry' - Record a trace only when retrying a test for the first time. 'on-all-retries' - Record traces for all test retries. 'off' - Do not record a trace. 'on' - Record a trace for each test. (not recommended as it's performance heavy) 'retain-on-failure' - Record a trace for each test, but remove it from successful test runs. How to add tags and run specific tagged tests - test.describe('Todo Tests @smoke', () =＞ { ... }); npx playwright test --grep @smoke ▬▬▬▬▬▬▬ Share with all who may need this If my work has helped you, consider helping any animal near you, in any way you can Never Stop Learning Raghav Pal ▬▬▬▬ USEFUL LINKS ▬▬▬▬ ✅ ALL TUTORIALS - https://AutomationStepByStep.com/ 🙌 Connect with Raghav: * Ask Raghav: https://bit.ly/2CoJGWf Shorts Eng - https://bit.ly/3H9bifV Shorts Hindi - https://bit.ly/3XY7XqN — #playwright #AutomationTesting #TodoAppAutomation #PlaywrightProject #E2ETesting #AutomationStepByStep