Module 05: Playwright Cơ Bản — Đọc Hiểu Mã Nguồn Do AI Sinh Ra¶

🎯 Mục Tiêu Module¶

Thay đổi tư duy: QC không phải "viết code từ đầu", QC cần "đọc hiểu và bảo trì code".
Nắm bắt cấu trúc file .spec.ts của Playwright.
Hiểu ý nghĩa các lệnh cơ bản: goto, getByRole, fill, click, expect.
Biết cách tự sửa (tweak) mã nguồn khi AI viết chưa đúng ý.
Nắm được các lệnh Terminal để tự chạy test cục bộ.

5.1. Vai Trò Của QC Khi AI Viết Code¶

Trong môi trường Antigravity IDE (Agentic Workflow), AI là người "gõ phím", bạn là người Nghiệm thu (Reviewer).

Để nghiệm thu tốt, bạn không cần phải là một lập trình viên siêu việt, nhưng bạn BẮT BUỘC phải hiểu AI đang viết cái gì. Nếu AI nhắm sai Element hoặc dùng thời gian chờ (timeout) không hợp lý, bạn phải chỉ ra được hoặc tự tay sửa một vài dòng nhỏ.

Cấu trúc một file test Playwright¶

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

test('Kiểm tra Đăng nhập thành công', async ({ page }) => {
  // 1. Setup: Điều hướng trình duyệt
  await page.goto('https://practice.automationtesting.in/my-account/');

  // 2. Action: Tương tác với các phần tử web
  await page.getByLabel('Username').fill('testuser');
  await page.getByLabel('Password').fill('Test@123');
  await page.getByRole('button', { name: 'Login' }).click();

  // 3. Assert: Kiểm tra tính đúng đắn
  await expect(page.getByText('Hello testuser')).toBeVisible();
});

5.2. Các Lệnh Playwright Phổ Biến (Do AI Sinh Ra)¶

Khi AI viết code, nó sẽ dùng các hàm phổ biến sau. Bạn cần nhớ để đọc hiểu:

// Mở một trang web
await page.goto('https://practice.automationtesting.in/');

// Quay lại trang trước (Back)
await page.goBack();

// Tải lại trang (Reload/F5)
await page.reload();

2. Nhóm Lệnh Tương Tác (Action)¶

Lưu ý: Playwright 2024 ưu tiên dùng getByRole, getByLabel thay cho locator css/xpath.

// Click vào một nút hoặc link
await page.getByRole('button', { name: 'Submit' }).click();

// Điền chữ vào ô nhập liệu
await page.getByLabel('Email Address').fill('test@example.com');

// Xóa nội dung cũ và nhập mới
await page.getByLabel('Email Address').clear();
await page.getByLabel('Email Address').fill('new@example.com');

// Chọn giá trị từ Dropdown
await page.getByLabel('Country').selectOption('Vietnam');

// Đánh dấu Checkbox
await page.getByLabel('I agree to the terms').check();

3. Nhóm Lệnh Kiểm Chứng (Assertion - `expect`)¶

Đóng vai trò như các bước "Verify" trong Test Case Manual của bạn.

// Kiểm tra phần tử có HIỂN THỊ trên màn hình không
await expect(page.getByText('Welcome back')).toBeVisible();

// Kiểm tra phần tử bị ẨN (không xuất hiện)
await expect(page.getByText('Error loading data')).toBeHidden();

// Kiểm tra chữ bên trong phần tử
await expect(page.getByRole('heading')).toHaveText('Dashboard');

// Kiểm tra URL hiện tại của trình duyệt
await expect(page).toHaveURL('https://example.com/dashboard');

// Kiểm tra ô input có chứa giá trị gì
await expect(page.getByLabel('Email')).toHaveValue('test@example.com');

5.3. Xử Lý Tình Huống: Khi AI Viết Sai¶

Sẽ có lúc AI dùng sai Locator (do thiết kế web phức tạp). Ví dụ, AI viết:

// AI viết (hơi mong manh)
await page.locator('.btn-primary-2').click();

Bạn đọc code và thấy nó bất ổn, bạn có 2 cách:

Chat lại với AI: "Sửa dòng click thành dùng getByRole cho nút 'Add to Cart' nhé".

Tự sửa tay (Nhanh hơn): Xóa dòng đó và tự gõ lại:

await page.getByRole('button', { name: 'Add to Cart' }).click();

5.4. Các Lệnh Terminal Cơ Bản¶

AI có thể giúp bạn chạy Terminal, nhưng là QC Automation, bạn nên thuộc vài lệnh Terminal (NPM) cơ bản của Playwright để làm việc độc lập.

Bạn gõ các lệnh này vào cửa sổ Terminal của IDE:

Lệnh	Ý nghĩa
`npx playwright test`	Chạy toàn bộ các file test trong dự án (chạy ngầm - không hiện UI).
`npx playwright test --ui`	Mở giao diện Playwright UI Mode tuyệt đẹp để theo dõi từng bước test chạy.
`npx playwright test tests/login.spec.ts`	Chỉ chạy riêng lẻ 1 file test mang tên `login.spec.ts`.
`npx playwright show-report`	Mở HTML Report lên trình duyệt để xem kết quả Pass/Fail.

📝 Bài Tập (Thực Hành Đọc Code)¶

Không cần AI, hãy thử đọc hiểu file code sau và trả lời câu hỏi:

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

test('Tìm kiếm sản phẩm', async ({ page }) => {
  await page.goto('https://practice.automationtesting.in/shop/');

  await page.getByPlaceholder('Search products...').fill('HTML5');
  await page.keyboard.press('Enter');

  await expect(page.getByRole('heading', { name: 'HTML5 WebApp Develpment' })).toBeVisible();
});

Câu hỏi: 1. Trình duyệt sẽ mở URL nào đầu tiên? 2. Hàm getByPlaceholder đang làm nhiệm vụ gì? 3. Nếu sản phẩm "HTML5 WebApp Develpment" không hiện ra trên trang web, bài test này sẽ báo Pass hay Fail?

✅ Checklist Hoàn Thành Module¶

[ ] Thay đổi tư duy: QC là người Review Code do AI viết.
[ ] Hiểu ý nghĩa các lệnh Navigation (goto).
[ ] Hiểu ý nghĩa các lệnh Action (fill, click).
[ ] Hiểu ý nghĩa các lệnh Assertion (expect, toBeVisible).
[ ] Biết cách tự gõ Terminal để chạy lệnh Playwright cơ bản.