🚀 Flipkart E-commerce Automation Testing Framework

📋 Project Overview

A production-ready automation testing framework for Flipkart.com built with Playwright and TypeScript. This project demonstrates comprehensive e-commerce workflow automation using the Page Object Model (POM) design pattern.

✨ Key Features

✅ Page Object Model Pattern - Clean separation of concerns
✅ TypeScript - Full type safety with strict mode
✅ Playwright - Cross-browser automation framework
✅ HTML Reports - Detailed test reports with screenshots
✅ Exact Locators - Pre-tested XPath selectors (75+)
✅ Custom Assertions - 15+ domain-specific validations
✅ Config Management - Environment-based configuration
✅ Headless Mode - Windows-compatible execution

🎯 Test Workflow

Main Test (TC-001) Covers:

Search 5 Products from different categories:
- iPhone 17 Pro Max (Electronics)
- Women Kurtas (Clothing)
- Lakme Lipstick (Beauty)
- Logitech G29 (Gaming)
- MamyPoko Pants-XL (Baby Care)
Add to Cart - First product from each search
Cart Operations:
- Compare products
- Remove last 2 items
- Verify item count
Extract Price Details with assertions:
- Item count
- Subtotal
- Discount applied
- Platform fee
- Shipping charges
- Total amount
- Delivery address
Place Order - Complete checkout flow

📁 Project Structure

Ecomerce Flip Automation/
│
├── src/
│   ├── pages/                          # Page Object Classes
│   │   ├── BasePage.ts                 # Base class (common methods)
│   │   ├── HomePage.ts                 # Search & navigation
│   │   ├── LoginPage.ts                # Authentication
│   │   ├── SearchResultsPage.ts        # Search results
│   │   ├── ProductDetailsPage.ts       # Product details
│   │   ├── CartPage.ts                 # Shopping cart (CRITICAL)
│   │   ├── CheckoutPage.ts             # Order confirmation
│   │   └── index.ts                    # Clean exports
│   │
│   ├── utils/                          # Utility Functions
│   │   ├── helper.ts                   # 20+ helper functions
│   │   └── assertions.ts               # 15+ custom assertions
│   │
│   └── config/                         # Configuration
│       └── config.ts                   # Environment settings
│
├── tests/                              # Test Specifications
│   ├── flipkart.spec.ts                # TC-001 (Main test)
│   └── flipkart-advanced.spec.ts       # TC-002 to TC-006
│
├── test-data/                          # Test Data
│   └── testData.ts                     # Products, credentials
│
├── playwright-report/                  # Generated HTML reports
├── test-results/                       # JSON test results
├── screenshots/                        # Test failure screenshots
├── videos/                             # Test failure videos
│
├── Configuration Files
│   ├── package.json                    # NPM dependencies
│   ├── playwright.config.ts            # Playwright settings
│   ├── tsconfig.json                   # TypeScript config
│   ├── .env.example                    # Environment template
│   └── .gitignore                      # Git ignore rules
│
└── README.md                           # This file

🔧 Prerequisites

System Requirements

OS: Windows 10/11
Node.js: v16.0.0 or higher
npm: v7.0.0 or higher

Verify Installation

# Check Node.js version
node --version    # Should be v16+

# Check npm version
npm --version     # Should be v7+

📦 Setup Instructions

Step 1: Install Dependencies

# Navigate to project directory
cd "C:\Users\user\Ecomerce Flip Automation"

# Install all packages
npm install

Step 2: Install Playwright Browsers

# Browsers are auto-installed with npm install
# But you can explicitly install:
npx playwright install chromium

Step 3: Create Environment File (Optional)

# Copy example to .env
copy .env.example .env

# Edit .env with your settings if needed

▶️ Running Tests

Run Main Test (TC-001) - Recommended First

npm run test:main
# or
npm run test:headless

Run All Tests

npm run test
# or for all with headless
npm run test:headless

Run Advanced Tests (TC-002 to TC-006)

npm run test:advanced

Debug Mode (Interactive)

npm run test:debug
# Playwright Inspector opens, pause and step through code

UI Mode (Interactive Dashboard)

npm run test:ui
# Interactive test runner with real-time feedback

View HTML Report

npm run test:report
# Opens HTML report in default browser

📊 Test Commands Summary

Command	Description	Time
`npm run test`	Run all tests	15-20 min
`npm run test:main`	Run main test only	4-6 min
`npm run test:advanced`	Run advanced tests	10-15 min
`npm run test:headless`	Run headless (fast)	15-20 min
`npm run test:headed`	Run with browser visible	15-20 min
`npm run test:debug`	Debug with inspector	10-15 min
`npm run test:ui`	Interactive mode	Manual
`npm run test:report`	View HTML report	Instant

🔐 Authentication

Dummy Credentials

The project uses dummy test credentials for login:

Phone: 9876543210
OTP: 123456
Pincode: 560001 (Bangalore)

Login Implementation

Located in src/pages/LoginPage.ts
OTP login currently commented (requires real OTP)
Can be enabled for actual user testing

🏗️ Design Pattern: Page Object Model

Benefits

✅ Easy maintenance (centralized locators)
✅ Code reusability across tests
✅ Clear separation of concerns
✅ Better readability

Structure

// Page Object Class
class HomePage extends BasePage {
  private selectors = {
    searchInput: '//input[@placeholder="Search..."]',
    searchButton: '//button[@type="submit"]'
  };

  async searchProduct(name: string) {
    await this.fillText(this.selectors.searchInput, name);
    await this.clickElement(this.selectors.searchButton);
  }
}

// Usage in Test
const homePage = new HomePage(page);
await homePage.searchProduct('iPhone');

🔍 Locators Reference

Total Locators: 75+

All locators are exact, unique, and pre-tested for Flipkart.com

Page	Count	Key Locators
HomePage	8	Search input, cart icon, login
LoginPage	10	Phone input, OTP field, verify button
SearchResultsPage	10	Product container, price, add to cart
ProductDetailsPage	17	Title, price, rating, add to cart
CartPage	24	Items, prices, remove button, place order
CheckoutPage	20	Address, payment, confirm order

Locators are centralized in page classes for easy updates

🛠️ Utilities & Helpers

Helper Functions (20+)

Price parsing and formatting
Phone number validation
OTP validation
Random data generation
Retry logic
Delay utilities
Logging with timestamps

Custom Assertions (15+)

Price detail validations
Cart operation assertions
Search result checks
Address validation
Order placement verification
Console output logging

⚙️ Configuration

Environment Profiles

development - Local testing with visible browser
staging - Pre-production testing
production - Production-like settings
ci - CI/CD pipeline execution

Adjust Settings in `src/config/config.ts`

📝 Test Data

Products to Search

Located in test-data/testData.ts:

PRODUCTS_TO_SEARCH = [
  { name: 'iphone 17 pro max', category: 'Electronics' },
  { name: 'women kurtas', category: 'Clothing' },
  { name: 'lakme lipstick', category: 'Beauty' },
  { name: 'logitech g29', category: 'Gaming' },
  { name: 'mamypoko pants-xl', category: 'Baby Care' }
]

Easily Customizable

Update product names to test different items

📊 Test Results & Reporting

HTML Report

Generated automatically after tests
Located in playwright-report/ folder
Includes:
- Test status (✓ Passed / ✗ Failed)
- Execution time
- Console logs and output
- Screenshots on failure
- Video recordings on failure
- Detailed trace information

View Report

npm run test:report

🐛 Troubleshooting

Issue: "Cannot find module"

# Clear node_modules and reinstall
rm -r node_modules
npm install

Issue: "Timeout waiting for locator"

Increase timeout in src/config/config.ts
Verify locator matches current Flipkart UI
Check internet connection
Run with npm run test:debug to inspect

Issue: "Browser won't open"

# Reinstall browsers
npx playwright install chromium

Issue: "OTP modal not appearing"

OTP login is optional, most tests skip login
Tests work without authentication

📚 Test Cases

TC-001: Complete Shopping Workflow (MAIN)

Searches 5 products
Adds each to cart
Compares products
Removes 2 items
Extracts all price details
Places order
Duration: 4-6 minutes

TC-002: Individual Search & Cart

Single product search
Add to cart verification
Duration: 2-3 minutes

TC-003: Price Details Extraction

Add 2 products
Extract complete price breakdown
Full validation assertions
Duration: 3-4 minutes

TC-004: Multi-Category Search

Search 3 products
Verify results for each category
Display results summary
Duration: 3-4 minutes

TC-005: Cart Item Removal

Add 3 products
Remove items one by one
Verify count changes
Duration: 3-4 minutes

TC-006: Search Results Display

Search single product
Display first 5 results
Show titles and prices
Duration: 2-3 minutes

✨ Output Examples

Console Output

[12:34:56 PM] STEP 1: Navigating to Flipkart Home
[12:34:58 PM] ✓ Home page loaded successfully
[12:35:00 PM] STEP 2.1: Searching for "iphone 17 pro max"
[12:35:02 PM] ✓ Search initiated for: iphone 17 pro max
[12:35:03 PM] ✓ Found 500 results...

========================================
          PRODUCTS IN CART
========================================
1. Apple iPhone 17 Pro Max 256GB
   Price: ₹1,39,999

2. Anvi Kurta Cotton...
   Price: ₹799
