HomeBuddy HVAC Form - Playwright E2E Tests

Automated UI tests for the HomeBuddy HVAC stepper form using Playwright with TypeScript.

Test Coverage

The test suite covers the following scenarios:

1. ZIP Code Validation (Landing Page)

• Verifies landing page displays correctly
• Tests ZIP code input and form initialization

2. Step Navigation (Radio Button Steps)

• Tests project type selection (Step 1)
• Verifies multiple equipment checkbox selection (Step 2)
• Tests equipment age selection (Step 3)
• Tests property type selection (Step 4)

3. Form Input Validation

• Validates name and email fields (Step 7)
• Validates phone number input (Step 8)

4. End-to-End Flow

• Complete form submission from ZIP code to Thank You page
• Verifies all steps can be completed successfully

Project Structure

homebuddy/
├── page-objects/
│   ├── commonPage.ts      # Common page actions and assertions
│   ├── hvacFormPage.ts    # HVAC form specific locators and actions
│   └── pageManager.ts     # Page Object manager with navigation helpers
├── test-data/
│   └── testdata.json      # Test data including inputs and validation messages
├── tests/
│   └── hvac.spec.ts       # Main test file with 7+ test cases
├── playwright.config.ts   # Playwright configuration
├── package.json           # Dependencies and scripts
├── tsconfig.json         # TypeScript configuration
└── README.md             # This file

Prerequisites

• Node.js 18+ installed
• npm or yarn package manager

Installation

# Install dependencies
npm install

# Install Playwright browsers
npx playwright install

Running Tests

# Run all tests
npm test

# Run tests in headed mode (see browser)
npm run test:headed

# Run tests with UI mode
npm run test:ui

# Run tests in debug mode
npm run test:debug

# Run tests only on Chromium
npm run test:chromium

# Open test report
npm run report

Test URL

The tests run against: https://hb-autotests.stage.sirenltd.dev/hvac

Test Scenario

The tests follow the user scenario:

1. Enter ZIP code (10001)
2. Answer questions on the form
3. Enter first and last name
4. Enter email
5. Enter phone number
6. Get to the "Thank You" page

Configuration

The Playwright configuration includes:

• Base URL set to the test environment
• Screenshots on failure
• Video recording on failure
• Trace files for debugging
• HTML reporter for test results

Test Data

Test data is stored in test-data/testdata.json and includes:

• Valid and invalid inputs
• Radio button options for each step
• Checkbox options for equipment selection
• Validation messages
• URLs for the application