DemoSite Automation — Playwright

This project is a Playwright-based end-to-end automation suite for the Sauce Demo demo site. It is structured around the Page Object Model (POM) pattern so test cases stay readable, reusable, and easier to maintain.

The suite exercises the main user journeys for login, product browsing, cart validation, checkout information entry, checkout overview, and order completion.

Project structure

• tests/ — Playwright spec files and shared test support such as the fixture module.
• pages/ — Page Object Model classes that encapsulate page actions and assertions.
• test-data.ts — shared product and test constant values used by multiple specs.
• playwright.config.ts — Playwright configuration, parallel settings, and failure artifact capture.
• .env — environment-specific values such as the app base URL and test credentials.

Current test specs

1. tests/Add_Remove_From_Cart.spec.ts

A cart-focused flow that verifies product add/remove behavior and cart interactions.

2. tests/Buy_Products.spec.ts

A product purchase flow that captures product details, adds multiple products to the cart, verifies the cart contents, and completes the checkout journey.

3. tests/SauceDemo_StrdUsr.spec.ts

A standard-user login journey used to verify the basic login and landing-page experience.

Shared test support

• tests/fixtures.ts — lightweight Playwright fixture wrapper that supplies common page object instances to specs.
• test-data.ts — central repository for shared product action IDs and reusable constants.

Page Object Model files

• pages/LoginPage.ts — handles login navigation and standard user authentication.
• pages/HomePage.ts — verifies the home/products page title and core visible UI elements.
• pages/Products.ts — product discovery and cart interaction helpers such as add/remove actions and detail extraction.
• pages/YourCart.ts — cart page behaviors, item verification, and checkout button actions.
• pages/CheckOut.ts — checkout information page helpers for entering name and postal code values and continuing to the next step.
• pages/CheckOut_Overview.ts — checkout overview assertions, subtotal verification, and finish button actions.
• pages/CheckOut_Complete.ts — confirmation page helper for verifying the order completion screen.

Prerequisites

• Node.js 18+
• npm

Setup

1. Install project dependencies:

npm ci

2. Install Playwright browsers if needed:

npx playwright install

3. Create a local .env file in the project root with values similar to:

BASE_URL=https://www.saucedemo.com
SAUCE_DEMO_STANDARD_USER=<your-standard-user>
SAUCE_DEMO_PASS=<your-password>

Running tests

Run the full suite:

npx playwright test

Run a single spec in headed mode:

npx playwright test tests/Buy_Products.spec.ts --headed

Generate the HTML report:

npx playwright show-report

Run the current report workflow with the helper npm scripts:

npm run test
npm run allure:generate
npm run allure:open

Or run the full local Allure flow in one command:

npm run allure:run

Current local behavior:

• npm run allure:run executes the Playwright suite, generates the Allure HTML report, and opens it through a temporary local HTTP server.
• The earlier comparison/history workflow has been removed from the active flow because it was not producing a reliable trend view.
• The current setup is intentionally focused on a stable single-report workflow.

Parallel execution

• Local runs are configured to execute test files in parallel for faster feedback.
• CI runs are intentionally limited to a single worker for stability.
• You can override the worker count from the CLI, for example:

npx playwright test --workers=2

Notes on the implementation

• The tests are written using Playwright's test runner.
• Page interactions are intentionally centralized inside page object classes.
• Shared setup is now exposed through Playwright fixtures to reduce repeated object construction in specs.
• Shared product data is centralized in test-data.ts to avoid duplication across the suite.
• The project uses stable selectors such as data-test and id attributes where appropriate.
• Assertions are done with Playwright expect to make the suite resilient and readable.
• Failure screenshots and videos are enabled through the Playwright config for easier debugging.

Allure reporting

The Playwright configuration includes the Allure reporter in addition to the standard HTML reporter.

Current working local flow:

npm run allure:run

This command runs the regression suite, generates the current Allure report, and opens the report in the browser through a temporary local HTTP server.

If you want to run the steps manually instead:

npx playwright test
npx allure generate allure-results --clean -o allure-report
npx allure open allure-report

If you want to view the generated report through a plain local web server instead of the Allure launcher:

python -m http.server 8000

Then open http://localhost:8000 in your browser.

To view the downloaded allure-report artifact from GitHub Actions:

1. Download the allure-report artifact from the workflow run.
2. Extract the ZIP locally.
3. From the extracted folder, run:

python -m http.server 8000

4. Open http://localhost:8000 in your browser.

Do not open index.html directly from the downloaded artifact, because the Allure report loads its data through browser fetch requests and needs an HTTP server context.

Current note: the historical trend/comparison workflow is not part of the active local script path. The repository is currently optimized around a stable, single-report run rather than a history-based comparison view.

CI

The repository includes GitHub Actions support for running the Playwright suite in CI.

The workflow uploads these artifacts for each run:

• allure-report — generated Allure HTML report
• allure-results — raw Allure result files
• playwright-report — standard Playwright HTML report

Recommended repository secrets:

• SAUCE_DEMO_STANDARD_USER
• SAUCE_DEMO_PASS