dev-browser (Tự động hóa trình duyệt)

Kỹ năng tự động hóa trình duyệt giữ nguyên trạng thái trang, cho phép chạy nhiều script nhỏ để điều hướng, điền form, chụp màn hình và thu thập dữ liệu web.

Tự động hóaTrung cấp★ 67,531⑂ 5,507Điểm AI 8/10Cập nhật lần cuối: 9 thg 8, 2026

Kỹ năng này làm gì

Khởi chạy một máy chủ tự động hóa dựa trên Playwright và để Claude chạy các script TypeScript ngắn theo từng bước. Điểm mấu chốt là trạng thái trang được giữ lại giữa các lần chạy: đăng nhập → điều hướng → điền form → kiểm tra có thể tách thành nhiều script riêng.

Quản lý trang theo tên (client.page("checkout"))
getAISnapshot() trả về cây trợ năng (ARIA) dạng YAML để tìm phần tử, selectSnapshotRef() để click/nhập
Chụp màn hình (kể cả toàn trang), in URL/tiêu đề/nội dung để gỡ lỗi
Hai chế độ: Standalone (mở Chromium mới) và Extension (dùng chính Chrome đang đăng nhập của bạn)
Hướng dẫn thu thập dữ liệu lớn bằng cách bắt và phát lại request mạng thay vì cuộn DOM

Phù hợp với ai

Lập trình viên cần chạy kiểm thử giao diện web lặp đi lặp lại
Người muốn tự động hóa các trang quản trị/dashboard nằm sau đăng nhập
Người cần scrape dữ liệu từ danh sách có phân trang
Người phải làm việc với site lạ, chưa biết selector (ARIA snapshot rất hữu ích)

Ví dụ sử dụng

Chụp dashboard sau khi đăng nhập: "Đăng nhập vào site staging rồi chụp toàn bộ dashboard" → script đăng nhập → kiểm tra trạng thái → chụp fullPage.
Kiểm thử form: điền dữ liệu vào form thanh toán, kiểm tra thông báo lỗi; nếu thất bại, trang vẫn còn nên chụp màn hình để gỡ lỗi ngay.
Thu thập danh sách: bắt request XHR ở trang đầu để hiểu schema API, sau đó lặp tham số phân trang để lấy hàng trăm bản ghi trong một lần chạy.

· · · Hướng dẫn cài đặt · · ·

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.

↓ 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 packages/skills-loader-core/src/features/builtin-skills/dev-browser từ repo GitHub code-yeongyu/oh-my-openagent vào ~/.claude/skills/code-yeongyu-dev-browser/ 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/code-yeongyu/oh-my-openagent.git /tmp/oh-my-openagent && mkdir -p ~/.claude/skills && cp -r /tmp/oh-my-openagent/packages/skills-loader-core/src/features/builtin-skills/dev-browser ~/.claude/skills/

⚠ Đâ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 và clone kho: git clone https://github.com/code-yeongyu/oh-my-openagent.git
Tạo thư mục skills: mkdir -p ~/.claude/skills
Sao chép kỹ năng: cp -r oh-my-openagent/packages/skills-loader-core/src/features/builtin-skills/dev-browser ~/.claude/skills/
Cài phụ thuộc: cd ~/.claude/skills/dev-browser && npm i và nếu cần npx playwright install chromium
Chạy Claude Code trong dự án của bạn và thử: "mở example.com và chụp màn hình".
Muốn dùng Chrome đã đăng nhập: cài extension tại https://github.com/SawyerHood/dev-browser/releases, chạy npm run start-extension rồi kích hoạt extension.
Lưu ý: ví dụ trong tài liệu giả định đường dẫn skills/dev-browser/; hãy đổi sang đường dẫn cài đặt thực tế của bạn.

Xem mã nguồn trên GitHub ↗Giấy phép: NOASSERTION