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ùngpage.waitForTimeout(), dùng assertion tự retry, cô lập từng test, cấu hìnhbaseURL, retries 2 trên CI, traceon-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.zipbằ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(), reporterperfetto, 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
- "Viết test E2E cho luồng đăng nhập" → sinh test cô lập dùng
storageStatevà selector theo role. - "Test này chỉ fail trên CI" → theo hướng dẫn flaky-tests và trace-analysis để mở
trace.zipbằng CLI và thay chờ cứng bằng assertion tự retry. - "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)
- 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 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.
- Mở terminal.
- Tạo thư mục skill nếu chưa có:
mkdir -p ~/.claude/skills - Clone repo vào thư mục skill:
git clone https://github.com/testdino-hq/playwright-skill.git ~/.claude/skills/playwright-skill - 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). - 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.
- Nếu cần chạy test thật, cài Playwright trong dự án:
npm init playwright@latest.
Xem mã nguồn trên GitHub ↗Giấy phép: MIT