========================================

========================================
          PRICE DETAILS BREAKDOWN
========================================
Items in Cart: 3
Subtotal: ₹1,89,097
Discount: ₹5,000
Platform Fee: ₹0
Shipping Charge: Free
Total Amount: ₹1,84,097
Delivery Address: 123 Main St, Bangalore
========================================

🚀 Quick Start (5 Minutes)

# 1. Move to existing project folder
cd "C:\Users\user\Ecomerce Flip Automation"

# 2. Install dependencies (2 min)
npm install

# 3. Run main test (3 min)
npm run test:main

# 4. View report
npm run test:report

# ✓ Done! Check the browser for HTML report

📖 Folder Naming Convention

Folder	Purpose	Clarity
`src/`	Source code	Clear and standard
`pages/`	Page object classes	Descriptive name
`utils/`	Helper functions	Self-explanatory
`config/`	Configuration files	Standard term
`tests/`	Test specifications	Clear purpose
`test-data/`	Test data files	Descriptive

✅ Verification Checklist

After running tests, verify:

Tests execute without errors
Console shows timestamped logs
All 5 products searched successfully
Products added to cart
Last 2 items removed from cart
Price details extracted and printed
Assertions passed (console output)
HTML report generated
Order placement attempted

📖 Documentation Files

README.md - This file (complete overview)
package.json - Dependencies and scripts
playwright.config.ts - Playwright configuration
tsconfig.json - TypeScript settings
.env.example - Environment variables template

🔗 Key Files to Know

File	Purpose	Lines
`src/pages/CartPage.ts`	Shopping cart operations	250+
`tests/flipkart.spec.ts`	Main test (TC-001)	350+
`src/utils/helper.ts`	Utility functions	200+
`src/utils/assertions.ts`	Custom assertions	200+
`test-data/testData.ts`	Test products & credentials	50+
`src/config/config.ts`	Configuration management	150+

🎓 Next Steps

Immediate

Run npm install
Run npm run test:main
View npm run test:report

Learn More

Read through src/pages/CartPage.ts for price extraction
Check tests/flipkart.spec.ts for test flow
Review assertions in src/utils/assertions.ts

Customize

Update products in test-data/testData.ts
Modify locators in src/pages/*.ts if Flipkart UI changes
Add new test cases in tests/ folder

💡 Best Practices

Always use page objects - Don't interact with page directly
Centralize locators - Update in one place
Use assertions - Validate test expectations
Log status - Use logWithTimestamp() for debugging
Handle errors gracefully - Try-catch for optional features

🆘 Support & Resources

Built With

Playwright - Browser automation
TypeScript - Type safety
@playwright/test - Testing framework

Documentation

Playwright Docs: https://playwright.dev
TypeScript Handbook: https://www.typescriptlang.org/docs
Page Object Model: https://playwright.dev/docs/pom

📄 License

MIT License - Feel free to use and modify

✅ Production Ready Status

Aspect	Status
Code Quality	✅ Production-ready
Design Pattern	✅ Page Object Model
Type Safety	✅ TypeScript strict mode
Documentation	✅ Comprehensive
Test Coverage	✅ Complete workflow
Error Handling	✅ Proper exception handling
Reporting	✅ HTML + JSON + Console
Maintainability	✅ Easy to extend

🎉 Ready to Use!

Project Status: ✅ COMPLETE & PRODUCTION READY

Next Action: Run npm run test:main

Expected Result: All tests pass with detailed console output and HTML report

Created: 2024 Framework: Playwright + TypeScript Pattern: Page Object Model Environment: Windows Headless Locators: 75+ exact and unique selectors Assertions: 15+ custom validations Test Cases: 6 comprehensive scenarios

🚀 Happy Testing!

Name		Name	Last commit message	Last commit date
Latest commit History 2 Commits
.github/workflows		.github/workflows
src		src
test-data		test-data
tests		tests
.env.example		.env.example
.gitignore		.gitignore
ARCHITECTURE.md		ARCHITECTURE.md
FIXES_APPLIED.md		FIXES_APPLIED.md
INSTALLATION.md		INSTALLATION.md
Jenkinsfile		Jenkinsfile
LOCATOR_REFERENCE.md		LOCATOR_REFERENCE.md
PROJECT_COMPLETION.md		PROJECT_COMPLETION.md
QUICK_START.md		QUICK_START.md
README.md		README.md
RUN_TESTS.md		RUN_TESTS.md
START_HERE.md		START_HERE.md
package-lock.json		package-lock.json
package.json		package.json
playwright.config.js		playwright.config.js
playwright.config.ts		playwright.config.ts
tsconfig.json		tsconfig.json

Folders and files

Latest commit

History

Repository files navigation