Claude Skill MartKhám phá skillCâu dùng ngayHọc qua videoDùng terminalSkill là gì?
← Về danh sách

Kỹ năng Playwright toàn diện

Bộ hướng dẫn thực chiến để viết, gỡ lỗi và mở rộng test Playwright: E2E, API, component, visual, accessibility và CI/CD.

Lập trìnhTrung cấp★ 378⑂ 62Điểm AI 9/10Cập nhật lần cuối: 6 thg 9, 2026

Làm được gì

  • Áp đặt 10 "quy tắc vàng" khi viết test Playwright: ưu tiên getByRole(), không dùng page.waitForTimeout(), dùng assertion tự retry, cô lập từng test, cấu hình baseURL, retries 2 trên CI, trace on-first-retry...
  • Cung cấp mục lục hơn 50 hướng dẫn tham chiếu: locator, assertion, fixture, page object, mock network, xác thực, visual regression, accessibility, API testing, CI/CD.
  • Hướng dẫn quy trình gỡ lỗi: chẩn đoán test flaky, tra cứu thông báo lỗi, phân tích trace.zip bằng CLI.
  • Có công thức riêng cho Next.js, React, Vue/Nuxt, Angular và hướng dẫn chuyển đổi từ Cypress hoặc Selenium.
  • Bao gồm hạ tầng CI: GitHub Actions, GitLab CI, Docker, sharding, báo cáo — kèm lời khuyên bảo mật ghim dependency bằng commit SHA/digest.
  • Cập nhật tính năng Playwright 1.59–1.63 (test lock, locator.visible(), reporter perfetto, WebAuthn passkey...).

Dành cho ai

  • QA engineer và lập trình viên front-end đang xây dựng hoặc mở rộng test E2E với Playwright
  • Nhóm muốn di chuyển từ Cypress/Selenium sang Playwright
  • Người thường xuyên mất thời gian vì test chạy lúc được lúc không trên CI
  • Dự án TypeScript hoặc JavaScript cần chuẩn hóa kiến trúc test

Ví dụ sử dụng

  1. "Viết test E2E cho luồng đăng nhập" → sinh test cô lập dùng storageState và selector theo role.
  2. "Test này chỉ fail trên CI" → theo hướng dẫn flaky-tests và trace-analysis để mở trace.zip bằng CLI và thay chờ cứng bằng assertion tự retry.
  3. "Chuyển 30 spec Cypress sang Playwright" → dùng bảng đối chiếu from-cypress để đổi lệnh, assertion và tổ chức lại page object.

· · · 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/testdino-hq/playwright-skill/HEAD/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)
  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 SKILL.m từ repo GitHub testdino-hq/playwright-skill vào ~/.claude/skills/testdino-hq-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/testdino-hq/playwright-skill.git ~/.claude/skills/playwright-skill

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

  1. Mở terminal.
  2. Tạo thư mục skill nếu chưa có: mkdir -p ~/.claude/skills
  3. Clone repo vào thư mục skill: git clone https://github.com/testdino-hq/playwright-skill.git ~/.claude/skills/playwright-skill
  4. Kiểm tra các thư mục core/, ci/, pom/, migration/, playwright-cli/ đã được tải về (các liên kết trong SKILL.md phụ thuộc vào chúng).
  5. Khởi động lại Claude Code, rồi yêu cầu ví dụ "giúp tôi viết test Playwright" để skill tự kích hoạt.
  6. Nếu cần chạy test thật, cài Playwright trong dự án: npm init playwright@latest.