AI Skill MartKhám phá skillLệnhChương trìnhHọcSkill là gì?
 
← Về danh sách

Playwright Frontend — Viết markup dễ định vị cho test

Kỹ năng giúp viết markup ngữ nghĩa và đặt `data-testid` chuẩn để test Playwright và AI agent luôn tìm đúng phần tử.

Lập trìnhTrung cấp★ 412⑂ 67Điểm AI 8/10Cập nhật lần cuối: 12 thg 10, 2026

Giúp được gì

  • Rà soát component theo thứ tự ưu tiên locator chính thức của Playwright (role → label → text → testid).
  • Chỉ rõ khi nào nên và không nên thêm data-testid, kèm quy ước đặt tên feature-component-element[-variant] dạng kebab-case.
  • Bắt buộc dùng khóa nghiệp vụ ổn định thay cho chỉ số mảng trong danh sách: user-row-${user.id} thay vì user-row-${index}.
  • Có tài liệu con cho React, Vue, Angular, Svelte, cách gom test ID vào một nơi và loại bỏ khỏi bản production.

Phù hợp với ai

  • Lập trình viên frontend xây UI cho sản phẩm có test E2E bằng Playwright.
  • Đội ngũ hay bị test "flaky" vì selector dựa vào text hoặc vị trí DOM.
  • Người muốn AI agent thao tác UI một cách xác định.

Ví dụ sử dụng

  1. "Review PR component modal này" → gợi ý thêm role/label cho widget tự chế, chỉ gắn testid ở chỗ thật sự cần.
  2. "Thêm test ID cho bảng người dùng" → sinh user-row-${user.id} thay vì theo index.
  3. "Gom test ID về một file hằng số" → áp dụng mẫu tập trung hóa và strip khi build production.

· · · 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/frontend/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 AI Skill Mart.
Copy thư mục frontend từ repo GitHub testdino-hq/playwright-skill vào ~/.claude/skills/playwright-frontend/ 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 && mkdir -p ~/.claude/skills/playwright-frontend && cp -r playwright-skill/frontend/* ~/.claude/skills/playwright-frontend/

⚠ Đâ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ải repo: git clone https://github.com/testdino-hq/playwright-skill.git
  3. Tạo thư mục kỹ năng: mkdir -p ~/.claude/skills/playwright-frontend
  4. Sao chép hướng dẫn: cp -r playwright-skill/frontend/* ~/.claude/skills/playwright-frontend/
  5. Vì tài liệu tham chiếu ../core/, nên chép thêm thư mục core/ để không đứt liên kết.
  6. Khởi động lại Claude Code và thử: "Thêm data-testid ổn định cho component này".
Xem mã nguồn trên GitHub ↗Giấy phép: MIT