Practice Exercises

You have learned the theory. Now build POM from scratch. These exercises progressively build a complete POM framework for the practice portals. Do not skip any. Each one builds on the previous.

Exercise 1: LoginPage from Scratch

1. Create pages/login.page.ts for the Banking Portal login page
2. Add locators: email input, password input, login button, error message
3. Add methods: goto(), login(email, password), getErrorText()
4. Write two tests: successful login and invalid credentials
5. Run with npx playwright test --headed and verify both pass

Exercise 2: BasePage and Inheritance

1. Create pages/base.page.ts with goto(path), waitForLoad(), getTitle()
2. Refactor LoginPage to extend BasePage
3. Create DashboardPage extending BasePage with expectLoaded(), getBalance()
4. Verify your existing tests still pass after refactoring
5. Add a new test that checks the dashboard balance after login

Exercise 3: Shopping Portal Page Objects

1. Create ProductListPage -- search input, product cards, category filter, methods: search(term), filterByCategory(name), getProductCount()
2. Create ProductDetailPage -- product name, price, add-to-cart button, quantity input, methods: addToCart(), setQuantity(n)
3. Create CartPage -- cart items, total price, checkout button, methods: getTotal(), removeItem(name)
4. Write an end-to-end test: search product, add to cart, verify cart total
5. Verify all locators work with --headed mode

Exercise 4: Fixtures Setup

1. Create fixtures/pages.fixture.ts extending test with all your page objects
2. Refactor all test files to import test from your fixture file
3. Replace manual new PageObject(page) with destructured fixture parameters
4. Verify all tests pass with fixtures
5. Create an authenticated fixture that logs in before each test

Exercise 5: Components and Fluent Navigation

1. Extract HeaderComponent from your dashboard page object
2. Make LoginPage.loginAs() return DashboardPage
3. Make DashboardPage.goToTransfer() return TransferPage
4. Write a fluent end-to-end test: loginPage.loginAs() -> dashboard.goToTransfer() -> transfer.transferMoney()
5. Verify the entire flow works with --headed mode