MR. V (vveeggii)

---
Tên: kỹ năng kiểm tra ứng dụng web
mô tả: Bộ công cụ để tương tác và thử nghiệm các ứng dụng web cục bộ bằng Playwright.
---

#Kiểm tra ứng dụng web

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

## Khi nào nên sử dụng kỹ năng này

Hãy sử dụng kỹ năng này khi bạn cần:
- Kiểm tra chức năng giao diện người dùng trong trình duyệt thực
- Xác minh hành vi và tương tác UI
- Gỡ lỗi các vấn đề về ứng dụng web
- Chụp ảnh màn hình để làm tài liệu hoặc gỡ lỗi
- Kiểm tra nhật ký bảng điều khiển trình duyệt
- Xác thực việc gửi biểu mẫu và luồng người dùng
- Kiểm tra thiết kế đáp ứng trên các khung nhìn

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

- Node.js được cài đặt trên hệ thống
- Một ứng dụng web chạy cục bộ (hoặc URL có thể truy cập)
- Nhà viết kịch sẽ được cài đặt tự động nếu không có mặt

## Năng lực cốt lõi

### 1. Tự động hóa trình duyệt
- Điều hướng đến URL
- Nhấp vào nút và liên kết
- Điền vào các trường mẫu
- Chọn danh sách thả xuống
- Xử lý các hộp thoại và cảnh báo

### 2. Xác minh
- Khẳng định 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ị phần tử
- Xác thực URL
- Kiểm tra hành vi đáp ứng

### 3. Gỡ lỗi
- Chụp ảnh màn hình
- Xem nhật ký giao diện điều khiển
- Kiểm tra các yêu cầu mạng
- Gỡ lỗi các bài kiểm tra thất bại

## Ví dụ sử dụng

### Ví dụ 1: Kiểm tra đ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 hình thức
```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

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 thử nghiệm
2. **Sử dụng tính năng chờ rõ ràng** - Đợi các phần tử hoặc điều hướng hoàn tất trước khi tương tác
3. **Chụp ảnh màn hình khi bị lỗi** - Chụp ảnh màn hình để giúp khắc phục sự cố
4. **Dọn dẹp tài nguyên** - Luôn đóng trình duyệt khi hoàn tất
5. **Xử lý thời gian chờ 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. **Thử nghiệm tăng dần** - Bắt đầu bằng các tương tác đơn giản trước các quy trình phức tạp
7. **Sử dụng bộ chọn một cách khôn ngoan** - Ưu tiên bộ chọn dựa trên vai trò hoặc kiểm thử dữ liệu hơn các lớp CSS

## Các mẫu phổ biến

### Mẫu: Chờ phần tử
```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: Nhận nhật ký bảng điều khiển
```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;
}
```

## Hạn chế

- Yêu cầu môi trường Node.js
- Không thể kiểm tra các ứng dụng di động gốc (thay vào đó hãy sử dụng Thư viện thử nghiệm gốc React)
- Có thể có vấn đề với các luồng xác thực phức tạp
- Một số framework hiện đại có thể yêu cầu cấu hình cụ thể