Build a Page Object framework from scratch
App: SwagShop, a practice e-commerce demo store (Saucedemo-style). Login: standard_user, locked_out_user, problem_user, performance_glitch_user / secret_sauce.
Interview scenario
"Senior interviewers rarely ask for one test. They hand you an empty folder and say: set up a small framework. Page objects for login and inventory, a fixture that logs in, and tests that read like English. Build that for SwagShop."
Acceptance criteria
- pages/login.page.ts exports a LoginPage class with goto() and login(username, password).
- pages/inventory.page.ts exports an InventoryPage class with addToCart(productName), cartCount(), sortBy(value) and prices().
- fixtures.ts extends test with an inventory fixture that logs in as standard_user and hands the test an InventoryPage.
- tests/checkout.spec.ts has two tests that use only the fixture and page objects, no page.getBy... or page.locator in the spec: the badge shows 2 after adding two items, and prices ascend after sorting low to high.
Runs in your browser with a Playwright-compatible API: locators, auto-waiting actions, expect, imports between files and test.extend fixtures. Saved in this browser. Ctrl/⌘ + Enter runs.
Test output
Press Run tests to watch your code drive the practice app in the preview.
Reference solution
Try it yourself first. Then compare with the Playwright solution and the same framework in Selenium Java with TestNG.