This is an automated end-to-end testing suite built with Playwright and TypeScript using the Page Object Model (POM) pattern. This repository validates critical e-commerce workflows, including authentication, inventory management, cart operations, checkout, order totals, and accessibility checks on the Swag Labs (Saucedemo) application.
- Testing Framework: Playwright Test
- Accessibility: axe-core
- Language: TypeScript
- Linter: ESLint
- CI/CD: GitHub Actions
This test suite covers the main user flows across the application lifecycle:
- Authentication (
/): Validates successful and unsuccessful login attempts, locked-user behavior, required fields, unusual credential inputs, boundary inputs, and script-like input handling. - Inventory (
/inventory.html): Exercises product selection, menu interactions, and application state resets. - Shopping Cart (
/cart.html): Validates cart contents, product removal, empty-cart behavior, and the checkout entry point. - Checkout Workflows (
/checkout-step-one.html&/checkout-step-two.html):- Form validation and required field warnings.
- Precise verification of subtotal, tax, and order totals.
- Order Completion (
/checkout-complete.html): Verifies order confirmation and navigation back to the inventory page.
| Component | Responsibility |
|---|---|
| Page Objects | Encapsulate page locators and reusable user actions |
| Page Manager | Provides centralized access to the page objects |
| JSON test data | Separates credential and checkout variations from test logic |
| Authentication setup | Creates reusable browser storage state for authenticated tests |
| Accessibility fixture | Configures reusable Axe checks for WCAG 2.1 AA |
| Playwright projects | Separate logged-out and authenticated tests across Chromium and Firefox |
Authenticated projects depend on a setup project that logs in once and saves the storage state. Login tests use an empty storage state so authentication behavior is tested independently.
The suite uses Playwright annotations according to the reason a scenario cannot pass normally:
test.fail()identifies a reproducible known failure. The test still executes, collects evidence, and reports an unexpected pass if the behavior is fixed.test.skip()identifies a scenario that is not currently enforceable because the expected behavior is not documented.test.fixme()is reserved for tests that cannot execute because the test implementation or supporting framework requires repair. No current tests use this annotation.
| Area | Finding | Treatment |
|---|---|---|
| Login accessibility | Automated analysis identifies accessibility best-practice violations | test.fail() |
| Inventory reset | Reset App State clears the cart badge but does not update the product buttons in the current DOM | test.fail() |
| Cart accessibility | Automated analysis identifies semantic HTML violations | test.fail() |
| Area | Scenarios | Reason |
|---|---|---|
| Empty-cart checkout | Preventing checkout when the cart contains no products | Expected behavior is not documented |
| Checkout field validation | Numeric, special-character, and field-length restrictions | Accepted formats and limits are not documented |
| Direct checkout navigation | Redirecting users who access later checkout pages directly | Navigation restrictions are not documented |
These scenarios are preserved as potential requirements and are not presented as confirmed application defects.
GitHub Actions runs the workflow on every push and pull request targeting main.
The pipeline:
- Installs dependencies using
npm ci. - Runs strict TypeScript type checking.
- Runs ESLint.
- Executes the tests in separate Chromium and Firefox matrix jobs.
- Uploads a browser-specific HTML report for 30 days, including available failure diagnostics.
In CI, failed tests are retried twice with one worker for more stable execution. Playwright retains a trace on the first retry, screenshots on failure, and videos for failed tests.
Ensure you have the following installed:
- Clone this repository:
git clone https://github.com/danielbxs/saucedemo-playwright-framework.git
cd saucedemo-playwright-framework- Install dependencies
npm install- Install Playwright browsers
npx playwright installnpm run testnpm run test-uinpm run test-loginnpm run test-inventorynpm run test-cartnpm run test-checkoutnpm run report