Playwright Codegen: ghi thao tác và tạo bản nháp test cho regression

Playwright Codegen ghi lại thao tác trên trình duyệt, gợi ý locator và sinh mã test. Dùng nó để khởi đầu nhanh, sau đó rà lại locator, assertion và phạm vi từng test trước khi đưa vào regression suite.

Codegen giúp rút ngắn quãng đường từ một luồng manual rõ ràng đến bản nháp test Playwright đầu tiên. Bạn thao tác trực tiếp trên trình duyệt, còn Playwright ghi lại tương tác và sinh mã tương ứng.

Điểm quan trọng: mã được sinh ra nên được xem là bản nháp để review, không phải mặc định là test regression hoàn chỉnh. Trước khi đưa vào suite, QA vẫn cần kiểm tra locator, assertion và mục tiêu kiểm thử của từng test.

Codegen làm được gì?

Theo tài liệu Playwright, Codegen mở hai cửa sổ:

Một cửa sổ trình duyệt để bạn tương tác với ứng dụng. Playwright Inspector để ghi, sao chép và quản lý mã test được sinh ra.

Khi bạn click hoặc điền dữ liệu trên trang, Codegen tự sinh các bước tương ứng. Công cụ phân tích trang đang được render và đề xuất locator, ưu tiên:

Locator theo role Locator theo text Locator theo test id

Nếu locator khớp nhiều phần tử, trình sinh cố gắng cải thiện locator để nhận diện mục tiêu duy nhất, qua đó hỗ trợ giảm nguy cơ test không ổn định.

Codegen cũng cho phép ghi một số assertion cơ bản:

Assert visibility: kiểm tra phần tử đang hiển thị. Assert text: kiểm tra phần tử chứa nội dung cụ thể. Assert value: kiểm tra giá trị của phần tử.

Với QA, đây là cách hữu ích để nhanh chóng chuyển một test case manual đã rõ bước thực hiện và kết quả mong đợi thành mã Playwright có thể tiếp tục chỉnh sửa.

Khởi động Codegen

Dùng lệnh codegen, sau đó truyền URL của trang cần ghi test:

bash npx playwright codegen demo.playwright.dev/todomvc

URL là tùy chọn. Nếu không truyền URL trong lệnh, bạn có thể nhập URL trực tiếp trong cửa sổ trình duyệt được mở ra.

Quy trình ghi một luồng test

Một quy trình ngắn có thể gồm các bước sau:

Mở terminal trong dự án test và chạy lệnh Codegen. Thao tác trên cửa sổ trình duyệt theo luồng cần kiểm thử. Khi cần kiểm tra kết quả, chọn biểu tượng assertion trên thanh công cụ của Inspector. Chọn kiểu assertion phù hợp: visibility, text hoặc value. Click phần tử cần xác nhận trên trang. Khi hoàn tất, bấm Record để dừng ghi. Xem mã đã sinh trong Inspector và bấm Copy để đưa mã vào editor. Nếu cần làm lại từ đầu, bấm Clear để xóa mã hiện tại rồi ghi lại.

Nên bắt đầu bằng một luồng có mục tiêu rõ ràng: precondition, thao tác chính và expected result. Cách này giúp bản ghi dễ đọc và dễ review hơn khi đưa vào codebase.

Rà locator bằng Pick Locator

Sau khi dừng ghi, bạn có thể dùng Codegen để lấy và kiểm tra locator.

Bấm Record để dừng chế độ ghi. Bấm Pick Locator. Rê chuột qua phần tử trong cửa sổ trình duyệt để xem locator và vùng được highlight. Click phần tử cần chọn. Locator sẽ xuất hiện trong locator playground bên cạnh nút Pick Locator. Chỉnh locator nếu cần và quan sát phần tử khớp được highlight. Bấm Copy để sao chép locator vào mã.

Đây là lúc cần review kỹ mã Codegen sinh ra. Một số câu hỏi hữu ích:

Locator có đang nhận diện đúng phần tử cần thao tác hoặc xác nhận không? Locator có thể khớp nhiều phần tử trong cùng trạng thái test không? Assertion có thực sự kiểm tra expected result của test case không? Test có chứa thao tác dò giao diện hoặc bước không liên quan đến mục tiêu kiểm thử không?

Codegen hỗ trợ tạo locator nhanh; QA vẫn cần chịu trách nhiệm về ý nghĩa kiểm thử của locator và assertion đó.

Biến bản ghi thành test có thể review

Giả sử yêu cầu có nội dung:

> Người dùng nhập nội dung công việc và tạo mới. Hệ thống hiển thị công việc đó trong danh sách.

Bạn có thể dùng Codegen để ghi thao tác nhập, thao tác tạo mới và assertion text cho kết quả hiển thị.

Khi review bản nháp, hãy kiểm tra:

Dữ liệu test có phù hợp với mục tiêu kiểm thử hay không. Thao tác có nhắm đúng ô nhập và đúng hành động tạo mới hay không. Assertion có kiểm tra nội dung vừa tạo xuất hiện hay không. Locator của kết quả có đủ cụ thể trong trạng thái test hiện tại hay không. Test có được giữ tập trung vào một mục tiêu nghiệp vụ rõ ràng hay không.

Các trường hợp như dữ liệu để trống, dữ liệu trùng lặp, giới hạn độ dài hay hành vi sau khi tải lại trang cần được quyết định từ yêu cầu sản phẩm và thiết kế test của đội ngũ. Codegen không tự xác định các nhánh kiểm thử đó.

Ghi test với cấu hình mô phỏng và trạng thái xác thực

Tài liệu Playwright cho biết Codegen có thể sinh test với các cấu hình mô phỏng như:

Viewport Thiết bị Chế độ màu Vị trí địa lý Ngôn ngữ Múi giờ

Test generator cũng có thể bảo toàn trạng thái đã xác thực. Phần hướng dẫn nhập môn chỉ giới thiệu khả năng này; quy trình cấu hình chi tiết nằm trong tài liệu Test Generator của Playwright.

Với các luồng yêu cầu đăng nhập, hãy xác định rõ trạng thái cần có trước khi ghi test để bản ghi phản ánh đúng điều kiện chạy của kịch bản.

Checklist trước khi đưa mã Codegen vào regression suite

[ ] Luồng ghi có một mục tiêu kiểm thử rõ ràng. [ ] Locator đã được kiểm tra trên trang và nhận diện đúng mục tiêu. [ ] Assertion khớp với expected result của test case. [ ] Mã không chứa thao tác thừa phát sinh trong lúc dò giao diện. [ ] Dữ liệu và trạng thái cần thiết đã được xác định cho test. [ ] Các nhánh quan trọng ngoài luồng chính đã được xem xét thành test riêng. [ ] Bản ghi đã được đọc lại và chỉnh sửa trước khi đưa vào suite.

Codegen giúp QA đi nhanh ở bước đầu: từ thao tác trên UI đến mã Playwright. Giá trị của test regression vẫn nằm ở bước tiếp theo — chọn locator có chủ đích, đặt assertion đúng và giữ mỗi test tập trung vào điều cần kiểm chứng.