Playwright and JavaScript Test Automation Framework

Features of this framework

Getting started

Pre-requisites

Setup

# Clone and install
git clone <repo-url>
cd playwright-javascript
npm install

# Verify environment
npm run sauce:check

# Run tests
npm test                    # Headless, all reporters
npm run test:ci              # For CI pipelines
npm run e2e                 # E2E config variant
HEADED=true npm test        # Interactive (headed) mode

# Run by environment
npm run test:dev
npm run test:qa
npm run test:uat

npm run e2e:dev
npm run e2e:qa
npm run e2e:uat

How to write Tests

Example Test

const { test, expect } = require("@playwright/test");
const { HomePage } = require("./page-objects/HomePage");

test.describe("Home Page", () => {
  test.beforeEach(async ({ page }) => {
    const home = new HomePage(page);
    await home.navigate();
  });

  test("should display home page title", async ({ page }) => {
    const home = new HomePage(page);
    await expect(page).toHaveTitle("Acme Store");
  });
});

Running Tests

Local Development

npm test                     # Run all tests headless
HEADED=true npm test         # Headed mode (watch UI)
npm run headedTest           # Alias for headed mode
npx playwright test --debug  # Debug mode with inspector

CI/CD Pipelines

npm run test:ci              # Optimized for CI: headless=true, artifacts=on-failure
CI=true npm test             # Sets CI env var for config conditions

Specific Test Files

npx playwright test e2e-tests/home.spec.js
npx playwright test e2e-tests/cart.spec.js

Reporter Options

npm run test-list-reporter   # Minimal output
npm run test-line-reporter   # Single-line per test
npm run test-html-reporter   # Full HTML report
npm run e2e-commandline-reporter  # Multiple reporters + Allure

Reports and Artifacts

HTML Report

npx playwright show-report              # Open latest HTML report
# Or navigate to: ./playwright-report/index.html

Allure Report

npm run allure-report        # Generate and open Allure report
npx allure generate ./allure-results && allure open  # Manual

Screenshots & Traces

CI/CD Execution

Environment Variables

Environment Files

Example GitHub Actions

- name: Run tests
  run: npm run test:ci
  env:
    CI: true

- name: Upload test results
  if: failure()
  uses: actions/upload-artifact@v3
  with:
    name: test-results
    path: test-results/

Cloud Execution: SauceLabs

Setup

Run on SauceLabs

saucectl run -c saucelabs.config.js

Best Practices

Project Structure

playwright-javascript/
├── e2e-tests/
│   ├── home.spec.js           # Home page test suite
│   ├── search.spec.js         # Search/navigation test suite
│   ├── cart.spec.js           # Cart/add-to-cart test suite
│   └── page-objects/
│       ├── HomePage.js
│       ├── SearchPage.js
│       └── CartPage.js
├── playwright.config.js       # Main Playwright config
├── e2e.config.js              # E2E-specific config variant
├── saucelabs.config.js        # Cloud execution config
├── my-awesome-reporter.js     # Custom test reporter
├── package.json
├── README.md
└── test-results/              # Test artifacts (gitignored)

Support & Contributions