A comprehensive, production-ready web automation testing framework built with Jest, TypeScript, and Selenium WebDriver, following industry best practices and Page Object Model (POM) design pattern.
- β Complete End-to-End Testing - Full user registration flow automation (18 test steps)
- β TypeScript Support - Strong typing for better code quality and maintenance
- β Page Object Model - Scalable and maintainable test architecture
- β Modern Reporting - Multiple report formats with beautiful HTML dashboards
- β Screenshot Capture - Automatic screenshots on test failures
- β Cross-Browser Ready - Chrome optimized with extensible browser support
- β CI/CD Ready - Configured for continuous integration pipelines
- β Code Quality Tools - ESLint, Prettier for consistent code standards
- Jest
29.7.0- JavaScript testing framework - TypeScript
5.2.2- Static type checking - Selenium WebDriver
4.15.0- Browser automation - Node.js
18.20.5+- Runtime environment
- ChromeDriver
139.x- Chrome browser automation - Page Object Model - Design pattern for maintainable tests
- Custom Test Reporter - Enhanced logging and step tracking
- jest-html-reporters - HTML test reports
- jest-junit - JUnit XML reports
- Custom HTML Dashboard - Interactive test execution summary
- JSON Reports - Machine-readable test results
βββ src/
β βββ __tests__/ # Test files
β β βββ user-registration.test.ts
β βββ pages/ # Page Object Model classes
β β βββ home.page.ts
β β βββ login.page.ts
β β βββ signup.page.ts
β β βββ account-created.page.ts
β β βββ account-deleted.page.ts
β βββ utils/ # Utility classes
β β βββ base.page.ts # Base page class
β β βββ test-reporter.ts # Custom reporting
β β βββ test-results-processor.js
β βββ config/ # Configuration files
β β βββ webdriver.manager.ts
β β βββ jest.setup.ts
β βββ data/ # Test data
β β βββ test-data.ts
β βββ scripts/ # Utility scripts
β βββ quick-test.ts
βββ reports/ # Generated test reports
βββ jest.config.js # Jest configuration
βββ tsconfig.json # TypeScript configuration
βββ package.json # Dependencies and scripts
- Node.js 18.20.5 or higher
- Chrome Browser version 139.x
- Git for version control
-
Clone the repository
git clone https://github.com/adityadwic/jest-typescript-web-automation.git cd jest-typescript-web-automation -
Install dependencies
npm install
-
Verify ChromeDriver setup
npm run chromedriver:version
-
Run all tests
npm test -
Run specific test scenarios
npm run test:registration npm run test:additional
-
Generate test reports
npm run test:report
- Navigate to automation exercise website
- Verify home page visibility
- Click Signup/Login button
- Verify "New User Signup" text
- Enter name and email address
- Click Signup button
- Verify "ENTER ACCOUNT INFORMATION" text
- Fill account details (title, password, date of birth)
- Select newsletter checkbox
- Select special offers checkbox
- Fill address information
- Click "Create Account" button
- Verify "ACCOUNT CREATED!" message
- Click Continue button
- Verify user is logged in
- Click "Delete Account" button
- Verify "ACCOUNT DELETED!" message
- Complete cleanup and verification
- Home page elements validation
- Signup form presence verification
- Navigation flow testing
The framework generates multiple types of reports:
- Location:
./reports/test-summary.html - Features: Interactive dashboard, step-by-step execution details, success/failure metrics
- Real-time statistics and execution summary
- Location:
./reports/html-report/test-report.html - Features: Jest native reporting with custom styling
- Location:
./reports/junit/junit.xml - Features: CI/CD integration, pipeline compatibility
- Location:
./reports/detailed-test-report.json - Features: Machine-readable format, custom integrations
- Test timeout: 120 seconds
- TypeScript support with ts-jest
- Custom reporters configuration
- Coverage collection settings
- Chrome browser optimization for macOS
- Headless mode support
- Custom window sizing
- Security and performance flags
- Strict type checking
- ES2020 target compilation
- Source map generation
- Path mapping for clean imports
- Test Execution: ~17-20 seconds for complete flow
- Step Coverage: 100% execution rate
- Verification Rate: 51% of steps include assertions
- Browser Startup: ~2-3 seconds optimized loading
Centralized WebDriver management:
- Driver initialization
- Configuration settings
- Resource cleanup
Dynamic test data generation:
- Random user information
- Configurable test data
- Data validation
Ready for integration with:
- GitHub Actions
- Jenkins
- CircleCI
- Azure DevOps
Example GitHub Actions workflow:
name: Automated Tests
on: [push, pull_request]
jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: '18'
- run: npm install
- run: npm test- Create test file in
src/__tests__/ - Implement Page Objects in
src/pages/ - Add test data in
src/data/ - Configure reporting if needed
- Extend
BasePageclass - Define locators and methods
- Implement page-specific actions
- Add proper TypeScript typing
- Extend
TestReporterclass - Add custom logging methods
- Implement additional report formats
- Configure output destinations
# Test execution
npm test # Run all tests
npm run test:registration # Run main registration flow
npm run test:additional # Run additional scenarios
# Development
npm run build # Compile TypeScript
npm run lint # Run ESLint
npm run format # Format code with Prettier
# Reporting
npm run test:report # Generate all reports
npm run test:coverage # Generate coverage report-
ChromeDriver version mismatch
npm install chromedriver@latest
-
Test timeouts
- Increase timeout in
jest.config.js - Check network connectivity
- Verify website availability
- Increase timeout in
-
Element not found errors
- Update locators in page objects
- Add explicit waits
- Check for page loading issues
- Page Object Model for maintainable code structure
- Explicit waits instead of hard-coded delays
- Independent test cases with proper setup/cleanup
- Comprehensive error handling and logging
- Type safety with TypeScript
- Consistent code style with ESLint/Prettier
- Detailed reporting for debugging and metrics
- Modular architecture for easy extension
- Fork the repository
- Create feature branch (
git checkout -b feature/amazing-feature) - Commit changes (
git commit -m 'Add amazing feature') - Push to branch (
git push origin feature/amazing-feature) - Open Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Automation Exercise for providing the test website
- Jest community for the excellent testing framework
- Selenium team for robust browser automation tools
π Portfolio Project | β Give it a star if you found it helpful!
Built with β€οΈ by Aditya Dwi Cahyono - Demonstrating modern web automation testing practices
- Verify page loading completion
- Check for dynamic content loading
- Update locators if page structure changed
Enable verbose logging by setting environment variable:
DEBUG=true npm test- Console output with step-by-step progress
- Jest test results
- Coverage reports in
coverage/directory - Test execution logs
The framework is ready for CI/CD integration with:
- Headless browser support
- Exit codes for build status
- Configurable test environments
- Report generation