Một ảnh chụp màn hình đẹp chưa xác nhận được luồng người dùng hoạt động. Kiểm thử cần đầu vào cụ thể, thao tác có thể lặp lại và bằng chứng cho từng kết luận.
Kết quả cần đạt
Một báo cáo ngắn cho một luồng đã chọn: môi trường, bước thực hiện, kết quả mong đợi, kết quả thực tế và bằng chứng khi lỗi xuất hiện. Skill webapp-testing cung cấp quy trình quan sát ứng dụng, thao tác bằng Playwright, chụp màn hình và đọc browser logs.
Chuẩn bị môi trường
- Ứng dụng chạy được ở local và có địa chỉ, cổng cụ thể.
- Môi trường Python với Playwright và trình duyệt tương ứng đã được cấu hình riêng.
- Dữ liệu thử và tài khoản thử nếu luồng cần đăng nhập; xác định thao tác nào được phép ghi hoặc xóa dữ liệu.
- Cài đủ tệp của skill, gồm
scripts/with_server.pyvà các ví dụ tham khảo. ĐọcLICENSE.txtcủa skill.
1. Chọn một luồng có tiêu chí rõ ràng
Ví dụ: nhập một từ khóa vào ô tìm kiếm, mở kết quả và quay lại danh sách. Ghi trước điều kiện đạt: kết quả phù hợp xuất hiện, trang chi tiết đúng và bộ lọc không mất khi quay lại.
Áp dụng webapp-testing cho ứng dụng local tại [URL của bạn].
Kiểm tra: tìm kiếm → mở một kết quả → quay lại danh sách.
Nêu dữ liệu thử và tiêu chí đạt trước khi chạy.
Không tạo tài khoản hoặc thay đổi dữ liệu thật.
Báo lỗi kèm bước tái hiện, ảnh hoặc log liên quan.2. Quan sát trước khi thao tác
Để ứng dụng tải xong, quan sát DOM đã render và các điều khiển đang hiển thị. Chọn selector theo vai trò hoặc nhãn rõ ràng, tránh đoán tọa độ hay dùng selector lấy từ một trạng thái màn hình cũ.
Runbook đề xuất chờ networkidle trước khi quan sát ứng dụng động. Với ứng dụng có kết nối mạng liên tục, cần điều kiện sẵn sàng phù hợp với chính ứng dụng và giới hạn thời gian chờ, thay vì chờ vô hạn.
3. Chạy và ghi nhận từng bước
- Chuẩn bị trạng thái ban đầu và dữ liệu thử.
- Thao tác trên một điều khiển, chờ điều kiện kết quả tương ứng.
- So sánh hành vi thực tế với tiêu chí đã đặt.
- Lưu ảnh hoặc log khi cần chứng minh vấn đề; ghi URL và kích thước màn hình thử.
Nếu agent cần tự quản lý server, yêu cầu xem trợ giúp của helper trước:
python3 scripts/with_server.py --helpChạy lệnh từ thư mục skill đã cài. Chỉ chọn lệnh khởi động server sau khi đã đọc hướng dẫn của dự án; không áp dụng một lệnh mẫu cho mọi repository.
4. Kiểm tra kết luận
Chạy lại đúng bước gây lỗi sau khi đưa ứng dụng về trạng thái ban đầu. Nếu server không lên, trình duyệt thiếu hoặc URL sai, báo lỗi môi trường và phần chưa kiểm tra được; không kết luận chức năng ứng dụng hỏng.
Một báo cáo hữu ích có thể ghi: “Tìm kiếm trả đúng kết quả; sau khi Back, bộ lọc bị xóa. Tái hiện ở màn hình 390 px với cùng truy vấn.” Chỉ ghi kết quả này khi thực sự quan sát được, không dùng làm bằng chứng cho lần chạy chưa thực hiện.
Tiếp theo
Đọc runbook, chọn agent và dùng Copy Agent Prompt trong thư viện. Bắt đầu với một luồng quan trọng; mở rộng phạm vi khi đã có tiêu chí và dữ liệu thử ổn định.
A polished screenshot does not prove that a user flow works. Testing needs specific inputs, repeatable actions and evidence for each conclusion.
Define the result
A concise report for one chosen flow: environment, steps, expected behavior, actual behavior and evidence when something fails. webapp-testing provides a workflow for inspecting applications, interacting through Playwright, taking screenshots and reading browser logs.
Prepare the environment
- A running local application with a known URL and port.
- A separately configured Python environment with Playwright and its browser.
- Test data and accounts where necessary; explicitly scope actions that write or delete data.
- The complete skill inventory, including
scripts/with_server.pyand examples. Review the skill’sLICENSE.txt.
1. Choose a flow with clear criteria
For example: enter a search term, open a result and return to the list. Set pass criteria in advance: relevant results appear, the correct detail opens and filters remain after returning.
Use webapp-testing on my local app at [your URL].
Check: search → open one result → return to the list.
State test inputs and pass criteria before running.
Do not create accounts or change real data.
Report issues with reproduction steps and relevant screenshots or logs.2. Inspect before interacting
Let the application load, inspect the rendered DOM and identify visible controls. Prefer role- or label-based selectors over guessed coordinates or selectors taken from an outdated screen state.
The runbook suggests waiting for networkidle before inspecting a dynamic app. Applications with persistent connections need an appropriate readiness condition and bounded timeout instead of waiting indefinitely.
3. Exercise and record
- Prepare a known starting state and test data.
- Interact with one control and wait for its expected result.
- Compare observed behavior with the agreed criteria.
- Save screenshots or logs when needed as evidence, noting the URL and tested viewport.
If the agent must manage a server, inspect the helper’s usage first:
python3 scripts/with_server.py --helpRun this from the installed skill folder. Choose the server command only after reading the project’s instructions; one example command does not fit every repository.
4. Verify the conclusion
Reset the app to its starting state and repeat the failing step. If the server is unavailable, the browser is missing or the URL is wrong, report the environment issue and untested scope rather than declaring the application broken.
A useful report might say: “Search returns the correct result; Back clears the filter. Reproduced at 390 px with the same query.” Record that outcome only after observing it; an example is not evidence of an actual run.
Next step
Read the runbook, choose your agent and use Copy Agent Prompt in the library. Start with one important flow and expand once criteria and test data are stable.