Tự động hóa trình duyệt với Playwright

Để Claude tự viết và chạy script Playwright nhằm kiểm thử website, chụp ảnh màn hình, kiểm tra responsive và luồng đăng nhập.

Lập trìnhTrung cấp★ 3,142⑂ 243Điểm AI 9/10Cập nhật lần cuối: 14 thg 8, 2026

Kỹ năng này làm được gì

Viết script Playwright theo yêu cầu vào /tmp/playwright-test-*.js rồi chạy bằng bộ thực thi run.js kèm theo.
Dùng helper detectDevServers() để phát hiện dev server đang chạy trên máy (ví dụ localhost:3000) trước khi đoán URL.
Mặc định mở trình duyệt hiển thị (không headless); có mẫu sẵn cho ảnh chụp toàn trang, so sánh nhiều viewport, luồng đăng nhập, kiểm tra liên kết.
Áp dụng thứ tự locator hiện đại getByRole → getByLabel → getByText → getByTestId và assertion tự chờ, tránh sleep cố định hay networkidle.
Cấu hình linh hoạt qua biến môi trường: PW_BROWSER, PW_CHANNEL, PW_HEADLESS, SLOW_MO, PW_SCRIPT_DIR, PW_ARTIFACT_DIR.

Phù hợp với ai

Lập trình viên frontend/fullstack muốn kiểm tra nhanh giao diện trước khi deploy.
Kỹ sư QA cần bản nháp script E2E để chỉnh sửa thay vì viết từ đầu.
Người phải tạo bộ ảnh chụp desktop/mobile định kỳ cho thiết kế hoặc báo cáo.
Yêu cầu: Node.js 20+, npm và kết nối mạng lần đầu để tải Playwright + Chromium.

Ví dụ sử dụng

"Chụp full-page trang chủ dev server ở 1440x900 và 390x844" → nhận hai file PNG theo từng viewport.
"Đăng nhập /login bằng tài khoản test và xác nhận vào được dashboard" (truyền TEST_EMAIL, TEST_PASSWORD qua biến môi trường) → kiểm tra cả URL chuyển hướng và phần tử sau đăng nhập.
"Giữ lại script trong thư mục playwright-tests của dự án" → chạy với PW_SCRIPT_DIR=./playwright-tests để tái sử dụng.

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

Dùng thử ngay, không cần cài

Dán đoạn dưới vào Claude là dùng được skill này mà không cần cài đặt.

Hãy đọc hướng dẫn trong tệp này và làm theo để giúp mình:
https://raw.githubusercontent.com/lackeyjb/playwright-skill/HEAD/skills/playwright-skill/SKILL.md

Mình muốn: (viết việc bạn cần ở đây)

Nếu Claude không mở được liên kết, hãy mở liên kết và copy nội dung vào rồi dán.

↓ Thấy hữu ích thì tải ZIP bên dưới và cài. Sau đó skill tự chạy, không phải dán lại mỗi lần.

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.

↓ 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/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 && mkdir -p ~/.claude/skills && 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 20 trở lên: chạy node -v trong terminal.
Tải mã nguồn: git clone https://github.com/lackeyjb/playwright-skill.git /tmp/playwright-skill
Sao chép skill vào thư mục Claude: mkdir -p ~/.claude/skills && cp -r /tmp/playwright-skill/skills/playwright-skill ~/.claude/skills/
Cài trình duyệt lần đầu: cd ~/.claude/skills/playwright-skill && npm run setup (có thể mất vài phút để tải Chromium).
Nếu cần Firefox/WebKit, chạy thêm npm run install-all-browsers.
Khởi động lại Claude Code và yêu cầu ví dụ: "Dùng Playwright kiểm thử website của tôi".
Muốn dùng riêng cho một dự án, ở bước 3 hãy copy vào <project>/.claude/skills/.

Xem mã nguồn trên GitHub ↗Giấy phép: MIT