Hands-On Exercises

Create a new directory: mkdir shopping-e2e && cd shopping-e2e

Initialize: npm init -y && npm install -D @playwright/test

Install browsers: npx playwright install --with-deps chromium

Create the directory structure: pages/, specs/, fixtures/, test-data/, utils/

Create playwright.config.ts with baseURL pointing to the Shopping Portal

Create a smoke test that opens the Shopping Portal and verifies the page title

Run it: npx playwright test -- verify it passes

Create BasePage with waitForPageLoad and expectNoErrors methods

Create LoginPage extending BasePage with goto, login, expectError, expectLoggedIn

Create ProductListPage with goto, search, getProductCount, openProduct, expectNoResults

Create CartPage with goto, getItemCount, removeItem, checkout, expectEmpty

Create CheckoutPage with fillShipping, fillPayment, placeOrder, expectConfirmation

Use getByRole and getByLabel for all locators -- no CSS selectors

Create fixtures/test-fixtures.ts extending base test with all page objects

Add an authenticatedPage fixture that logs in automatically

Write 4 authentication tests: valid login, invalid login, empty email, empty password

Write the P0 purchase flow test: search → add to cart → checkout → confirm

Write 3 cart management tests: add, remove, empty cart

Run all tests and fix any failures

Write a data-driven login test with 5 scenarios

Mock the product API to test the out-of-stock scenario

Mock the product API to test the error/500 scenario

Add a visual regression test for the login page

Add @smoke tags to the 5 most critical tests

Run only smoke tests: npx playwright test --grep @smoke

Push your project to a new GitHub repository

Create .github/workflows/playwright-pr.yml for smoke tests on PRs

Create .github/workflows/playwright-nightly.yml for full regression with sharding

Open a PR and verify the smoke pipeline runs and passes

Enable branch protection requiring the test job to pass

Celebrate -- you have a production-grade test suite with CI