Skip to content

Repository files navigation

Solutions Demo - 01 — Solutions Demonstration Repository

License: MIT TypeScript Playwright Node.js

A Solutions Demonstration Repository for Manual and Automated Testing. This repo showcases QA engineering expertise through manual testing documentation and automated end-to-end testing built with Playwright and TypeScript.


📋 Table of Contents


🎯 Overview

This repository demonstrates a professional QA testing skillset including:

  • 🤖 Automated E2E Testing — Login flows, user journeys, cross-browser coverage, and negative test scenarios
  • 🔒 Security Testing — XSS injection test cases
  • Accessibility Testing — Automated a11y checks
  • Performance Testing — Page load and performance benchmarks
  • 🎨 Visual Regression Testing — Screenshot comparison tests
  • 🌍 Localization Testing — Multi-locale test coverage
  • 📤 File Upload Testing — File input and upload validation
  • 🔌 API Testing — GET, POST, auth, and negative API scenarios
  • 🧩 Unit Testing — Component-level tests with Jest

Who Is This For?

This project is intended for developers, team managers, and fellow QA engineers evaluating automated testing practices, Playwright proficiency, and TypeScript-based test architecture.


🛠️ Tech Stack

Technology Version Role
TypeScript 5.3+ Primary language
Playwright 1.40+ E2E test framework
Node.js 18+ Runtime
dotenv 16+ Environment configuration

🏗️ Project Structure

TestingDemo-01/
├── src/
│   ├── pages/                        # Page Object Models
│   │   ├── BasePage.ts               # Shared base page helpers
│   │   ├── HomePage.ts               # Home page interactions
│   │   └── LoginPage.ts              # Login page interactions
│   └── tests/
│       ├── e2e/                      # End-to-end test suites
│       │   ├── accessibility.spec.ts  # Accessibility checks
│       │   ├── cross-browser.spec.ts  # Cross-browser tests
│       │   ├── file-upload.spec.ts    # File upload tests
│       │   ├── home.spec.ts           # Home page tests
│       │   ├── localization.spec.ts   # Localization / i18n tests
│       │   ├── login-data-driven.spec.ts # Data-driven login tests
│       │   ├── login-logout.spec.ts   # Login & logout flow
│       │   ├── login-negative.spec.ts # Negative login scenarios
│       │   ├── login.spec.ts          # Core login tests
│       │   ├── performance.spec.ts    # Performance benchmarks
│       │   ├── security-xss.spec.ts   # XSS security tests
│       │   ├── user-flow.spec.ts      # End-to-end user journeys
│       │   └── visual-regression.spec.ts # Visual snapshot tests
│       ├── api/                      # API test suites
│       │   ├── api-auth.spec.ts       # Authentication API tests
│       │   ├── api-get.spec.ts        # GET request tests
│       │   ├── api-negative.spec.ts   # Negative API scenarios
│       │   └── api-post.spec.ts       # POST request tests
│       └── unit/
│           └── Button.test.tsx        # Unit tests (Jest)
│
├── docs/
│   └── testing.md                    # Testing strategy and documentation
│
├── Workflows/
│   └── Ci.yml                        # CI/CD workflow definition
│
├── playwright.config.ts              # Playwright configuration
├── tsconfig.json                     # TypeScript configuration
├── package.json                      # Dependencies and npm scripts
├── .env.example                      # Environment variable template
└── .gitignore

🚀 Getting Started

Prerequisites

  • Node.js 18+Download
  • Git
  • A text editor (VS Code recommended)

Quick Start

# 1. Clone the repository
git clone https://github.com/bg-playground/TestingDemo-01.git
cd TestingDemo-01

# 2. Install dependencies
npm install

# 3. Install Playwright browsers
npx playwright install --with-deps

# 4. Configure environment
cp .env.example .env
# Edit .env and set BASE_URL to your target application

# 5. Run tests
npx playwright test

Environment Variables

Variable Default Description
BASE_URL https://example.com Target application URL
API_BASE_URL https://api.example.com API base URL
TEST_TIMEOUT 30000 Test timeout in milliseconds
HEADLESS true Run browsers in headless mode
AZURE_STORAGE_ACCOUNT Azure storage account name
AZURE_STORAGE_KEY Azure storage key
AZURE_SUBSCRIPTION_ID Azure subscription ID
ENABLE_ALLURE_REPORT false Enable Allure reporting
SLACK_WEBHOOK_URL Slack webhook for notifications

🧪 Running Tests

Run All Tests

npm test
# or
npx playwright test

By Test Category

# E2E tests only
npm run test:e2e

# API tests only
npm run test:api

# Unit tests (Jest)
npm run test:unit

# Visual regression tests
npm run test:visual

# Accessibility tests
npm run test:a11y

# Performance tests
npm run test:performance

# Cross-browser (all browsers)
npm run test:crossbrowser

By Browser

npm run test:chrome    # Chromium / Desktop Chrome
npm run test:firefox   # Firefox
npm run test:webkit    # WebKit / Desktop Safari
npm run test:mobile    # Mobile Chrome (Pixel 5)

Debug & Interactive Modes

# Run with visible browser
npm run test:headed

# Interactive UI mode
npm run test:ui

# Step-through debugger
npm run test:debug

# Run a specific spec file
npx playwright test src/tests/e2e/login.spec.ts

# Run tests matching a keyword
npx playwright test --grep "login"

View HTML Report

npm run report
# or
npx playwright show-report

Test Configuration

Tests are configured in playwright.config.ts:

  • Browsers: Chromium, Firefox, WebKit, Mobile Chrome (Pixel 5), Mobile Safari (iPhone 12)
  • Reporters: HTML, JSON (test-results/results.json), JUnit (test-results/junit.xml), List
  • Artifacts: Screenshots on failure, video retained on failure, traces on first retry
  • CI mode: 2 retries, 1 worker, forbidOnly enabled

📖 Documentation

The docs/ directory contains testing strategy and documentation:

  • docs/testing.md — Test patterns, test categories, and instructions for extending the test suite

🔗 Related Projects

This repository is part of a broader QA testing portfolio in the bg-playground organization:

Repository Description
BGSTM Better Global Software Testing Methodology — a full-stack testing framework (FastAPI + React + PostgreSQL) implementing a 6-phase testing methodology
Microsoft-Test-Demo-01 Microsoft ecosystem testing demo with 90+ automated tests, accessibility, and visual regression testing
TestingDemo-02 OrangeHRM QA framework with 95 manual test cases, 31 automated tests, and an executive business case with ROI analysis
NAT (NeuroAgentTest) AI-powered API testing framework using multi-agent neural networks and OWASP security scanning

👤 Author

Brad


📄 License

This project is licensed under the MIT License — see the "license": "MIT" declaration in package.json.


Status: ✅ Active

About

A Skills Demonstration Repository For Manual And Automated Testing

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages