Phúc Long Coffee & Tea - Automation Test Suite

Bộ test tự động hóa hoàn chỉnh cho website Phúc Long Coffee & Tea, bao gồm các test case cho đăng nhập, đặt hàng và đăng xuất.

📋 Test Cases

Core Functionality Tests

• TC001: Đăng nhập thành công với thông tin hợp lệ
• TC002: Đặt mua sản phẩm Hồng Trà Đào với tùy chỉnh
• TC003: Đăng xuất thành công
• TC004: End-to-End Flow - Login, Order, Logout
• TC005: Negative Test - Login với thông tin sai
• TC006: Test Responsive Design - Mobile View

Performance Tests

• TC007: Page Load Performance
• TC008: Login Performance

Accessibility Tests

• TC009: Keyboard Navigation
• TC010: Screen Reader Compatibility

🚀 Cài đặt

1. Cài đặt dependencies

cd test
npm install

2. Cài đặt browsers

npm run install:browsers

🧪 Chạy Tests

Chạy tất cả tests

npm test

Chạy với giao diện

npm run test:ui

Chạy với browser hiển thị

npm run test:headed

Chạy test cụ thể

# Test đăng nhập
npm run test:login

# Test đặt hàng
npm run test:order

# Test đăng xuất
npm run test:logout

# Test end-to-end
npm run test:e2e

# Test negative cases
npm run test:negative

# Test responsive design
npm run test:responsive

# Test performance
npm run test:performance

# Test accessibility
npm run test:accessibility

Chạy trên browser cụ thể

# Chrome
npm run test:chromium

# Firefox
npm run test:firefox

# Safari
npm run test:webkit

# Mobile
npm run test:mobile

Debug mode

npm run test:debug

📊 Xem kết quả

HTML Report

npm run test:report

Code Generation

npm run codegen

🔧 Cấu hình

File cấu hình chính

• playwright.config.js - Cấu hình Playwright
• package.json - Scripts và dependencies

Cấu hình test

• Base URL: https://phuclong.com.vn
• Timeout: 10s cho actions, 30s cho navigation
• Retry: 2 lần trên CI, 0 lần local
• Screenshot: Chỉ khi fail
• Video: Giữ lại khi fail
• Trace: Khi retry

📱 Browsers được test

Desktop

• Chrome (Chromium)
• Firefox
• Safari (WebKit)

Mobile

• Mobile Chrome (Pixel 5)
• Mobile Safari (iPhone 12)

🎯 Locators được sử dụng

Login Flow

// Icon user
page.locator('i').nth(1)

// Số điện thoại
page.getByRole('textbox', { name: 'Số điện thoại*' })

// Mật khẩu
page.getByRole('textbox', { name: 'Mật khẩu*' })

// Buttons
page.getByRole('button', { name: 'Tiếp tục' })
page.getByRole('button', { name: 'Đăng nhập' })

Order Flow

// Product button
page.getByRole('button', { name: 'Chọn Size' }).first()

// Customization options
page.getByText('Nhiều').first()      // Ngọt
page.getByText('Nhiều').nth(1)       // Trà
page.getByText('Nhiều').nth(2)       // Đá

// Add to cart
page.getByRole('button', { name: 'Đặt mua' })

Logout Flow

// User menu
page.locator('i').nth(1)

// Logout button
page.getByText('Đăng xuất')

📈 Performance Benchmarks

Page Load

• Target: < 5 seconds
• Measurement: Time to network idle

Login

• Target: < 3 seconds
• Measurement: Complete login flow

♿ Accessibility Features

Keyboard Navigation

• Tab navigation support
• Enter key activation
• Focus management

Screen Reader

• ARIA labels
• Proper form labels
• Semantic HTML

🐛 Troubleshooting

Common Issues

1. Test fails with timeout

   • Check internet connection
   • Verify website is accessible
   • Increase timeout in config

2. Locator not found

   • Website may have changed
   • Update locators in test file
   • Use npm run codegen to generate new locators

3. Login fails

   • Verify test credentials are valid
   • Check for CAPTCHA or rate limiting
   • Update credentials in test file

Debug Tips

1. Run with headed mode

   npm run test:headed

2. Use debug mode

   npm run test:debug

3. Check screenshots

   • Screenshots saved in test-results/ folder
   • Only captured on test failure

4. View traces

   • Traces saved when tests retry
   • Open with Playwright trace viewer

📝 Test Data

Valid Credentials

• Phone: 0794174833
• Password: 123123

Test Product

• Name: Hồng Trà Đào (L)
• Customization: Nhiều ngọt, nhiều trà, nhiều đá

🔄 CI/CD Integration

GitHub Actions Example

name: Phúc Long 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: cd test && npm install
    - run: cd test && npm run install:browsers
    - run: cd test && npm test

📞 Support

Nếu gặp vấn đề với test suite:

1. Kiểm tra logs trong console
2. Xem screenshots trong test-results/
3. Chạy với --headed mode để debug
4. Cập nhật locators nếu website thay đổi