Skill Tự động hóa Trình duyệt Playwright
Skill giúp Claude tự viết và chạy mã Playwright để kiểm thử website, chụp ảnh màn hình, tự động đăng nhập và điền form.
Lập trìnhTrung cấp★ 3,004⑂ 227Điểm AI 9/10Cập nhật lần cuối: 19 thg 12, 2025
Skill này làm được gì
- Tự phát hiện dev server đang chạy trên máy (theo port) nên không cần hardcode URL.
- Viết script Playwright riêng cho từng yêu cầu vào
/tmp/playwright-test-*.jsrồi chạy qua wrapperrun.js, không làm rối thư mục dự án. - Mặc định mở trình duyệt hiển thị (
headless: false) để bạn thấy rõ từng bước. - Có sẵn mẫu code cho các việc phổ biến: chụp ảnh full page, kiểm tra responsive nhiều viewport, luồng đăng nhập, điền và gửi form, dò link hỏng.
- Hỗ trợ hàm tiện ích trong
lib/helpers.js(click an toàn có retry, xử lý banner cookie, trích dữ liệu bảng) và chèn HTTP header tùy chỉnh qua biến môi trường. - Nội dung nâng cao (mock network, giữ session, visual regression, giả lập thiết bị di động) tách sang API_REFERENCE.md, chỉ đọc khi cần.
Phù hợp với ai
- Lập trình viên frontend muốn kiểm tra nhanh giao diện trước khi deploy.
- Người không muốn viết lại code E2E từ đầu mỗi lần.
- QA hoặc dev solo cần kiểm tra lặp lại layout responsive, luồng login, trạng thái link.
Ví dụ sử dụng
- "Kiểm tra trang marketing xem có ổn không" → tự tìm dev server, chụp 3 viewport (desktop/tablet/mobile) vào
/tmpvà báo cáo kết quả. - "Test xem đăng nhập có redirect sang dashboard không" → điền email/mật khẩu, submit và xác nhận bằng
waitForURL('**/dashboard'). - "Có link ngoài nào bị hỏng không?" → thu thập mọi
a[href^=http], gửi HEAD request và liệt kê link lỗi kèm status code.
· · · Hướng dẫn cài đặt · · ·
Cài vào ứng dụng Claude (không cần terminal)
- Tải tệp ZIP bằng nút bên dưới.
- Trong Claude, mở Settings → Capabilities và bật 'Code execution and file creation'. (chỉ một lần)
- Vào Customize → Skills → + → 'Upload a skill' rồi tải tệp ZIP lên.
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/playwright-skill từ repo GitHub lackeyjb/playwright-skill vào ~/.claude/skills/playwright-skill/ 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/lackeyjb/playwright-skill.git /tmp/playwright-skill && cp -r /tmp/playwright-skill/skills/playwright-skill ~/.claude/skills/ && cd ~/.claude/skills/playwright-skill && npm run setup⚠ Đây là skill do người khác tạo. Hãy kiểm tra repo gốc trước khi cài.
- Kiểm tra Node.js (khuyến nghị 18+) bằng
node -v. - Clone repo:
git clone https://github.com/lackeyjb/playwright-skill.git - Sao chép skill vào thư mục Claude:
mkdir -p ~/.claude/skills && cp -r playwright-skill/skills/playwright-skill ~/.claude/skills/ - Chạy cài đặt một lần duy nhất:
cd ~/.claude/skills/playwright-skill && npm run setup(tải Playwright + Chromium, có thể mất vài phút). - Khởi động lại Claude Code và thử câu lệnh như "chụp ảnh trang localhost giúp mình" để xác nhận skill đã nạp.
- Nếu lỗi module, chạy lại
npm run setup; nếu trình duyệt không mở, hãy kiểm tra môi trường có màn hình (display) hay không.
Xem mã nguồn trên GitHub ↗Giấy phép: MIT