Bỏ qua, tới nội dung
REC Mã nguồn mở · MIT

Mô tả luồng, nhận bản ghi.

Một lệnh ghi lại web app của bạn và trả về video, ảnh chụp các bước chính và runbook — đúng thứ bằng chứng mà UAT, bàn giao, báo lỗi hay review cần, không phải mất nửa tiếng quay màn hình.

Cài đặt Xem trên GitHub

Rồi gõ lệnh này trong agent

/webapp-evidence:recording
Chạy trên
  • Claude Code
  • Cursor
  • Codex
  • Gemini CLI
  • Antigravity

Sinh ra cho UAT

Đưa vào tiêu chí nghiệm thu, nhận về bằng chứng để ký duyệt

AI làm thay đổi nhanh. Chứng minh nó chạy đúng thì không nhanh hơn: kiểm thử nghiệm thu vẫn là một người bấm qua từng tiêu chí rồi tự quay lại. Hãy viết tiêu chí thành một luồng — một lần quay trả về đủ từng tiêu chí trên video, có mốc thời gian, và mọi lỗi của trang đều được ghi lại.

  1. 01

    Viết tiêu chí thành một luồng

    Các bước đánh số bằng lời thường, bằng ngôn ngữ team đang dùng. Đưa link MR hoặc PR cũng được — agent đọc phần thay đổi và tự suy ra luồng.

  2. 02

    Một lần quay chạy mọi bước

    Chrome được điều khiển bằng con trỏ hiện rõ, với tốc độ người xem theo kịp. Bước gọi endpoint sẽ kiểm tra status, nên câu trả lời sai dừng lần quay thay vì lọt vào làm bằng chứng.

  3. 03

    Runbook chính là báo cáo

    Mỗi bước kèm thời điểm trong video, các lệnh đã chạy cùng exit code, và mọi lỗi console hay request thất bại xuất hiện trong lúc ghi.

  4. 04

    Ký duyệt, hoặc trả lại

    Người duyệt đối chiếu từng tiêu chí với một mốc thời gian thay vì tự chạy lại luồng. Sau khi sửa, “quay lại lần nữa” tạo lần quay mới và giữ lần cũ bên cạnh.

Chính trang này, đọc như báo cáo UAT

Video ở phần Cách hoạt động là chính trang này, do skill mà nó giới thiệu quay lại. Chọn một tiêu chí để xem những dòng runbook chứng minh nó.

Tiêu chí nghiệm thu

Runbook evd-tour-runbook.md
  1. ## Steps in the video
  3. 00:00 - 00:01 Hero — the page as it opens
  4. 00:01 - 00:03 Hero — the firefly answers the pointer
  5. 00:03 - 00:05 Hero — copy the command that starts a recording
  6. 00:05 - 00:17 Terminal — the SEO meta the page serves, read off its URL
  7. 00:17 - 00:24 UAT — the four steps light up under the pointer
  8. 00:24 - 00:41 UAT report — each criterion picks out the runbook lines that prove it
  9. 00:41 - 00:46 How it works — three steps and the recording they produce
  10. 00:46 - 00:51 Full-stack proof — the screen, the endpoint and the database
  11. 00:51 - 00:53 Vision — contact sheets of the take
  12. 00:53 - 00:59 Features — the cards warm as the pointer crosses them
  13. 00:59 - 01:07 Install — one panel per agent
  14. 01:07 - 01:11 Back to top — the firefly flies the reader up
  15. 01:11 - 01:28 Language menu — Tiếng Việt, 日本語, 简体中文 and back to English
  16. 01:28 - 01:34 Closing on Tiếng Việt
  18. ## Commands run in the terminal
  20. - 00:12 `curl -s https://evdrec.vercel.app/ | grep -oE '<title>[^<]*</title>|<meta[^>]*(name="description"|property="og:(title|url|image)")[^>]*>' | cut -c1-100` — exit 0
  22. ## Page errors recorded during the take
  24. - none

Các dòng được chép nguyên văn từ runbook của lần quay đó.

Cách hoạt động

Ba bước, ngay trong agent bạn đang dùng

  1. 01

    Cài skill

    Một lệnh cho Claude Code, Cursor, Codex, Gemini CLI hoặc Antigravity. Ghi hình cần Chrome, ffmpeg và Node; thiếu gì agent sẽ nói và đề nghị cài giúp.

  2. 02

    Mô tả luồng

    Trang và các bước, hoặc không cần gì: ngay sau khi sửa, agent đã biết bạn vừa làm màn hình nào.

  3. 03

    Nhận bằng chứng

    Một file mp4, ảnh chụp đánh số và runbook, nằm trên máy bạn. Đính kèm vào ticket, MR hay báo cáo là việc của bạn — không có gì bị commit.

Chính trang này, do webapp-evidence tự quay — lần quay mà báo cáo UAT phía trên trích dẫn.

Bằng chứng full-stack

Một lần quay chứng minh màn hình, endpoint và database

Quay màn hình chỉ cho thấy một nửa thay đổi full-stack. Cùng lần quay đó có thể gọi API bằng session trình duyệt đang giữ, và đọc lại từ database dòng mà nó vừa ghi.

Bạn gõ
/webapp-evidence:recording Page: https://app.example.com/orders
Flow:
1. Create an order for SKU ABC, quantity 2
2. Call POST /api/orders and show it answering 201
3. Query the orders table and show the row that appeared

  1. Màn hình

    Form được điền và gửi bằng con trỏ hiện rõ, với tốc độ người xem đọc kịp.

  2. Endpoint

    Một panel terminal mở đè lên trang và curl chạy ở đó bằng cookie của trình duyệt. Bước này kiểm tra status, ngay trên video.

  3. Database

    psql, mysql, một rake task — lệnh gì bạn tự chạy cũng được, với dòng mới nằm trong khung hình cạnh màn hình đã tạo ra nó.

Cookie và token đến tay curl qua một file và được che ở mọi nơi: video, ảnh chụp, runbook.

Kiểm lại lần quay

Agent không xem được video. vision giúp nó đọc được.

Nó cắt bản ghi thành các contact sheet — vài giây một khung hình, mỗi khung đóng dấu mm:ss — nên phát hiện trả về dạng “header đè lên bảng ở 00:14”, một mốc bạn đối chiếu được với runbook.

/webapp-evidence:vision evd-tour.mp4
Contact sheet của lần quay trang này: lưới các khung hình có mốc thời gian
Contact sheet 01

Tính năng

Bằng chứng người duyệt tin được

  • Trông như người thật thao tác

    Con trỏ di chuyển, gõ phím không đều, cuộn trang dừng lại đúng chỗ nó hướng tới. Không có gì nhảy cóc.

  • Runbook, không chỉ là một file

    Dòng thời gian, phụ đề, các lệnh đã chạy, lỗi trang gặp phải, và lệnh để quay lại y hệt.

  • Bí mật không lọt ra

    Làm mờ, bôi đen hoặc cắt bỏ một đoạn, trong video lẫn ảnh chụp.

  • Không gì rời khỏi máy bạn

    Không có dịch vụ, không có tài khoản bot. Nó chạy trong agent CLI bạn đang có, trên đúng site bạn chỉ định và không gì khác.

  • Hộp thoại, khi chính nó là bằng chứng

    Dropdown gốc và hộp thoại confirm mặc định được ghi chú bằng phụ đề. Khi chính nó là bằng chứng, --screen quay cả cửa sổ trình duyệt.

  • Không có cú pháp phải học

    Hỏi bằng ngôn ngữ nào, agent trả lời bằng ngôn ngữ đó. Phụ đề tiếng khác, quay chậm hơn — được nhớ theo từng project.

Cài đặt

Chọn agent bạn dùng

Một skill, năm nền tảng. Lệnh để chạy tuỳ vào nơi bạn gõ.

Claude Code

Cài đặt

claude plugin marketplace add TOMOSIA-VIETNAM/webapp-evidence
claude plugin install webapp-evidence@webapp-evidence

Ghi hình

/webapp-evidence:recording

Đọc lại một video

/webapp-evidence:vision

Cursor

Cài đặt

curl -fsSL https://raw.githubusercontent.com/TOMOSIA-VIETNAM/webapp-evidence/main/install.sh | bash

Ghi hình

/webapp-evidence-recording

Đọc lại một video

/webapp-evidence-vision

Codex

Cài đặt

curl -fsSL https://raw.githubusercontent.com/TOMOSIA-VIETNAM/webapp-evidence/main/install.sh | bash

Ghi hình

$webapp-evidence-recording

Đọc lại một video

$webapp-evidence-vision

Gemini CLI

Cài đặt

curl -fsSL https://raw.githubusercontent.com/TOMOSIA-VIETNAM/webapp-evidence/main/install.sh | bash

Ghi hình

/webapp-evidence-recording

Đọc lại một video

/webapp-evidence-vision

Antigravity

Cài đặt

curl -fsSL https://raw.githubusercontent.com/TOMOSIA-VIETNAM/webapp-evidence/main/install.sh | bash

Ghi hình

/webapp-evidence-recording

Đọc lại một video

/webapp-evidence-vision

Ghi hình cần Chrome, ffmpeg và Node. Lệnh một dòng sẽ hỏi bạn dùng nền tảng nào và cho biết cài vào đâu.