MR. V (vveeggii)

---
name: web-application-testing-skill
description: Bộ công cụ để tương tác và kiểm thử các ứng dụng web cục bộ bằng Playwright.
---

# Kiểm thử Ứng dụng Web

Kỹ năng này cho phép thực hiện kiểm thử toàn diện và gỡ lỗi các ứng dụng web cục bộ bằng công cụ tự động hóa Playwright.

## Khi nào Nên Sử dụng Kỹ năng Này

Sử dụng kỹ năng này khi bạn cần:
- Kiểm thử chức năng giao diện người dùng (frontend) trên một trình duyệt thực tế
- Xác minh hành vi giao diện (UI) và các thao tác tương tác
- Gỡ lỗi các sự cố trong ứng dụng web
- Chụp ảnh màn hình để làm tài liệu hoặc phục vụ gỡ lỗi
- Kiểm tra nhật ký bảng điều khiển (console logs) của trình duyệt
- Xác thực việc gửi biểu mẫu và các luồng thao tác của người dùng
- Kiểm tra thiết kế đáp ứng (responsive design) trên nhiều kích thước khung nhìn (viewports) khác nhau

## Điều kiện Tiên quyết

- Hệ thống đã được cài đặt Node.js
- Một ứng dụng web đang chạy cục bộ (hoặc một URL có thể truy cập được)
- Playwright sẽ được tự động cài đặt nếu chưa có sẵn

## Khả năng Cốt lõi

### 1. Tự động hóa Trình duyệt (Browser Automation)
- Điều hướng tới các URL
- Nhấp vào các nút bấm và liên kết
- Điền dữ liệu vào các trường biểu mẫu
- Chọn các trình đơn thả xuống (dropdowns)
- Xử lý các hộp thoại (dialogs) và cảnh báo (alerts)

### 2. Xác minh (Verification)
- Khẳng định (Assert) sự hiện diện của phần tử
- Xác minh nội dung văn bản
- Kiểm tra khả năng hiển thị của phần tử
- Xác thực các URL
- Kiểm thử hành vi đáp ứng trên các kích thước màn hình

### 3. Gỡ lỗi (Debugging)
- Chụp ảnh màn hình
- Xem nhật ký bảng điều khiển (console logs)
- Kiểm tra các yêu cầu mạng (network requests)
- Gỡ lỗi các bài kiểm thử bị thất bại

## Ví dụ Sử dụng

### Ví dụ 1: Kiểm thử Điều hướng Cơ bản
```javascript
// Navigate to a page and verify title
await page.goto('http://localhost:3000');
const title = await page.title();
console.log('Page title:', title);
```

### Ví dụ 2: Tương tác với Biểu mẫu
```javascript
// Fill out and submit a form
await page.fill('#username', 'testuser');
await page.fill('#password', 'password123');
await page.click('button[type="submit"]');
await page.waitForURL('**/dashboard');
```

### Ví dụ 3: Chụp Ảnh Màn hình
```javascript
// Capture a screenshot for debugging
await page.screenshot({ path: 'debug.png', fullPage: true });
```

## Nguyên tắc Hướng dẫn

1. **Luôn xác minh ứng dụng đang chạy** - Kiểm tra xem máy chủ cục bộ có thể truy cập được hay không trước khi chạy các bài kiểm thử
2. **Sử dụng cơ chế chờ tường minh (explicit waits)** - Chờ các phần tử hiển thị hoặc quá trình điều hướng hoàn tất trước khi tương tác
3. **Chụp ảnh màn hình khi xảy ra lỗi** - Chụp lại ảnh màn hình để hỗ trợ gỡ lỗi các sự cố
4. **Dọn dẹp tài nguyên** - Luôn đóng trình duyệt sau khi hoàn tất công việc
5. **Xử lý tình trạng hết thời gian chờ (timeouts) một cách khéo léo** - Đặt thời gian chờ hợp lý cho các thao tác chậm
6. **Kiểm thử tăng dần từng bước** - Bắt đầu bằng các tương tác đơn giản trước khi thử nghiệm các luồng phức tạp
7. **Sử dụng bộ chọn (selectors) một cách khôn ngoan** - Ưu tiên sử dụng `data-testid` hoặc các bộ chọn dựa trên vai trò (role-based selectors) hơn là các lớp CSS

## Các Mẫu Phổ biến (Common Patterns)

### Mẫu: Chờ Phần tử Xuất hiện
```javascript
await page.waitForSelector('#element-id', { state: 'visible' });
```

### Mẫu: Kiểm tra xem Phần tử Có Tồn tại Không
```javascript
const exists = await page.locator('#element-id').count() > 0;
```

### Mẫu: Lấy Nhật ký Console (Console Logs)
```javascript
page.on('console', msg => console.log('Browser log:', msg.text()));
```

### Mẫu: Xử lý Lỗi
```javascript
try {
  await page.click('#button');
} catch (error) {\n  await page.screenshot({ path: 'error.png' });
  throw error;
}
```

## Giới hạn

- Yêu cầu môi trường Node.js
- Không thể kiểm thử các ứng dụng di động gốc (native mobile apps - hãy sử dụng React Native Testing Library để thay thế)
- Có thể gặp khó khăn với các luồng xác thực đăng nhập phức tạp
- Một số framework hiện đại có thể yêu cầu cấu hình đặc thù riêng