Giới Thiệu

Chúng ta đều đã từng trải qua điều này. Khi bạn bắt đầu tự động hóa một trường hợp kiểm thử mới, bạn mở trình soạn thảo mã, mở trình duyệt, mở DevTools và bắt đầu quá trình tẻ nhạt của việc kiểm tra các phần tử, tạo các bộ chọn và viết mã boilerplate cho mỗi cú nhấp chuột và nhập văn bản. Đây là một quá trình chậm chạp, tỉ mỉ có thể làm mất đà của bạn trước khi bạn đến phần thú vị nhất — viết các khẳng định thực tế.

Nhưng nếu bạn có thể bỏ qua phần lớn điều đó? Nếu bạn có thể tạo ra mã kiểm thử chất lượng cao, theo các phương pháp tốt nhất chỉ bằng cách sử dụng ứng dụng của mình như một người dùng thật sự?

Đó chính xác là những gì Playwright Codegen thực hiện. Đây là công cụ tạo mã chính thức được tích hợp trực tiếp vào thư viện Playwright, và nó là một trong những tính năng mạnh mẽ nhất trong bất kỳ framework tự động hóa hiện đại nào. Nếu bạn chưa sử dụng nó, bạn đang bỏ lỡ một khối lượng lớn năng suất.

1. Playwright Codegen Là Gì?

Playwright Codegen là một công cụ tương tác ghi lại các hành động của bạn trong trình duyệt và tự động chuyển đổi chúng thành mã kiểm thử Playwright chất lượng cao. Khi bạn khởi động nó, nó mở hai cửa sổ: một cửa sổ trình duyệt với ứng dụng web của bạn và một cửa sổ Inspector ghi lại mã theo thời gian thực khi bạn tương tác với trang.

Nó không chỉ là một bộ ghi đơn giản; nó là một trợ lý thông minh giúp bạn viết các bài kiểm thử tốt hơn, đáng tin cậy hơn ngay từ đầu.

2. Bắt Đầu: Kiểm Thử Được Ghi Lại Đầu Tiên Trong Dưới Một Phút

Điều tuyệt vời nhất về Codegen là cách dễ dàng để bắt đầu. Bạn không cần thiết lập một dự án phức tạp hoặc viết một dòng mã nào.

Đảm bảo bạn đã cài đặt Playwright. Nếu chưa, hãy mở terminal và chạy
bash Copy
```
# Đối với dự án Node.js/TypeScript
npm install @playwright/test
npx playwright install
```
Khởi động Codegen từ terminal. Chỉ cần một lệnh này là đủ. Nó sẽ mở một cửa sổ trình duyệt mới và Inspector.
bash Copy
```
# Để tạo mã TypeScript/JavaScript
npx playwright codegen https://www.saucedemo.com/
```

Hình ảnh đầu tiên của Codegen

Thực hiện các hành động của bạn. Trong cửa sổ trình duyệt vừa mở, hãy thực hiện quy trình đăng nhập tiêu chuẩn:
- Nhập standard_user vào trường tên người dùng.
- Nhập secret_sauce vào trường mật khẩu.
- Nhấp vào nút "Login".
Xem mã xuất hiện. Khi bạn thực hiện những hành động này, bạn sẽ thấy cửa sổ Playwright Inspector được điền với mã sạch, sẵn sàng sử dụng. Mã Typescript đã được tạo:
typescript Copy
```
import { test, expect } from '@playwright/test';
```

test('test', async ({ page }) => {
await page.goto('https://www.saucedemo.com/');
await page.locator('[data-test="username"]').click();
await page.locator('[data-test="username"]').fill('standard_user');
await page.locator('[data-test="password"]').click();
await page.locator('[data-test="password"]').fill('secret_sauce');
await page.locator('[data-test="login-button"]').click();
});

Copy

### Mã kiểm thử được tạo trong Playwright Inspector bên phải
Bây giờ bạn đã có một đoạn mã hoạt động mà bạn có thể sao chép trực tiếp vào tập tin kiểm thử của mình.

## 3. Tại Sao Điều Này Sẽ Cách Mạng Hóa Quy Trình Làm Việc Của Bạn
### 3.1. Nó Dạy Các Phương Pháp Tốt Nhất Cho Các Bộ Chọn
Đây là tính năng bị đánh giá thấp nhất của Codegen. Nó không chỉ đơn giản là lấy lớp CSS hoặc ID đầu tiên mà nó tìm thấy. Nó phân tích phần tử và tạo ra bộ chọn mạnh mẽ nhất, ưu tiên vai trò, văn bản và các trường giữ chỗ. Nó dạy bạn cách viết các bộ chọn tốt hơn.

