Sau khi app vibe-coded nhìn có vẻ chạy được, câu hỏi kế tiếp là: chạy được mấy lần, trên flow nào, và lỗi xảy ra ở đâu. Non-tech user thường dừng ở mức “tôi bấm thử thấy ổn”. Cách đó bắt được lỗi giao diện lớn, nhưng bỏ sót lỗi repeatability: hôm nay nhập data này được, ngày mai nhập data khác thì hỏng.

Playwright nghe như tool của QA engineer. Nhưng trong vibe coding, bạn không cần bắt đầu bằng test suite lớn. Hãy dùng nó như một cái máy quay thao tác: record lại flow, chụp screenshot, lưu trace, và đưa evidence cho agent hoặc dev.

Đừng bắt đầu bằng automation lớn

Sai lầm phổ biến là prompt:

Write full Playwright tests for my app.

Nếu app còn đang đổi từng ngày, test suite lớn sẽ thành cục nợ. Agent có thể tạo 20 test mong manh, dùng selector CSS khó đọc, rồi lần sau UI đổi nhẹ là vỡ hết.

Bắt đầu bằng một flow chính:

Record one browser QA flow:
- open app
- add one booking
- edit booking status
- verify booking appears in the list

Do not cover every edge case yet.

Mục tiêu là có một đường đi reproducible. Khi flow này fail, bạn biết app vừa gãy ở chỗ nào.

Dùng codegen để lấy bước thao tác thật

Playwright có test generator. Khi chạy codegen, bạn thao tác trong browser, Playwright ghi lại các bước. Docs hiện tại nói generator ưu tiên locator theo role, text và test id để locator bền hơn CSS selector thô.

Với non-tech, codegen hữu ích ở ba điểm:

  • Bạn không cần tự viết selector từ đầu.
  • Bạn có file test mô tả đúng thao tác bạn vừa làm.
  • Bạn có thể gửi file đó cho agent và nói “flow này phải pass”.

Prompt cho agent:

Đây là Playwright flow được record từ thao tác thật.
Hãy đọc test này và giải thích bằng tiếng Việt:
- user đang làm gì;
- expected behavior là gì;
- test đang phụ thuộc vào text/selector nào;
- selector nào dễ vỡ.
Chưa sửa app.

Bạn không cần hiểu hết syntax. Bạn cần hiểu test đang bảo vệ hành vi nào.

Trace viewer là bằng chứng tốt hơn lời kể

Khi test fail, đừng chỉ gửi “test fail rồi”. Playwright Trace Viewer cho phép xem lại timeline, screenshot, network request, console message và source liên quan. Đây là bằng chứng tốt hơn rất nhiều so với mô tả bằng trí nhớ.

Bug report tốt:

Flow: add booking.
Expected: booking appears in list.
Actual: submit returns to empty form, list does not update.
Evidence: Playwright trace shows POST /api/bookings returns 201, but UI state remains empty.
Please inspect state update after successful submit. Do not rewrite the form layout.

Câu này khoanh vùng lỗi. Agent ít có lý do để đổi màu button hoặc refactor cả page.

Screenshot không chỉ để nhìn đẹp

Screenshot là artifact review. Với vibe coding, mỗi flow quan trọng nên có ít nhất một screenshot sau khi chạy:

  • empty state;
  • form filled;
  • success state;
  • error state;
  • mobile view;
  • data list sau khi thêm/sửa/xóa.

Nếu agent nói “fixed”, yêu cầu screenshot hoặc trace mới. Không cần tin câu trả lời. Tin evidence.

Prompt:

Run the booking flow and capture screenshots for:
1. empty list
2. form with valid input
3. list after submit
4. mobile width

Then summarize any visual or behavior mismatch.

Nếu tool không chạy được browser, yêu cầu agent viết manual test steps thay vì bịa kết quả.

Selector phải giống ngôn ngữ người dùng

Một test dùng selector kiểu div:nth-child(4) > button rất dễ vỡ. UI đổi spacing một chút là test chết dù behavior vẫn đúng. Với app đang vibe-coded, ưu tiên locator gần với trải nghiệm người dùng:

  • role: button, textbox, link;
  • visible label;
  • accessible name;
  • test id chỉ dùng cho phần khó chọn bằng role/text.

Nếu agent tạo test khó đọc, yêu cầu sửa:

Rewrite selectors to prefer role, label, visible text, or test id.
Avoid brittle CSS selectors unless there is no better option.

Đây là chỗ non-tech vẫn review được. Nếu bạn không hiểu selector trỏ vào đâu, test đó chưa phải handoff tốt.

Chạy ít nhưng đều

Bạn không cần 100 test. Với app nhỏ, bắt đầu bằng 3 test:

  1. Happy path chính.
  2. Một input sai.
  3. Một mobile or empty state.

Ba test này đủ để bắt nhiều lỗi do agent sửa lan. Khi app ổn hơn, thêm test theo bug thật đã từng xảy ra. Đừng viết test cho mọi thứ chỉ vì muốn thấy coverage đẹp.

Chốt lại

Playwright không chỉ dành cho QA engineer. Với vibe coding, dùng nó như máy ghi bằng chứng: flow đã chạy thế nào, fail ở đâu, screenshot ra sao, console/network nói gì. Non-tech user không cần viết test phức tạp, nhưng cần biết yêu cầu evidence thay vì tin lời agent.

Tham khảo