Professional API Testing with Cypress using Page Object Model (POM) + HTML Test Reporting

This project demonstrates enterprise-grade API automation testing for the Automation Exercise website using Cypress with modern best practices including Page Object Model design pattern, comprehensive test reporting, and CI/CD integration.

This repository contains production-ready API automation tests that validate the Automation Exercise APIs using Cypress. The implementation follows industry standards with clean architecture, reusable components, comprehensive test coverage, and professional HTML test reporting.

• 🏗️ Page Object Model (POM) - Clean separation of test logic and API interactions
• � HTML Test Reports - Interactive Mochawesome reports with charts and metrics
• �🛠️ Utility Functions - Reusable validation and helper methods
• 🎨 Custom Commands - Enhanced Cypress functionality for API testing
• � Comprehensive Testing - Response validation, performance testing, error handling
• 🔄 Integration Testing - Cross-API data consistency validation
• 📝 Test Data Management - Centralized test data generation and management
• 🚀 Performance Testing - Response time validation and optimization
• 🛡️ Error Handling - Comprehensive error scenario testing
• 📋 CI/CD Ready - GitHub Actions workflow included
• 🎯 100% Pass Rate - All 8 tests consistently passing

cypress/ ├── e2e/ │ └── API-AutomationExerice/ │ ├── simple-api-tests.cy.js ✅ Main working tests (8/8 passing) │ ├── products-api.cy.js 📦 Products API tests with POM │ ├── brands-api.cy.js 🏷️ Brands API tests with POM │ └── complete-api-suite.cy.js 🔄 Integration tests ├── support/ │ ├── commands.js 🛠️ Custom Cypress commands │ ├── e2e.js ⚙️ Global test configuration │ ├── pages/ │ │ └── AutomationExerciseAPI.js 📄 Page Object Model │ └── utils/ │ ├── APIUtils.js 🔧 API utility functions │ └── TestDataFactory.js 🏭 Test data generator ├── reports/ 📊 Test reports (auto-generated) │ ├── html/ │ │ └── merged-report.html 🎯 Interactive HTML report │ └── *.json 📄 Raw test data docs/ ├── REPORTING.md 📋 Reporting guide └── TEST_REPORT.md 📊 Latest test results 

│ └── *.html 📋 Individual reports └── support/ ├── pages/ │ └── AutomationExerciseAPI.js 🏗️ Page Object Model ├── utils/ │ ├── APIUtils.js 🛠️ Utility functions │ └── TestDataFactory.js 📊 Test data management ├── commands.js 🎯 Custom commands └── e2e.js ⚙️ Support configuration

 ## 🚀 Quick Start ### Prerequisites - [Node.js](https://nodejs.org/) (v14 or higher) - [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/) ### Installation 1. **Clone the repository:** ```bash git clone https://github.com/adityadwic/Cypress-API-Automation.git cd Cypress-API-Automation 

2. Install dependencies:

   npm install

# 🎯 Generate tests with HTML reports (RECOMMENDED) npm run test:report # Run all tests npm test # Run main working tests npm run test:simple # Run specific API tests npm run test:products # Products API only npm run test:brands # Brands API only npm run test:complete # Complete test suite npm run test:all # All API tests # Run tests in different modes npm run test:headed # Headed mode npm run test:chrome # Chrome browser npm run test:firefox # Firefox browser

# Generate and view HTML reports npm run test:report # Run tests + generate report npm run generate:report # Generate report from existing data npm run report:open # Open HTML report in browser npm run clean:reports # Clean old reports

# Open Cypress Test Runner npm run test:open

✅ 8/8 Tests Passing (100% Success Rate)

The project generates interactive HTML reports using Mochawesome:

Features:

• 📊 Visual charts and graphs
• 🎯 Pass/Fail statistics
• ⏱️ Performance metrics
• 🔍 Detailed test results
• 💻 Browser-friendly viewing

Report Location: cypress/reports/html/merged-report.html

Quick Access:

npm run test:report # Generate new report npm run report:open # View latest report

✅ Successful Tests:

1. Products API - GET request validation
2. Products API - POST method error handling
3. Brands API - GET request validation
4. Brands API - Expected brands verification
5. Brands API - POST method error handling
6. Performance testing for both APIs
7. Data consistency between APIs
8. Error handling for invalid endpoints

import AutomationExerciseAPI from '../../support/pages/AutomationExerciseAPI.js'; const apiPage = new AutomationExerciseAPI(); // Get all products apiPage.getAllProducts().then((response) => { // Test logic here }); // Get all brands apiPage.getAllBrands().then((response) => { // Test logic here });

import APIUtils from '../../support/utils/APIUtils.js'; // Validate status code APIUtils.validateStatusCode(response, 200); // Validate response structure APIUtils.validateProductsListStructure(response); // Log response details APIUtils.logResponseDetails(response, 'Test Name');

// Enhanced API request with logging cy.apiRequest('GET', 'https://automationexercise.com/api/productsList'); // Validate API response cy.validateApiResponse(response, 200); // Automation Exercise specific API calls cy.automationExerciseApi('/productsList');

• ✅ Successful HTTP requests (GET)
• ✅ HTTP method validation (POST, PUT, DELETE not allowed)
• ✅ Response structure validation
• ✅ Data type validation
• ✅ Response code validation

• ✅ Response time validation (< 5 seconds)
• ✅ Concurrent request handling
• ✅ Load testing capabilities

• ✅ Invalid HTTP methods
• ✅ Invalid endpoints
• ✅ Malformed requests
• ✅ Network error scenarios

• ✅ Cross-API data consistency
• ✅ Brand-Product relationship validation
• ✅ Data integrity checks

{ "scripts": { "test": "cypress run", "test:open": "cypress open", "test:simple": "cypress run --spec 'cypress/e2e/API-AutomationExerice/simple-api-tests.cy.js'", "test:products": "cypress run --spec 'cypress/e2e/API-AutomationExerice/products-api.cy.js'", "test:brands": "cypress run --spec 'cypress/e2e/API-AutomationExerice/brands-api.cy.js'", "test:complete": "cypress run --spec 'cypress/e2e/API-AutomationExerice/complete-api-suite.cy.js'", "test:all": "cypress run --spec 'cypress/e2e/API-AutomationExerice/*.cy.js'", "test:headed": "cypress run --headed", "test:chrome": "cypress run --browser chrome", "test:firefox": "cypress run --browser firefox", "test:report": "npm run test:simple && npm run generate:report", "generate:report": "mochawesome-merge cypress/reports/*.json > cypress/reports/merged-report.json && marge cypress/reports/merged-report.json --reportDir cypress/reports/html", "clean:reports": "rm -rf cypress/reports", "report:open": "open cypress/reports/html/merged-report.html" } }

module.exports = defineConfig({ e2e: { baseUrl: 'https://automationexercise.com', requestTimeout: 10000, responseTimeout: 10000, retries: { runMode: 2, openMode: 1 }, env: { apiBaseUrl: 'https://automationexercise.com/api' } }, reporter: 'mochawesome', reporterOptions: { reportDir: 'cypress/reports', overwrite: false, html: true, json: true, timestamp: 'mmddyyyy_HHMMss' } });

This project is production-ready for CI/CD integration with automated test reporting.

name: 🚀 API Automation Tests on: push: branches: [ master, main ] pull_request: branches: [ master, main ] schedule: - cron: '0 6 * * *' # Daily at 6 AM jobs: test: runs-on: ubuntu-latest strategy: matrix: node-version: [18.x, 20.x] steps: - name: 📥 Checkout Repository uses: actions/checkout@v4 - name: 🔧 Setup Node.js ${{ matrix.node-version }} uses: actions/setup-node@v4 with: node-version: ${{ matrix.node-version }} - name: 📦 Install Dependencies run: npm ci - name: 🧪 Run API Tests run: npm run test:report - name: 📊 Upload Test Reports uses: actions/upload-artifact@v3 if: always() with: name: test-reports-node-${{ matrix.node-version }} path: cypress/reports/html/ retention-days: 30 - name: 📈 Publish Test Summary if: always() run: |  echo "## 🧪 Test Results Summary" >> $GITHUB_STEP_SUMMARY  echo "- **Node Version:** ${{ matrix.node-version }}" >> $GITHUB_STEP_SUMMARY  echo "- **Tests Status:** $(if [ $? -eq 0 ]; then echo '✅ PASSED'; else echo '❌ FAILED'; fi)" >> $GITHUB_STEP_SUMMARY

# Simulate CI environment npm ci # Clean install npm run clean:reports # Clean previous reports npm run test:report # Generate fresh reports npm run report:open # View results

• 📄 TEST_REPORT.md - Comprehensive test results and analysis
• 📊 REPORTING.md - Complete guide to test reporting features
• 🏗️ cypress/support/ - Page Object Model and utility documentation
• 📋 cypress/reports/html/ - Interactive HTML test reports

1. Fork the repository
2. Create a feature branch

   git checkout -b feature/amazing-feature

3. Make your changes
4. Run tests and generate reports

   npm run test:report

5. Commit your changes

   git commit -m 'Add some amazing feature'

6. Push to the branch

   git push origin feature/amazing-feature

7. Open a Pull Request

• ✅ Follow Page Object Model pattern
• ✅ Add comprehensive test coverage
• ✅ Include proper error handling
• ✅ Update documentation
• ✅ Ensure all tests pass

Aditya Dwi Cahyono

• 🐙 GitHub: @adityadwic
• 📁 Repository: Cypress-API-Automation
• 🌐 Website: automationexercise.com

• 📖 Cypress Documentation
• 🎯 Automation Exercise Website
• 🌐 Cypress API Testing Guide
• 📊 Mochawesome Documentation
• 🏗️ Page Object Model Best Practices

# Clone and setup git clone https://github.com/adityadwic/Cypress-API-Automation.git cd Cypress-API-Automation npm install # Run tests with reports npm run test:report # Open HTML report npm run report:open # View in Cypress UI npm run test:open

⭐ Star this repository if you find it helpful!
🐛 Found an issue? Create an issue
💡 Have suggestions? Start a discussion