### 3.2. Nó Tăng Tốc Độ Tạo Kiểm Thử Đáng Kể
Đối với các luồng người dùng đơn giản, bạn có thể tạo ra 80% mã kiểm thử của mình chỉ trong vài giây. Điều này cho phép bạn tập trung năng lượng vào những phần quan trọng nhất của kiểm thử: thêm các khẳng định, xử lý dữ liệu động và cấu trúc mã của bạn.

### 3.3. Nó Có Thể Ghi Lại Các Phiên Đăng Nhập Đã Xác Thực
Đây là một mẹo cấp pro. Các lần đăng nhập lặp lại là một nỗi đau. Codegen có thể lưu trạng thái xác thực của bạn (cookie và bộ nhớ cục bộ) để bạn có thể bắt đầu phiên ghi âm tiếp theo đã đăng nhập.

**Để lưu trạng thái của bạn sau khi đăng nhập:**
```bash
npx playwright codegen --save-storage=auth.json https://www.saucedemo.com/

Để bắt đầu một phiên mới đã đăng nhập:

bash Copy

npx playwright codegen --load-storage=auth.json https://www.saucedemo.com/inventory.html

4. Kết Luận: Một Công Cụ Cần Thiết, Không Phải Là Một Cái Nạng

Playwright Codegen không được thiết kế để thay thế hoàn toàn nhu cầu viết mã. Bạn sẽ luôn cần tinh chỉnh kịch bản được tạo ra, thêm các khẳng định mạnh mẽ và cấu trúc nó trong một bộ kiểm thử phù hợp.

Tuy nhiên, như một công cụ để tăng tốc độ tạo ra các bài kiểm thử ban đầu, học các bộ chọn theo phương pháp tốt nhất, và nhanh chóng gỡ lỗi các bộ chọn, nó hoàn toàn không có đối thủ. Nó loại bỏ phần tẻ nhạt nhất của tự động hóa UI và cho phép bạn tập trung vào những gì thực sự quan trọng: đảm bảo chất lượng. Nếu bạn là một phần của bất kỳ đội nào làm việc với Playwright, việc đưa codegen vào quy trình làm việc hàng ngày của bạn là điều không cần bàn cãi.

Các Thực Hành Tốt Nhất

Lưu trữ các phiên đã xác thực để tối ưu hóa thời gian ghi âm.
Sử dụng các bộ chọn mạnh mẽ để đảm bảo tính ổn định của các bài kiểm thử.
Tinh chỉnh mã được tạo ra để phù hợp với phong cách lập trình của dự án.

Những Cạm Bẫy Thường Gặp

Phụ thuộc quá nhiều vào mã được tạo ra. Hãy nhớ rằng bạn vẫn cần phải hiểu và tinh chỉnh mã.
Không kiểm tra các trường hợp đặc biệt. Đảm bảo kiểm tra các tình huống không lường trước được.

Mẹo Tối Ưu Hiệu Suất

Giảm thiểu các thao tác lặp đi lặp lại trong các bài kiểm thử của bạn.
Sử dụng async/await hợp lý để tối ưu hóa hiệu suất.

Câu Hỏi Thường Gặp (FAQ)

1. Playwright Codegen có miễn phí không?

Có, Playwright Codegen là một phần của thư viện Playwright miễn phí.

2. Tôi có thể sử dụng Playwright Codegen với ngôn ngữ nào?

Playwright hỗ trợ TypeScript và JavaScript, bạn có thể tạo mã cho cả hai ngôn ngữ này.

3. Codegen có thể làm gì ngoài việc ghi lại hành động?

Ngoài việc ghi lại hành động, Codegen cũng giúp tạo ra mã kiểm thử chất lượng cao và dạy bạn cách sử dụng các bộ chọn hiệu quả.

Liên Kết Tài Nguyên

Kết luận

Hãy bắt đầu khám phá Playwright Codegen ngay hôm nay để nâng cao quy trình tự động hóa kiểm thử của bạn và tiết kiệm thời gian quý giá!

Ngừng Viết Mã Boilerplate: Cách Playwright Codegen Thay Đổi Quy Trình Tự Động Hóa Kiểm Thử