1. Tóm tắt nhanh & màn hình bạn sẽ debug
Chào bạn mới! Test tự động màu đỏ trên màn hình luôn khiến người mới bối rối: nhìn vào một đống chữ tiếng Anh dài, không biết nên đọc từ đâu, nên bấm nút gì. Cảm giác đó hoàn toàn bình thường — kể cả tester lâu năm cũng cần một quy trình rõ ràng để không đoán mò. Bài này sẽ đưa bạn qua đúng quy trình đó: đọc lỗi, xem trace, chạy debug trực tiếp, thêm log, cô lập bước fail, và cuối cùng là phân loại đúng nguyên nhân. Chúng ta thực hành trên màn thanh toán ShopEasy — một luồng quen thuộc, dễ hình dung, có code Playwright chạy được thật.
2. Vấn đề: test đỏ, và không biết bắt đầu từ đâu
Hãy hình dung: bạn vừa chạy npx playwright test, terminal in ra một khối chữ đỏ dài, kèm dòng '1 failed'. Phản xạ của nhiều người mới là hoảng, đọc lướt qua rồi đoán bừa — có thể là do mạng chậm, có thể do 'trình duyệt bị lỗi gì đó'. Đoán mò như vậy khiến bạn sửa sai chỗ, mất thời gian, và tệ hơn là báo nhầm bug cho đội phát triển trong khi lỗi thực ra nằm ở chính test.
Gỡ lỗi hiệu quả không phải là 'may mắn đoán trúng' — mà là một quy trình lặp lại được: (1) đọc kỹ thông báo lỗi để biết chính xác nó fail ở đâu và vì sao, (2) xem lại diễn biến bằng Trace Viewer hoặc chạy trực tiếp bằng --debug, (3) thu hẹp phạm vi bằng cách cô lập đúng bước/test đang fail, (4) phân loại nguyên nhân: lỗi thật, test viết sai, hay flaky. Nếu bạn muốn học bài bản cả automation lẫn cách làm việc chuyên nghiệp như một tester đi làm thật sự, một khoá học có mentor hướng dẫn từng bước — như https://cybersoft.edu.vn/software-testing-chuyen-nghiep-tu-zero-toi-duoc-nhan-viec-manual-automation-testing/ — sẽ giúp bạn rút ngắn thời gian tự mò mẫm.
3. Đọc thông báo lỗi (error message) đúng cách
Thông báo lỗi của Playwright không phải là 'mớ chữ hù dọa' — nó có cấu trúc rõ ràng, và mỗi phần trả lời đúng 1 câu hỏi. Locator cho biết Playwright đang tìm phần tử nào. Expected cho biết bạn mong đợi điều gì (ví dụ: 'visible' — phần tử phải hiển thị). Received cho biết Playwright thực sự thấy gì (ví dụ: không tìm thấy phần tử nào cả). Timeout cho biết nó đã chờ bao lâu trước khi bỏ cuộc. Đọc đủ 4 phần này trước khi đoán nguyên nhân sẽ tiết kiệm rất nhiều thời gian.
Với ví dụ ở màn thanh toán ShopEasy: thông báo cho biết Playwright chờ locator('#order-success') trở nên 'visible' nhưng nhận về 'element(s) not found' sau 5000ms. Chỉ riêng thông tin này đã thu hẹp phạm vi rất nhiều: vấn đề nằm ở việc phần tử báo thành công không xuất hiện đúng lúc — có thể do API xử lý đơn hàng chậm, hoặc id đã đổi, hoặc luồng thanh toán thực sự bị lỗi. Bước tiếp theo là xem lại trace để biết chính xác cái nào trong ba khả năng đó.
4. Trace Viewer: bật --trace on & đọc dấu vết
Thông báo lỗi cho bạn biết CÁI GÌ đã sai, nhưng Trace Viewer cho bạn thấy TOÀN BỘ diễn biến — từng hành động, ảnh chụp màn hình tại mỗi bước, video ghi lại, các yêu cầu mạng, và log console. Đây là công cụ mạnh nhất khi test fail trên CI, nơi bạn không thể ngồi nhìn trực tiếp trình duyệt như ở máy mình.
▶ Bước 1: Bật ghi trace khi chạy test bằng cờ --trace on (hoặc bật sẵn trong playwright.config.js).
▶ Bước 2: Sau khi chạy xong, mở file trace bằng lệnh npx playwright show-trace trỏ tới đường dẫn trace.zip.
▶ Bước 3: Bấm qua từng bước trong danh sách bên trái, quan sát ảnh chụp/video bên phải để thấy chính xác giao diện tại thời điểm đó.
💬 Bình luận (0)
Chưa có bình luận nào. Hãy là người đầu tiên!