Claude Skill MartKhám phá skillSkill là gì?
 
← Về danh sách

Kiểm thử Web App (Playwright)

Chính thức

Skill chính thức giúp Claude dùng Playwright mở web app cục bộ để click, chụp ảnh màn hình và đọc console log nhằm kiểm thử frontend.

Lập trìnhTrung cấp★ 167,132⑂ 19,920Điểm AI 9/10Cập nhật lần cuối: 7 thg 8, 2026

Skill này làm gì

Đây là skill chính thức của Anthropic cho phép Claude Code kiểm thử ứng dụng web đang chạy trên máy bạn bằng trình duyệt thật (Chromium ở chế độ headless).

  • Viết script Playwright thuần Python phù hợp với từng tình huống.
  • Tự quản lý server: script kèm theo scripts/with_server.py khởi động dev server (cả backend + frontend cùng lúc), chờ port sẵn sàng, chạy automation rồi dọn dẹp tiến trình.
  • Mẫu "trinh sát rồi hành động": chờ networkidle → chụp ảnh/kiểm tra DOM → xác định selector → thực thi, giúp tránh lỗi "không tìm thấy element" trên SPA động.
  • Thu thập dữ liệu debug: ảnh full-page, log console, ví dụ khám phá button/link/input.

Phù hợp với ai

  • Lập trình viên frontend dùng React/Vue/Svelte muốn kiểm tra UI tự động
  • Dev full-stack muốn Claude tự xác nhận "sửa code rồi thì trên giao diện có chạy không"
  • Nhóm cần nhanh chóng tạo bản nháp test E2E hoặc script kiểm tra hồi quy
  • Người kiểm thử prototype HTML tĩnh qua URL file://

Ví dụ sử dụng

  1. Kiểm thử luồng đăng nhập: "Chạy npm run dev ở port 5173, nhập tài khoản test và chụp ảnh xem dashboard có hiện không" → skill dùng with_server.py, điền form, lưu ảnh vào /tmp.
  2. Truy vết lỗi console: "Vào trang là có lỗi đỏ trong console, tìm nguyên nhân" → script gắn listener console, thu log và chỉ ra file gây lỗi.
  3. Test đồng thời backend + frontend: bật backend (3000) và frontend (5173) cùng lúc để kiểm tra end-to-end dữ liệu API hiển thị đúng.

· · · Hướng dẫn cài đặt · · ·

Cài vào ứng dụng Claude (không cần terminal)
  1. Tải tệp ZIP bằng nút bên dưới.
  2. Trong Claude, mở Settings → Capabilities và bật 'Code execution and file creation'. (chỉ một lần)
  3. Vào Customize → Skills → + → 'Upload a skill' rồi tải tệp ZIP lên.
↓ Tải ZIP
Cài vào Claude Code

Để Claude làm — dán câu dưới đây vào Claude Code

Hãy cài skill mình tìm thấy trên Claude Skill Mart.
Copy thư mục skills/webapp-testing từ repo GitHub anthropics/skills vào ~/.claude/skills/webapp-testing/ của mình.
Sau khi cài xong, cho mình biết skill này làm được gì trong một câu.

Cài bằng lệnh thủ công

git clone https://github.com/anthropics/skills.git /tmp/anthropic-skills && mkdir -p ~/.claude/skills && cp -r /tmp/anthropic-skills/skills/webapp-testing ~/.claude/skills/

⚠ Đây là skill do người khác tạo. Hãy kiểm tra repo gốc trước khi cài.

  1. Chuẩn bị: kiểm tra đã có Python 3 và Node.js (python3 --version).
  2. Cài Playwright: chạy pip install playwright rồi python -m playwright install chromium để tải trình duyệt.
  3. Tạo thư mục skill: mkdir -p ~/.claude/skills
  4. Clone repo: git clone https://github.com/anthropics/skills.git /tmp/anthropic-skills
  5. Copy skill: cp -r /tmp/anthropic-skills/skills/webapp-testing ~/.claude/skills/
  6. Kiểm tra: ls ~/.claude/skills/webapp-testing phải thấy SKILL.md, scripts/, examples/.
  7. Sử dụng: mở Claude Code trong thư mục dự án và yêu cầu ví dụ "khởi động dev server và chụp ảnh trang đăng nhập", skill sẽ tự được gọi.
Xem mã nguồn trên GitHub ↗