E2E Testing với Cypress hoặc Playwright

Trong phát triển ứng dụng web, End-to-End (E2E) Testing giúp kiểm tra toàn bộ luồng hoạt động của ứng dụng từ góc nhìn người dùng thực tế. Trong bài học này, chúng ta sẽ tìm hiểu về E2E Testing trong Vue.js bằng cách sử dụng Cypress hoặc Playwright, hai công cụ phổ biến giúp tự động hóa kiểm thử giao diện và hành vi người dùng.

Cypress hoặc Playwright

1. Giới thiệu về End-to-End Testing (E2E) trong Vue.js

E2E Testing là gì?

• Kiểm thử toàn bộ luồng hoạt động của ứng dụng từ đầu đến cuối.
• Mô phỏng hành vi người dùng như nhập form, điều hướng, nhấp chuột.
• Xác minh rằng ứng dụng hoạt động đúng như mong đợi trên trình duyệt thực tế.

Tại sao cần E2E Testing?

• Phát hiện lỗi UI/UX trước khi triển khai sản phẩm.
• Đảm bảo tính ổn định của hệ thống khi có thay đổi.
• Kiểm tra tính tương thích trên nhiều trình duyệt khác nhau.

2. Cài đặt và cấu hình Cypress hoặc Playwright

Cài đặt Cypress

Cypress là một framework E2E mạnh mẽ, dễ thiết lập:

npm install --save-dev cypress

Chạy Cypress lần đầu:

npx cypress open

Cấu trúc thư mục Cypress sau khi cài đặt:

cypress/
  ├── e2e/                # Thư mục chứa test case
  ├── fixtures/           # Dữ liệu mock
  ├── support/            # Cấu hình test

Tạo file test trong thư mục cypress/e2e/login.cy.js.

Cài đặt Playwright

Playwright hỗ trợ kiểm thử đa trình duyệt và có hiệu suất cao:

npm install --save-dev @playwright/test

Chạy Playwright lần đầu:

npx playwright install

Tạo file test trong thư mục tests/login.spec.js.

3. Viết test kiểm tra luồng người dùng (đăng nhập, điều hướng, gửi form)

Kiểm tra form đăng nhập bằng Cypress

Tạo file cypress/e2e/login.cy.js:

describe('Login Form Test', () => {
  it('should log in successfully with valid credentials', () => {
    cy.visit('http://localhost:5173/login'); // Truy cập trang đăng nhập
    cy.get('input[name="email"]').type('user@example.com');
    cy.get('input[name="password"]').type('password123');
    cy.get('button[type="submit"]').click();
    cy.url().should('include', '/dashboard'); // Kiểm tra điều hướng
  });

  it('should show error message for invalid login', () => {
    cy.visit('http://localhost:5173/login');
    cy.get('input[name="email"]').type('wrong@example.com');
    cy.get('input[name="password"]').type('wrongpassword');
    cy.get('button[type="submit"]').click();
    cy.contains('Invalid credentials').should('be.visible'); // Kiểm tra thông báo lỗi
  });
});

Kiểm tra form đăng nhập bằng Playwright

Tạo file tests/login.spec.js:

import { test, expect } from '@playwright/test';

test('Login form test', async ({ page }) => {
  await page.goto('http://localhost:5173/login');
  await page.fill('input[name="email"]', 'user@example.com');
  await page.fill('input[name="password"]', 'password123');
  await page.click('button[type="submit"]');
  await expect(page).toHaveURL('http://localhost:5173/dashboard');
});

test('Invalid login shows error', async ({ page }) => {
  await page.goto('http://localhost:5173/login');
  await page.fill('input[name="email"]', 'wrong@example.com');
  await page.fill('input[name="password"]', 'wrongpassword');
  await page.click('button[type="submit"]');
  await expect(page.locator('.error-message')).toHaveText('Invalid credentials');
});

4. Thực hành: Tạo test E2E kiểm tra form đăng nhập

Bước 1: Cài đặt Cypress hoặc Playwright.
Bước 2: Viết test case cho form đăng nhập:

• Kiểm tra nhập thông tin đúng/sai.
• Kiểm tra thông báo lỗi khi nhập sai thông tin.
• Kiểm tra điều hướng sau khi đăng nhập thành công.

Bước 3: Chạy lệnh kiểm thử:

Với Cypress:

npx cypress run

Với Playwright:

npx playwright test

Kết luận

Học viên sẽ học được:

• Cách cài đặt và sử dụng Cypress/Playwright để kiểm thử E2E trong Vue.js.
• Viết test kiểm tra luồng người dùng thực tế (đăng nhập, điều hướng).
• Phát hiện lỗi UI/UX và cải thiện chất lượng ứng dụng.

Lợi ích:

• Giúp phát hiện lỗi nhanh chóng trước khi triển khai.
• Đảm bảo ứng dụng hoạt động đúng trên nhiều trình duyệt.
• Tăng độ tin cậy và giảm rủi ro khi cập nhật tính năng mới.