VSCode Extension
Hướng dẫn sử dụng Playwright Test for VSCode
Giới thiệu
Extension Playwright Test for VS Code mang sức mạnh của Playwright Test trực tiếp vào trình soạn thảo của bạn, cho phép chạy, debug và tạo các test case với trải nghiệm giao diện trực quan. Hướng dẫn này sẽ giúp bạn thiết lập extension và sử dụng các tính năng cốt lõi để tối ưu quy trình kiểm thử end-to-end.
Yêu cầu hệ thống
Trước khi bắt đầu, hãy đảm bảo bạn đã cài đặt:
- Node.js (khuyến nghị phiên bản LTS)
- Visual Studio Code
Bắt đầu
1. Cài đặt và thiết lập
Bước 1: Cài đặt Extension
- Mở Extensions view trong VS Code bằng cách nhấn
Ctrl+Shift+X(Windows/Linux) hoặcCmd+Shift+X(Mac) - Tìm kiếm "Playwright"
- Cài đặt extension chính thức từ Microsoft
Bước 2: Cài đặt Playwright
Lưu ý: Bỏ qua bước này nếu bạn đã Cài đặt project playwright trước đó
- Mở Command Palette bằng cách nhấn
Ctrl+Shift+P(Windows/Linux) hoặcCmd+Shift+P(Mac) - Chạy lệnh: Test: Install Playwright
- Chọn trình duyệt
Chọn các trình duyệt bạn muốn sử dụng cho các test case (ví dụ: Chromium, Firefox, WebKit). Bạn cũng có thể thêm GitHub Actions workflow để chạy test trên CI. Các cài đặt này có thể thay đổi sau trong file
playwright.config.ts.
2. Mở Testing Sidebar
Nhấp vào biểu tượng Testing trên thanh Activity Bar của VS Code để mở Test Explorer. Tại đây, bạn sẽ tìm thấy các test case của mình cùng với thanh sidebar Playwright để quản lý các project, công cụ và cài đặt.
Các tính năng cốt lõi
Chạy Test
Chạy một test đơn lẻ
Nhấp vào biểu tượng "play" màu xanh bên cạnh test bạn muốn chạy. Nút play sẽ chuyển thành dấu kiểm màu xanh nếu test pass hoặc dấu X màu đỏ nếu test fail. Thời gian chạy test sẽ hiển thị bên cạnh tên test.
Chạy tất cả test
Bạn có thể chạy tất cả test ở các cấp độ khác nhau:
- Nhấp vào biểu tượng play bên cạnh file test để chạy tất cả test trong file đó
- Nhấp vào biểu tượng play ở đầu Test Explorer để chạy tất cả test trong toàn bộ project
Chạy trên nhiều trình duyệt
Trong thanh sidebar Playwright, đánh dấu các checkbox cho các projects (trình duyệt) bạn muốn test. Các project trong Playwright đại diện cho các cấu hình trình duyệt khác nhau - mỗi project thường tương ứng với một trình duyệt cụ thể với các cài đặt riêng.
Hiển thị trình duyệt
Để xem test chạy trực tiếp trong cửa sổ trình duyệt, bật tùy chọn Show Browser trong sidebar. Tắt để chạy ở chế độ headless (test chạy ở nền mà không mở cửa sổ trình duyệt).
Debug Test
Extension VS Code cung cấp các công cụ debug mạnh mẽ để giúp bạn xác định và sửa lỗi trong test.
Sử dụng Breakpoints
- Đặt breakpoint bằng cách nhấp vào lề bên trái số dòng
- Nhấp chuột phải vào test và chọn Debug Test
- Test sẽ tạm dừng tại breakpoint, cho phép bạn kiểm tra biến và debug từng bước
Live Debugging
Với Show Browsers được bật, nhấp vào một locator trong code của bạn. Playwright sẽ highlight phần tử tương ứng trong trình duyệt, giúp dễ dàng xác minh locator.
Xem thông báo lỗi
Nếu test fail, extension sẽ hiển thị thông báo lỗi chi tiết, bao gồm giá trị mong đợi so với giá trị nhận được và call log đầy đủ, trực tiếp trong trình soạn thảo.
Fix with AI
Khi test fail, nhấp vào biểu tượng sparkle bên cạnh lỗi để nhận gợi ý sửa lỗi từ Copilot. Copilot phân tích lỗi và đề xuất thay đổi code để giải quyết vấn đề.
Debug với Trace Viewer
Để debug toàn diện, bật tùy chọn Show Trace Viewer trong sidebar Playwright. Khi test hoàn thành, một trace chi tiết sẽ tự động mở, cung cấp timeline đầy đủ về quá trình thực thi test.
Trace Viewer đặc biệt hữu ích cho:
- Phân tích từng bước: Điều hướng qua từng action test thực hiện với timestamp chính xác
- Kiểm tra DOM: Xem DOM snapshots tại bất kỳ thời điểm nào trong quá trình test
- Theo dõi Network: Kiểm tra tất cả network requests và responses
- Console logs: Truy cập tất cả console messages và errors từ trình duyệt
- Source mapping: Nhảy trực tiếp đến source code đã thực thi mỗi action
- Visual debugging: Xem screenshots và hiểu những gì người dùng đã thấy ở mỗi bước
Tạo Test với CodeGen
CodeGen là công cụ tạo test mạnh mẽ của Playwright, tự động tạo code test bằng cách ghi lại các tương tác của bạn với trang web.
Record một test mới
- Nhấp vào Record new trong sidebar
- Một cửa sổ trình duyệt sẽ mở
- Khi bạn tương tác với trang, Playwright sẽ tự động tạo code test
- Bạn cũng có thể tạo assertions từ thanh công cụ recording
Record at Cursor
Đặt con trỏ bên trong một test đã có và nhấp Record at cursor để thêm các action mới tại vị trí đó.
Pick a Locator
Sử dụng công cụ Pick locator để nhấp vào bất kỳ phần tử nào trong trình duyệt đã mở. Playwright sẽ xác định locator tốt nhất và copy nó vào clipboard, sẵn sàng để paste vào code.
Các tính năng nâng cao
Project Dependencies
Sử dụng project dependencies để định nghĩa các setup test chạy trước các test khác. Ví dụ, bạn có thể tạo một login test chạy trước, sau đó tái sử dụng trạng thái đã xác thực đó cho nhiều test mà không cần đăng nhập lại.
Global Setup
Đối với các tác vụ cần chạy một lần trước tất cả test (như seed database), sử dụng Global Setup. Bạn có thể kích hoạt global setup và teardown thủ công từ sidebar Playwright.
Nhiều cấu hình
Nếu bạn có nhiều file playwright.config.ts, bạn có thể chuyển đổi giữa chúng bằng biểu tượng bánh răng trong sidebar Playwright. Điều này cho phép bạn dễ dàng làm việc với các test suite hoặc môi trường khác nhau.
Bảng tham khảo nhanh
| Hành động | Cách thực hiện trong VS Code |
|---|---|
| Cài đặt Playwright | Command Palette → Test: Install Playwright |
| Chạy một test | Nhấp vào biểu tượng "play" bên cạnh test |
| Debug một test | Đặt breakpoint, nhấp chuột phải vào test → Debug Test |
| Hiển thị trình duyệt trực tiếp | Bật Show Browsers trong sidebar Playwright |
| Record test mới | Nhấp Record new trong sidebar Playwright |
| Pick một locator | Nhấp Pick locator trong sidebar Playwright |
| Xem test trace | Bật Show Trace Viewer trong sidebar Playwright |
Bước tiếp theo
- Tìm hiểu về playwright.config.(ts|js)
- Tìm hiểu thêm về Trace Viewer
- Viết test sử dụng web-first assertions, page fixtures và locators
Tài nguyên
Lưu ý: Hướng dẫn này dựa trên phiên bản Playwright v1.38 trở lên.