LabsKraft-Ramendra/PlaywrightTS_ClaudeAgent

Login Page Test Framework

A comprehensive Playwright-based automated testing framework for login form testing with Page Object Model (POM) pattern and Excel-driven test data.

Project Overview

This project provides a complete test automation solution for testing login pages with:

• Page Object Model (POM) architecture for maintainable test code
• Excel-driven test data for parameterized testing
• 10 comprehensive test cases covering positive and negative scenarios
• HTML reports with screenshots on failure
• TypeScript for type-safe test development

Project Structure

├── src/
│   ├── pages/
│   │   ├── BasePage.ts           # Base class with common page methods
│   │   └── LoginPage.ts          # Login page POM with all page interactions
│   └── utils/
│       └── excel.ts              # Excel read/write utilities using exceljs
├── tests/
│   └── login_test.spec.ts        # 10 test cases with Excel data integration
├── scripts/
│   └── create_login_testdata.js  # Script to generate test_data.xlsx
├── test_data.xlsx                # Excel file with test credentials and scenarios
├── playwright.config.ts          # Playwright configuration with HTML reporter
├── package.json                  # Dependencies and npm scripts
└── README.md                      # This file

Installation

1. Clone the repository and install dependencies:

npm install
npx playwright install

2. Generate test data Excel file:

node scripts/create_login_testdata.js

Configuration

Test URL

• URL: https://testerbud.com/practice-login-form
• Test Credentials (from Excel):
  • Username: user@premiumbank.com
  • Password: Bank@123

Playwright Configuration

• Timeout: 30 seconds per test
• Retries: 1 on failure
• Reporters: HTML with screenshots on failure
• Screenshots: Captured on failure
• Video: Recorded on failure

Running Tests

Run all tests

npm test

Run specific test file

npm test tests/login_test.spec.ts

Run in debug mode

npm run test:debug

Run in UI mode (interactive)

npm run test:ui

View test report

npm run test:report

Test Cases (10 Total)

Test Data (Excel Format)

The test_data.xlsx file contains:

• Columns: Username, Password, TestCase, Expected
• 10 rows of test data corresponding to each test case
• Used by test.beforeAll() to populate test scenarios

Sample Test Data:

Username                  | Password      | TestCase               | Expected
user@premiumbank.com      | Bank@123      | Valid Login            | Success
invaliduser               | wrongpassword | Invalid Credentials    | Failure
(empty)                   | Bank@123      | Empty Username         | Failure
user@premiumbank.com      | (empty)       | Empty Password         | Failure
... and 6 more rows

Page Object Model (LoginPage)

The LoginPage class provides:

• Locators: Pre-defined element selectors
• Actions: User interaction methods (login, enterUsername, etc.)
• Assertions: Methods to verify page state (isErrorMessageVisible, etc.)

Key Methods:

navigateTo(url)           // Navigate to login page
login(username, password) // Perform login
enterUsername(username)   // Fill username field
enterPassword(password)   // Fill password field
clickLoginButton()        // Click sign-in button
clearUsername()           // Clear username field
clearPassword()           // Clear password field
isErrorMessageVisible()   // Check for error message
isSuccessMessageVisible() // Check for success message

Test Reports

After running tests:

1. HTML report generated in playwright-report/
2. Screenshots captured on test failure in test-results/
3. View report:

npm run test:report

CI/CD Integration

To integrate with CI/CD pipelines:

npm install
npm test

Tests will:

• Fail with exit code 1 on test failure
• Generate HTML report in playwright-report/
• Upload artifacts for analysis

Best Practices Used

• ✅ Page Object Model: Separates UI elements from test logic
• ✅ Excel-Driven Testing: Parameterized test data management
• ✅ Type Safety: Full TypeScript support
• ✅ Clear Naming: Descriptive test case names
• ✅ Error Handling: Graceful fallbacks for missing data
• ✅ Visual Debugging: Screenshots and HTML reports on failure

Dependencies

• playwright@^1.43.0 - Browser automation
• @playwright/test@^1.43.0 - Test framework
• exceljs@^4.3.0 - Excel file handling
• typescript@^5.5.0 - Type safety
• prettier@^2.8.8 - Code formatting

Troubleshooting

Tests timeout

• Increase timeout in playwright.config.ts
• Check internet connection to testerbud.com

Excel file not found

• Run: node scripts/create_login_testdata.js
• Verify test_data.xlsx exists in project root

Locators not working

• The framework uses specific selectors for the testerbud login form:
  • Username: #formBasicEmail
  • Password: #formBasicPassword
  • Login Button: button[type="submit"]:has-text("Sign in")

Future Enhancements

• Add cross-browser testing (Firefox, Safari)
• Implement visual regression testing
• Add performance metrics collection
• Extend to other form types (registration, password reset)
• Add API-level testing for backend validation

Support & Contribution

For issues or improvements, please create an issue or pull request in the repository.