Cách viết Test Case hiệu quả với Playwright: Từ Test Design đến Automation Script

// ❌ Không rõ ràng
test('test login', async ({ page }) => { ... });

// ✅ Rõ ràng, đọc như tài liệu
test('should display error message when login with wrong password', async ({ page }) => { ... });

test('should add item to cart successfully', async ({ page }) => {
  // ARRANGE — Chuẩn bị dữ liệu và trạng thái ban đầu
  await page.goto('/products');
  await page.waitForSelector('.product-list');

  // ACT — Thực hiện hành động cần kiểm thử
  await page.click('[data-testid="add-to-cart-btn"]');

  // ASSERT — Kiểm tra kết quả
  await expect(page.locator('.cart-count')).toHaveText('1');
});

// ❌ Dễ vỡ khi UI thay đổi
await page.click('#app > div.main > button:nth-child(3)');

// ✅ Bền vững, gần với cách người dùng tương tác
await page.getByRole('button', { name: 'Đăng nhập' }).click();
await page.getByLabel('Email').fill('user@example.com');
await page.getByTestId('submit-btn').click();

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

test.describe('Tính năng Đăng nhập', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/login');
  });

  test('đăng nhập thành công với thông tin hợp lệ', async ({ page }) => {
    await page.getByLabel('Email').fill('admin@test.com');
    await page.getByLabel('Mật khẩu').fill('Admin@123');
    await page.getByRole('button', { name: 'Đăng nhập' }).click();

    await expect(page).toHaveURL('/dashboard');
  });

  test('hiển thị lỗi khi mật khẩu sai', async ({ page }) => {
    await page.getByLabel('Email').fill('admin@test.com');
    await page.getByLabel('Mật khẩu').fill('wrong-password');
    await page.getByRole('button', { name: 'Đăng nhập' }).click();

    await expect(page.getByRole('alert')).toContainText('Sai tên đăng nhập hoặc mật khẩu');
  });
});

const loginTestCases = [
  { email: '', password: 'valid', expected: 'Email không được để trống' },
  { email: 'invalid-email', password: 'valid', expected: 'Email không hợp lệ' },
  { email: 'user@test.com', password: '', expected: 'Mật khẩu không được để trống' },
];

for (const tc of loginTestCases) {
  test(`validation: ${tc.expected}`, async ({ page }) => {
    await page.goto('/login');
    await page.getByLabel('Email').fill(tc.email);
    await page.getByLabel('Mật khẩu').fill(tc.password);
    await page.getByRole('button', { name: 'Đăng nhập' }).click();

    await expect(page.getByRole('alert')).toContainText(tc.expected);
  });
}

// pages/LoginPage.ts
export class LoginPage {
  constructor(private page: Page) {}

  async goto() {
    await this.page.goto('/login');
  }

  async login(email: string, password: string) {
    await this.page.getByLabel('Email').fill(email);
    await this.page.getByLabel('Mật khẩu').fill(password);
    await this.page.getByRole('button', { name: 'Đăng nhập' }).click();
  }

  async getErrorMessage() {
    return this.page.getByRole('alert').textContent();
  }
}

// tests/login.spec.ts
test('đăng nhập thành công', async ({ page }) => {
  const loginPage = new LoginPage(page);
  await loginPage.goto();
  await loginPage.login('admin@test.com', 'Admin@123');
  await expect(page).toHaveURL('/dashboard');
});