Skip to content

furqanahmad03/sqe-bookstore-automation-suite

Repository files navigation

πŸ“š Book Store - E-Commerce Platform

A full-stack e-commerce bookstore application built with Next.js, MongoDB, and comprehensive end-to-end testing using Playwright.

🌟 Features

Core Functionality

  • User Authentication: Secure login/registration with NextAuth.js
  • Book Browsing: Search and filter through available books
  • Shopping Cart: Add/remove items, update quantities
  • Checkout Process: Multi-step checkout with shipping and payment
  • Order Management: View order history and details
  • Admin Dashboard: CRUD operations for books and order management

Technical Highlights

  • Server-Side Rendering with Next.js
  • RESTful API endpoints
  • Responsive Design with SCSS modules
  • Session Management with cookies
  • Database Integration with MongoDB & Mongoose
  • Form Validation with React Hook Form
  • Notification System with custom provider
  • Component-Based Architecture

πŸ“‹ Table of Contents

πŸ”§ Prerequisites

Before you begin, ensure you have the following installed:

  • Node.js (v20 or higher)
  • npm or yarn
  • MongoDB (local installation or MongoDB Atlas account)
  • Git

πŸ“¦ Installation

  1. Clone the repository
git clone https://github.com/yourusername/book-store.git
cd book-store
  1. Install dependencies
npm install
  1. Install Playwright browsers
npx playwright install

βš™οΈ Environment Setup

Create a .env file in the root directory with the following variables:

MONGODB_URI=mongodb+srv://username:password@cluster.mongodb.net/bookstore
NEXTAUTH_SECRET=your-secret-key-here
NEXTAUTH_URL=http://localhost:3000
NODE_ENV=development
BASE_URL=http://localhost:3000

Creating Test Data

The application requires initial data to function properly. You can:

  1. Manually create data through the admin dashboard
  2. Use a seed script (create pages/api/seed.js - see Database Schema section)
  3. Import sample data directly into MongoDB

Admin User Setup

Create an admin user in MongoDB:

// In MongoDB shell or Compass
db.users.insertOne({
  name: "Admin User",
  email: "admin@example.com",
  password: "$2a$10$hashed_password_here", // Use bcrypt to hash "admin123"
  isAdmin: true,
  createdAt: new Date(),
  updatedAt: new Date()
})

πŸš€ Running the Application

Development Mode

npm run dev

The application will be available at http://localhost:3000

Production Mode

# Build the application
npm run build

# Start production server
npm run start

Using Docker

# Build and run with Docker Compose
docker-compose up

# Run tests in Docker
docker-compose run tests

πŸ§ͺ Testing

This project includes a comprehensive end-to-end testing suite using Playwright with 50+ test cases covering all major functionality.

Test Structure

tests/
β”œβ”€β”€ auth.spec.ts           # Authentication tests (10 tests)
β”œβ”€β”€ books.spec.ts          # Book browsing tests (10 tests)
β”œβ”€β”€ cart.spec.ts           # Shopping cart tests (11 tests)
β”œβ”€β”€ checkout.spec.ts       # Checkout flow tests (17 tests)
β”œβ”€β”€ dashboard.spec.ts      # Admin dashboard tests (11 tests)
β”œβ”€β”€ pages/                 # Page Object Models
β”‚   β”œβ”€β”€ BasePage.ts        # Base class with common methods
β”‚   β”œβ”€β”€ LoginPage.ts       # Login page object
β”‚   β”œβ”€β”€ RegisterPage.ts    # Registration page object
β”‚   β”œβ”€β”€ BooksPage.ts       # Books page object
β”‚   β”œβ”€β”€ CartPage.ts        # Cart page object
β”‚   β”œβ”€β”€ CheckoutPage.ts    # Checkout page object
β”‚   └── AdminPage.ts       # Admin dashboard object
└── playwright.config.ts   # Playwright configuration

Test Categories

Tests are organized with tags for selective execution:

  • @smoke: Critical path tests (quick validation)
  • @functional: Feature-specific tests
  • @regression: Full regression suite
  • @security: Security-related tests

Running Tests

Run All Tests

npm test
# or
npm run test:e2e

Run Specific Test Suites

# Authentication tests
npm run test:auth

# Book browsing tests
npm run test:books

# Shopping cart tests
npm run test:cart

# Checkout flow tests
npm run test:checkout

# Admin dashboard tests
npm run test:admin

Run Tests by Tag

# Run only smoke tests
npm run test:smoke

# Run functional tests
npm run test:functional

# Run regression tests
npm run test:regression

Run Tests in Different Browsers

# Chromium only
npm run test:chromium

# Mobile browsers
npm run test:mobile

Interactive Testing

# Run tests in headed mode (see browser)
npm run test:headed

# Run tests in UI mode (interactive)
npm run test:ui

# Debug mode (step through tests)
npm run test:debug

# Generate tests using codegen
npm run codegen

Test Reports

After running tests, view the HTML report:

npm run report

Reports are generated in the playwright-report/ directory with:

  • Screenshots of failures
  • Video recordings of failed tests
  • Detailed test execution logs
  • Performance metrics

Test Coverage

Authentication Tests (TC-AUTH-001 to TC-AUTH-010)

  • βœ… User registration with valid data
  • βœ… Password mismatch validation
  • βœ… Email format validation
  • βœ… Password length validation
  • βœ… User login with valid credentials
  • βœ… Invalid credentials handling
  • βœ… Empty field validation
  • βœ… Navigation between pages
  • βœ… Password masking
  • βœ… Session persistence

Books Tests (TC-BOOKS-001 to TC-BOOKS-010)

  • βœ… Display books list
  • βœ… Search functionality
  • βœ… No results handling
  • βœ… Clear search filter
  • βœ… Add single book to cart
  • βœ… Add multiple books to cart
  • βœ… View book details
  • βœ… Book information accuracy
  • βœ… Responsive design
  • βœ… Add to cart notification

Cart Tests (TC-CART-001 to TC-CART-011)

  • βœ… View cart with items
  • βœ… View empty cart
  • βœ… Update quantity (increase/decrease)
  • βœ… Calculate total price
  • βœ… Proceed to checkout
  • βœ… Cart persistence across tabs
  • βœ… Remove items from cart
  • βœ… Display item information
  • βœ… Quantity button functionality
  • βœ… Item link navigation

Checkout Tests (TC-CHECKOUT-001 to TC-CHECKOUT-017)

  • βœ… Fill shipping address form
  • βœ… Shipping validation errors
  • βœ… Persist shipping data
  • βœ… Select payment methods (PayPal, Stripe, Cash on Delivery)
  • βœ… Navigation between checkout steps
  • βœ… Display order summary
  • βœ… Edit shipping/payment from review
  • βœ… Complete order placement
  • βœ… Price calculations
  • βœ… End-to-end checkout flows

Admin Dashboard Tests (TC-ADMIN-001 to TC-ADMIN-011)

  • βœ… Access dashboard as admin
  • βœ… Access control for non-admin users
  • βœ… View dashboard statistics
  • βœ… Add new book with validation
  • βœ… Edit existing book
  • βœ… Delete book with confirmation
  • βœ… Navigate between tabs
  • βœ… View all orders
  • βœ… Book form validation
  • βœ… Cancel form operations

Page Object Model

The project uses the Page Object Model (POM) pattern for maintainable test code:

BasePage

Common methods inherited by all page objects:

  • Navigation helpers
  • Element interaction methods
  • Wait utilities
  • Screenshot capture
  • URL verification

Example Usage

import { LoginPage } from './pages/LoginPage';
import { BooksPage } from './pages/BooksPage';

test('User can browse and add books to cart', async ({ page }) => {
  const loginPage = new LoginPage(page);
  const booksPage = new BooksPage(page);
  
  // Login
  await loginPage.goto();
  await loginPage.login('test@example.com', 'password123');
  
  // Browse books
  await booksPage.goto();
  await booksPage.searchBooks('Harry Potter');
  
  // Add to cart
  await booksPage.addFirstBookToCart();
  
  // Verify
  const cartCount = await booksPage.getCartCount();
  expect(cartCount).toBeGreaterThan(0);
});

Writing Tests

Test Structure Guidelines

  1. Use descriptive test names with test case IDs:
test('TC-AUTH-001: User registration with valid data @smoke', async ({ page }) => {
  // Test implementation
});
  1. Follow AAA pattern (Arrange, Act, Assert):
test('Add book to cart', async ({ page }) => {
  // Arrange
  const booksPage = new BooksPage(page);
  await booksPage.goto();
  
  // Act
  await booksPage.addFirstBookToCart();
  
  // Assert
  const cartCount = await booksPage.getCartCount();
  expect(cartCount).toBe(1);
});
  1. Use data-testid selectors for reliability:
// Good
await page.locator('[data-testid="add-to-cart"]').click();

// Avoid
await page.locator('.book_button').click();
  1. Clean up after tests when necessary:
test.afterEach(async ({ page }) => {
  // Clear cart, logout, etc.
});

CI/CD Integration

GitHub Actions Example

name: E2E 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'
      - name: Install dependencies
        run: npm ci
      - name: Install Playwright
        run: npx playwright install --with-deps
      - name: Run tests
        run: npm test
      - name: Upload test results
        if: always()
        uses: actions/upload-artifact@v3
        with:
          name: playwright-report
          path: playwright-report/

πŸ“ Project Structure

book-store/
β”œβ”€β”€ components/           # React components
β”‚   β”œβ”€β”€ Banner.js
β”‚   β”œβ”€β”€ CheckoutProgress.js
β”‚   β”œβ”€β”€ ConfirmModal.js
β”‚   β”œβ”€β”€ DropdownMenu.js
β”‚   β”œβ”€β”€ Header.js
β”‚   β”œβ”€β”€ Layout.js
β”‚   β”œβ”€β”€ Notice.js
β”‚   β”œβ”€β”€ Notification.js
β”‚   β”œβ”€β”€ NotificationProvider.js
β”‚   └── ProductItem.js
β”œβ”€β”€ models/              # MongoDB models
β”‚   β”œβ”€β”€ Order.js
β”‚   β”œβ”€β”€ Product.js
β”‚   └── User.js
β”œβ”€β”€ pages/               # Next.js pages
β”‚   β”œβ”€β”€ api/            # API routes
β”‚   β”‚   β”œβ”€β”€ admin/      # Admin endpoints
β”‚   β”‚   β”œβ”€β”€ auth/       # Authentication
β”‚   β”‚   β”œβ”€β”€ orders/     # Order management
β”‚   β”‚   └── product/    # Product endpoints
β”‚   β”œβ”€β”€ books/          # Book pages
β”‚   β”œβ”€β”€ order/          # Order pages
β”‚   β”œβ”€β”€ cart.js
β”‚   β”œβ”€β”€ dashboard.js    # Admin dashboard
β”‚   β”œβ”€β”€ login.js
β”‚   β”œβ”€β”€ payment.js
β”‚   β”œβ”€β”€ placeorder.js
β”‚   β”œβ”€β”€ profile.js
β”‚   β”œβ”€β”€ register.js
β”‚   β”œβ”€β”€ shipping.js
β”‚   └── _app.js
β”œβ”€β”€ tests/               # E2E tests
β”‚   β”œβ”€β”€ pages/          # Page Object Models
β”‚   β”œβ”€β”€ auth.spec.ts
β”‚   β”œβ”€β”€ books.spec.ts
β”‚   β”œβ”€β”€ cart.spec.ts
β”‚   β”œβ”€β”€ checkout.spec.ts
β”‚   └── dashboard.spec.ts
β”œβ”€β”€ utils/               # Utility functions
β”‚   β”œβ”€β”€ db.js           # Database connection
β”‚   └── Store.js        # Global state management
β”œβ”€β”€ styles/              # SCSS styles
β”œβ”€β”€ public/              # Static assets
β”œβ”€β”€ .env                 # Environment variables
β”œβ”€β”€ .gitignore
β”œβ”€β”€ package.json
β”œβ”€β”€ playwright.config.ts
└── README.md

πŸ”Œ API Endpoints

Authentication

  • POST /api/auth/signup - Register new user
  • POST /api/auth/[...nextauth] - NextAuth.js endpoints
  • POST /api/auth/update - Update user profile

Products

  • GET /api/products - Get all products
  • GET /api/product/[id] - Get product by ID

Orders

  • POST /api/orders - Create new order
  • GET /api/orders/[id] - Get order by ID
  • GET /api/orders/history - Get user's order history

Admin

  • GET /api/admin/products - Get all products (admin)
  • POST /api/admin/products - Create new product
  • GET /api/admin/products/[id] - Get product details
  • PUT /api/admin/products/[id] - Update product
  • DELETE /api/admin/products/[id] - Delete product
  • GET /api/admin/orders - Get all orders (admin)

🚒 Deployment

Vercel Deployment

  1. Push to GitHub
git push origin main
  1. Import in Vercel
  • Go to vercel.com
  • Import your GitHub repository
  • Add environment variables
  • Deploy

🀝 Contributing

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/AmazingFeature)
  3. Commit your changes (git commit -m 'feat: Add some AmazingFeature')
  4. Push to the branch (git push origin feature/AmazingFeature)
  5. Open a Pull Request

Contribution Guidelines

  • Write tests for new features
  • Maintain code style consistency
  • Update documentation as needed
  • Ensure all tests pass before submitting PR
  • Add appropriate test tags (@smoke, @functional, @regression)

πŸ“ License

This project is licensed under the MIT License - see the LICENSE file for details.

πŸ‘¨β€πŸ’» Author

Furqan Ahmad

πŸ™ Acknowledgments

  • Next.js team for the amazing framework
  • Playwright team for the testing framework
  • MongoDB for the database
  • All contributors and users

πŸ“ž Support

For support, email hfurqan.se@gmail.com or open an issue in the GitHub repository.

πŸ“Š Performance Metrics

The application is optimized for:

  • First Contentful Paint: < 1.5s
  • Time to Interactive: < 3.0s
  • Largest Contentful Paint: < 2.5s
  • Cumulative Layout Shift: < 0.1

🧩 Technologies Used

Frontend

  • Next.js 16.0
  • React 19.2
  • SCSS Modules
  • React Hook Form
  • Context API for state management

Backend

  • Next.js API Routes
  • NextAuth.js for authentication
  • MongoDB with Mongoose
  • bcryptjs for password hashing

Testing

  • Playwright 1.57
  • Page Object Model pattern
  • TypeScript for type safety

DevOps

  • Docker & Docker Compose
  • GitHub Actions (CI/CD ready)
  • Vercel deployment

Happy coding! πŸŽ‰

If you find this project helpful, please consider giving it a ⭐ on GitHub!

About

A demonstration of modern SQE methodologies applied to a web application. Includes source code + comprehensive test artifacts: Automation Scripts (Selenium/Playwright), CI/CD pipelines, ZAP Security scans, and Performance/Load testing reports.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors