Reading about tests is not enough. You need to write them. Here are five exercises, ordered from easy to challenging. Do all of them. Each one reinforces a different concept from this chapter.
Exercise 1: Setup and Verify
Create a new Playwright project using npm init playwright@latest
Run the sample test: npx playwright test
Open the HTML report: npx playwright show-report
Verify tests pass on all three browsers (Chromium, Firefox, WebKit)
Exercise 2: Banking Portal Title Test
Create a file: tests/banking.spec.ts
Write a test that navigates to the Banking Portal
Assert the page title contains "Banking"
Assert the login form is visible on the page
Run it in headed mode: npx playwright test banking.spec.ts --headed
Exercise 3: Login Flow with Hooks
Create a test.describe block called "Banking Portal Login"
Add a test.beforeEach that navigates to the Banking Portal
Write a test for successful login (fill username, password, click Login)
Write a test for failed login with wrong credentials
Write a test for login with empty fields
Run all three tests: npx playwright test banking.spec.ts
Browse the Shopping Portal -- click on a product, add to cart
Copy the generated code into a new test file
Add at least 3 assertions: page title, product name visible, cart count updated
Run the refined test in headed mode
Exercise 5: Debug a Failing Test
Intentionally break one of your tests (change a locator to something wrong)
Run it with --debug flag and observe the Playwright Inspector
Use the Pick Locator feature to find the correct locator
Add page.pause() before the failing line, run without --debug, and inspect the page
Fix the test, remove page.pause(), and verify it passes
Do not skip Exercise 5. Debugging is where you spend 60% of your time as a QA engineer. Knowing how to use --debug and page.pause() will save you hours every week.
Key Point: Practice is not optional. Write the tests, break them, debug them, fix them. That loop is how you learn automation. Reading alone will not get you there.