Chuyển tới nội dung chính

{/* Trang này được tạo tự động từ SKILL.md của kỹ năng bởi website/scripts/generate-skill-docs.py. Chỉnh sửa nguồn SKILL.md, không phải trang này. */}

Thức ăn cho chó

QA thăm dò ứng dụng web: tìm lỗi, bằng chứng, báo cáo.

Siêu dữ liệu kỹ năng

NguồnĐi kèm (được cài đặt theo mặc định)
Đường dẫn

skills/dogfood ` | | Phiên bản |

1.0.0 ` | | Nền tảng | Linux, macOS, Windows | | Thẻ |

qa

, `testing

, `browser

, `web

, dogfood |

Tham khảo: đầy đủ SKILL.md

thông tin

Sau đây là định nghĩa kỹ năng đầy đủ mà Hermes tải khi kỹ năng này được kích hoạt. Đây là những gì tác nhân coi là hướng dẫn khi kỹ năng được kích hoạt.

Dogfood: Kiểm tra chất lượng ứng dụng web có hệ thống

Tổng quan

Kỹ năng này hướng dẫn bạn thực hiện kiểm tra QA mang tính khám phá có hệ thống đối với các ứng dụng web bằng bộ công cụ trình duyệt. Bạn sẽ điều hướng ứng dụng, tương tác với các phần tử, thu thập bằng chứng về sự cố và tạo báo cáo lỗi có cấu trúc.

Điều kiện tiên quyết

  • Bộ công cụ trình duyệt phải có sẵn ( `browser_navigate

, `browser_snapshot

, `browser_CLIck

, `browser_type

, `browser_vision

, `browser_console

, `browser_scroll

, `browser_back

, `browser_press

)

  • URL mục tiêu và phạm vi thử nghiệm từ người dùng

Đầu vào

Người dùng cung cấp:

  1. URL mục tiêu — điểm bắt đầu để thử nghiệm
  2. Phạm vi — những lĩnh vực/tính năng nào cần tập trung vào (hoặc "trang web đầy đủ" để thử nghiệm toàn diện)
  3. Thư mục đầu ra (tùy chọn) — nơi lưu ảnh chụp màn hình và báo cáo (mặc định:

./dogfood-output

)

Quy trình làm việc

Thực hiện theo quy trình làm việc có hệ thống 5 giai đoạn này:

Giai đoạn 1: Kế hoạch

  1. Tạo cấu trúc thư mục đầu ra: <!-- ascii-guard-ignore -->

` &#123;output_dir}/ ├── screenshots/ # Evidence screenshots └── report.md # Final report (generated in Phase 5)

` <!-- ascii-guard-ignore-end --> 2. Xác định phạm vi thử nghiệm dựa trên thông tin đầu vào của người dùng. 3. Xây dựng sơ đồ trang web thô bằng cách lập kế hoạch các trang và tính năng cần kiểm tra:

  • Trang đích/trang chủ
  • Liên kết điều hướng (đầu trang, chân trang, thanh bên)
  • Luồng người dùng chính (đăng ký, đăng nhập, tìm kiếm, thanh toán, v.v.)
  • Các hình thức và các yếu tố tương tác
  • Các trường hợp cạnh (trạng thái trống, trang lỗi, 404)

Giai đoạn 2: Khám phá

Đối với mỗi trang hoặc tính năng trong kế hoạch của bạn:

  1. Điều hướng tới trang:

` browser_navigate(url="https://example.com/page")

  1. Chụp ảnh nhanh để hiểu cấu trúc DOM:

` browser_snapshot()

  1. Kiểm tra bảng điều khiển để tìm lỗi JavaScript:

` browser_console(clear=true)

` Thực hiện việc này sau mỗi lần điều hướng và sau mỗi lần tương tác quan trọng. Lỗi Silent JS là những phát hiện có giá trị cao. 4. Chụp ảnh màn hình có chú thích để đánh giá trực quan trang và xác định các yếu tố tương tác:

` browser_vision(question="Describe the page layout, identify any visual issues, broken elements, or accessibility concerns", annotate=true)

Cờ annotate=true ` phủ các nhãn

[N] ` được đánh số trên các phần tử tương tác. Mỗi

[N] ` ánh xạ tới

@eN ` cho các lệnh trình duyệt tiếp theo. 5. Kiểm tra các yếu tố tương tác một cách có hệ thống:

  • Bấm nút và liên kết: `browser_CLIck(ref="@eN")

  • Điền các biểu mẫu: `browser_type(ref="@eN", text="test input")

  • Kiểm tra điều hướng bàn phím: `browser_press(key="Tab")

, `browser_press(key="Enter")

  • Cuộn qua nội dung: `browser_scroll(direction="down")

  • Xác thực mẫu thử nghiệm với đầu vào không hợp lệ

  • Kiểm tra bài nộp trống

  1. Sau mỗi lần tương tác, hãy kiểm tra:
    • Lỗi console: `browser_console()

    • Thay đổi trực quan: `browser_vision(question="What changed after the interaction?")

    • Hành vi dự kiến và hành vi thực tế

Giai đoạn 3: Thu thập chứng cứ

Đối với mọi vấn đề được tìm thấy:

  1. Chụp ảnh màn hình hiển thị sự cố:

` browser_vision(question="Capture and describe the issue visible on this page", annotate=false)

Lưu screenshot_path ` khỏi phản hồi - bạn sẽ tham chiếu nó trong báo cáo. 2. Ghi lại chi tiết:

  • URL nơi xảy ra sự cố
  • Các bước tái hiện
  • Hành vi mong đợi
  • Hành vi thực tế
  • Lỗi Console (nếu có)
  • Đường dẫn ảnh chụp màn hình
  1. Phân loại vấn đề bằng cách sử dụng phân loại vấn đề (xem `references/issue-taxonomy.md

):

  • Mức độ nghiêm trọng: Nguy hiểm/Cao/Trung bình/Thấp
  • Danh mục: Chức năng / Trực quan / Hỗ trợ tiếp cận / Console / UX / Nội dung

Giai đoạn 4: Phân loại

  1. Xem lại tất cả các vấn đề đã thu thập.
  2. Khử trùng lặp - hợp nhất các vấn đề giống nhau biểu hiện ở những nơi khác nhau.
  3. Chỉ định mức độ nghiêm trọng và danh mục cuối cùng cho từng vấn đề.
  4. Sắp xếp theo mức độ nghiêm trọng (Quan trọng trước, sau đó là Cao, Trung bình, Thấp).
  5. Đếm các vấn đề theo mức độ nghiêm trọng và danh mục để đưa vào bản tóm tắt.

Giai đoạn 5: Báo cáo

Tạo báo cáo cuối cùng bằng cách sử dụng mẫu tại `templates/dogfood-report-template.md

.Báo cáo phải bao gồm:

  1. **Tóm tắt ** với tổng số vấn đề, phân tích theo mức độ nghiêm trọng và phạm vi thử nghiệm
  2. Phần theo từng số với:
    • Số phát hành và tiêu đề
    • Phù hiệu mức độ nghiêm trọng và danh mục
    • URL nơi được quan sát
    • Mô tả vấn đề
    • Các bước tái hiện
    • Hành vi dự kiến và hành vi thực tế
    • Tài liệu tham khảo ảnh chụp màn hình (sử dụng MEDIA:&lt;screenshot_path cho hình ảnh nội tuyến)
    • Lỗi Console nếu có liên quan
  3. Bảng tóm tắt tất cả các vấn đề
  4. Ghi chú kiểm tra — nội dung nào đã được kiểm tra, nội dung nào chưa, bất kỳ trình chặn nào

Lưu báo cáo vào

&#123;output_dir}/report.md

.

Công cụ tham khảo

Công cụMục đích
`browser_navigate
`Đi tới một URL
`browser_snapshot
`Nhận ảnh chụp nhanh văn bản DOM (cây khả năng truy cập)
`browser_CLIck
`Nhấp vào một phần tử theo ref (

@eN

) hoặc văn bản | | browser_type | Nhập vào trường đầu vào | | browser_scroll | Cuộn lên/xuống trên trang | | browser_back | Quay lại lịch sử trình duyệt | | browser_press | Nhấn phím bàn phím | | browser_vision | Ảnh chụp màn hình + phân tích AI; sử dụng annotate=true cho nhãn thành phần | | browser_console | Nhận lỗi và đầu ra của bảng điều khiển JS |

Mẹo

  • Luôn kiểm tra browser_console() sau khi điều hướng và sau các tương tác quan trọng. Lỗi JS im lặng là một trong những phát hiện có giá trị nhất.
  • **Sử dụng annotate=true với `browser_vision

** khi bạn cần giải thích về vị trí của phần tử tương tác hoặc khi tham chiếu ảnh chụp nhanh không rõ ràng.

  • Kiểm tra với cả dữ liệu đầu vào hợp lệ và không hợp lệ — lỗi xác thực biểu mẫu là phổ biến.
  • Cuộn qua các trang dài — nội dung dưới màn hình đầu tiên có thể gặp vấn đề về hiển thị.
  • Kiểm tra luồng điều hướng — nhấp qua các quy trình gồm nhiều bước từ đầu đến cuối.
  • Kiểm tra hành vi phản hồi bằng cách lưu ý mọi vấn đề về bố cục hiển thị trong ảnh chụp màn hình.
  • Đừng quên các trường hợp đặc biệt: trạng thái trống, văn bản rất dài, ký tự đặc biệt, nhấp chuột nhanh.
  • Khi báo cáo ảnh chụp màn hình cho người dùng, hãy bao gồm MEDIA:&lt;screenshot_path để họ có thể xem bằng chứng nội tuyến.