ParaBank Playwright Test Framework

A comprehensive test automation framework for ParaBank using Playwright and TypeScript, implementing the Page Object Model (POM) pattern for maintainability and reusability.

Project Structure

parabankMCP/
├── page-objects/
│   ├── LoginPage.ts
│   ├── HomePage.ts
│   ├── RegisterPage.ts
│   ├── AccountPage.ts
│   ├── TransferFundsPage.ts
│   └── BillPayPage.ts
├── tests/
│   ├── navigation.spec.ts          # Scenario 1 & 2: Basic Navigation & Homepage Content
│   ├── login.spec.ts               # Scenario 3: Login Functionality
│   ├── registration.spec.ts        # Scenario 4: Registration Flow
│   ├── accountServices.spec.ts     # Scenario 5: Account Services Navigation
│   ├── transfer.spec.ts            # Scenario 6: Transaction Flow (Transfer Funds)
│   ├── billpay.spec.ts             # Scenario 7: Bill Payment Process
│   ├── logout.spec.ts              # Scenario 8: Logout Functionality
│   └── accessibility.spec.ts       # Scenario 9: Accessibility Testing
├── utils/
├── playwright.config.ts
├── tsconfig.json
├── package.json
└── README.md

Installation

Prerequisites: Node.js (v16+) and npm
Install dependencies:
```
npm install
```
Install Playwright browsers (if not already installed):
```
npx playwright install
```

Running Tests

Run all tests

npm test

Run tests in UI mode (recommended for development)

npm run test:ui

Run tests in headed mode (see browser)

npm run test:headed

Run tests in debug mode

npm run test:debug

Run specific test file

npx playwright test tests/login.spec.ts

Run tests matching a pattern

npx playwright test --grep "Login Functionality"

Test Data

Login Credentials

Valid Username: john
Valid Password: demo
Invalid Username: invaliduser
Invalid Password: wrongpassword

Registration Data

First Name: Test
Last Name: User
Address: 123 Test St
City: Testville
State: CA
Zip Code: 12345
Phone: 555-123-4567
SSN: 123-45-6789
Username: testuser_[timestamp] (automatically generated for uniqueness)
Password: Password123

Transfer Data

Amount: $100.00
From Account: First available account
To Account: Second available account

Bill Pay Data

Payee Name: Electric Company
Address: 456 Power Dr
City: Energyville
State: NY
Zip Code: 54321
Phone: 555-987-6543
Account: 12345
Amount: $75.00

Test Scenarios

Scenario 1: Basic Navigation

Tests successful navigation to ParaBank homepage
Verifies page loads with status 200
Checks page title contains "ParaBank"

Scenario 2: Homepage Content Verification

Verifies login form presence
Checks homepage banner visibility
Verifies navigation menu is present

Scenario 3: Login Functionality

Tests invalid login credentials display error message
Tests valid login (john/demo) succeeds
Verifies account information displays after successful login

Scenario 4: Registration Flow

Tests registration with valid information
Verifies error message for existing username
Tests clicking Register link from homepage

Scenario 5: Account Services Navigation

Tests navigation to Open New Account
Tests navigation to Account Overview
Tests navigation to Transfer Funds
Tests navigation to Bill Pay
Tests navigation to Find Transactions
Tests navigation to Update Contact Info

Scenario 6: Transaction Flow

Tests completing fund transfer between accounts
Verifies success message appears
Verifies updated balances are displayed

Scenario 7: Bill Payment Process

Tests completing bill payment process
Verifies payee information is filled correctly
Tests payment submission and confirmation

Scenario 8: Logout Functionality

Tests successful logout and redirection
Verifies access to secure pages is restricted after logout
Checks logout link appears when logged in

Scenario 9: Accessibility Testing

Captures accessibility snapshot of homepage
Verifies ARIA landmarks (header, main, navigation, footer)
Checks images have alt text
Verifies proper heading hierarchy (H1, H2, etc.)
Tests keyboard navigation through login form
Tests keyboard navigation through registration form
Verifies form inputs have associated labels
Checks interactive elements have proper focus states
Verifies color contrast for text elements

Page Object Model (POM) Pattern

Each page has a corresponding page object class that encapsulates:

Page selectors
User interactions (methods)
Verification methods

Example: LoginPage.ts

export class LoginPage {
  constructor(private page: Page) {}

  async goto() {
    await this.page.goto('/');
  }

  async login(username: string, password: string) {
    await this.fillUsername(username);
    await this.fillPassword(password);
    await this.clickLogin();
  }

  // Additional methods for reusability
}

Usage in Tests

const loginPage = new LoginPage(page);
await loginPage.goto();
await loginPage.login('john', 'demo');

Configuration

playwright.config.ts

Base URL: https://parabank.parasoft.com
Browser: Chromium
Screenshots: Only on failure
Videos: Retained on failure
Traces: On first retry
Reporter: HTML

Output Files

HTML Report: playwright-report/index.html
Test Results: Displayed in terminal

Best Practices Implemented

Page Object Model: Encapsulates page structure and actions
Reusable Components: Login page object used across tests
Data-Driven Testing: Test data defined separately
Error Handling: Graceful handling of variations in page structure
Waits: Explicit waits for elements and navigation
Assertions: Clear and specific assertions
Test Organization: Tests grouped by scenario
Configuration: Centralized configuration in playwright.config.ts

Troubleshooting

Tests fail to find elements

The ParaBank application selectors might differ from expectations
Use Playwright Inspector to identify correct selectors:
```
npx playwright codegen https://parabank.parasoft.com
```

Browser installation issues

npx playwright install --with-deps

Clear cache and reinstall

rm -rf node_modules package-lock.json
npm install

Dependencies

@playwright/test: Playwright testing framework
playwright: Playwright browser automation
typescript: TypeScript support

Additional Resources

Notes

Tests use realistic wait times to allow page loads
Error messages and selectors may vary based on application updates
Some tests include fallback selectors to handle variations
Accessibility tests check for compliance with WCAG standards
Tests are designed to be maintainable and scalable

Created: January 2026 Author: Test Framework Implementation