Wiki

← Tất cả bài wiki

Playwright VS Code Extension (Run, debug, pick locator ngay trong editor)

automationplaywright

Extension Playwright Test for VS Code (chính chủ Microsoft) đưa toàn bộ vòng đời test vào editor: nút play/debug cạnh từng test, breakpoint chuẩn VS Code, Pick Locator, Record new test và mở trace sau khi chạy. Đây là công cụ số 1 cho workflow hằng ngày khi viết Playwright bằng TypeScript/JavaScript.

Khái niệm & Bản chất

  • Extension id ms-playwright.playwright — cài từ Marketplace, tích hợp vào Testing sidebar của VS Code thành cây test có nút chạy/debug.
  • Mang debug thật của VS Code vào test: breakpoint theo dòng code, soi biến, call stack — mạnh hơn Inspector ở khâu soi logic JS.
  • Tích hợp cả codegen (Record new / Record at cursor), Pick Locator, chọn project/browser và mở trace — hầu như không cần rời editor.
  • Nếu khởi tạo project bằng npm init playwright@latest, wizard có option cài sẵn extension này.

Cách hoạt động & API chính

  • Nút ▶ cạnh mỗi test/describe để run, icon con bọ để debug — debug dùng đúng debugger VS Code: breakpoint, watch biến, step into/over.
  • Pick Locator (toolbar hoặc command palette): mở browser thật, click element → locator gợi ý copy vào clipboard, dán thẳng vào test.
  • Record new sinh test mới bằng codegen; Record at cursor ghi thao tác chèn vào đúng vị trí con trỏ trong test đang viết.
  • Sidebar cho phép tick chọn project (chromium/webkit...), toggle show browser (headed), xem error + expect diff ngay dưới test fail.
  • Command palette (Cmd/Ctrl+Shift+P → gõ 'Playwright'): Run Test, Debug Test, Pick Locator, Record New, Show Trace — đủ cho mọi thao tác.

Ví dụ & Cú pháp thực tế

  • Cài đặt: mở Extensions → tìm 'Playwright Test for VSCode' (publisher Microsoft, id ms-playwright.playwright) → Install.
  • Debug một test: - Testing sidebar → tick project chromium. - Đặt breakpoint (F9) tại dòng await page.getByRole('button', ...).click(). - Click icon debug cạnh test → F10 step qua từng lệnh, hover soi biến, xem page state.
  • Lấy locator mà không rời editor: - Cmd/Ctrl+Shift+P → 'Playwright: Pick Locator' → browser mở ra → click nút 'Thanh toán' → paste locator vào test.
  • Cấu hình env mặc định cho extension: ``jsonc // .vscode/settings.json { // Trỏ env cho các lần run/debug từ editor "playwright.env": { "BASE_URL": "https://ecom-dev.hoctest.com" } } ``

Best practices & Khi nào dùng

  • Phân vai rõ ràng: breakpoint VS Code khi cần soi biến/logic JS phức tạp; Inspector/UI mode khi cần soi action-level và DOM snapshot.
  • Dùng playwright.env trong settings để run từ editor luôn trỏ đúng env dev — tránh test nhầm production.
  • Record at cursor cực tiện khi đang viết dở test cần chèn nhanh một thao tác — không phải mở codegen riêng.
  • Filter cây test theo project/tag để chạy đúng nhóm; kết hợp profile headed khi cần nhìn trang thật render.

Gotchas, So sánh & Lưu ý

  • Extension chỉ làm việc tốt với Playwright Test runner chính chủ; project wrap qua Jest/Cucumber cần extension của framework đó.
  • Sidebar trống không thấy test: kiểm tra extension detect đúng playwright.config.ts (setting playwright.configFile); monorepo có thể cần chỉ đúng folder chứa config.
  • Breakpoint không dừng được code trong page.evaluate() — đoạn đó chạy trong browser, muốn soi phải dùng DevTools hoặc console.log qua page.on('console').
  • Giữ version extension và @playwright/test đồng bộ — lệch version đôi khi gây lỗi detect test hoặc debug không attach được.
  • Extension và UI mode không thay thế nhau: editor tích hợp cho run/debug nhanh, UI mode cho time-travel đầy đủ — nên dùng song song tuỳ việc.