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

Kỹ năng tự động hóa trình duyệt dựa trên Playwright, giữ nguyên trạng thái trang giữa các script nhỏ để điều hướng, điền form và trích xuất 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ì

Kỹ năng chạy một server cục bộ bọc Playwright, rồi để Claude thực thi các script TypeScript ngắn để điều khiển trình duyệt. Điểm cốt lõi là trạng thái trang được giữ lại giữa các lần chạy script: tạo trang có tên như client.page("checkout") thì script tiếp theo có thể kết nối lại và làm tiếp.

Hai chế độ: standalone (mở Chromium mới) và extension (gắn vào Chrome đang đăng nhập của bạn)
getAISnapshot() trả về cây trợ năng dạng YAML với các tham chiếu [ref=e5], cho phép click mà không cần biết CSS selector
Chụp ảnh màn hình (kể cả full page), kiểm tra URL/tiêu đề/nội dung để đánh giá trạng thái
Hướng dẫn scraping 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 web cần kiểm thử lặp lại luồng đăng nhập, gửi form, thanh toán
Người muốn tự động hóa trên trang mà chưa biết cấu trúc HTML hay selector
Người cần lấy dữ liệu từ site yêu cầu đăng nhập hoặc tự động hóa tác vụ lặp

Ví dụ sử dụng

Kiểm thử app cục bộ: "Mở localhost:3000, đăng nhập bằng tài khoản test rồi chụp ảnh dashboard" → script đăng nhập → in trạng thái → lưu tmp/dashboard.png.
Trang lạ, không biết selector: dùng getAISnapshot() để liệt kê link, rồi selectSnapshotRef("news", "e8") để click đúng bài viết và lấy nội dung.
Scraping có phân trang: bắt request XHR ở trang đầu, hiểu schema API, sau đó phát lại request với tham số trang khác nhau để xuất toàn bộ dữ liệu ra JSON.

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

Kiểm tra đã có Node.js 18+ và npm (node -v).
Clone repo: git clone https://github.com/code-yeongyu/oh-my-openagent.git
Sao chép thư mục kỹ năng: mkdir -p ~/.claude/skills && cp -r oh-my-openagent/packages/omo-opencode/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.
Đọc references/installation.md trong thư mục kỹ năng để biết cấu hình riêng cho Windows.
Mở Claude Code tại thư mục dự án và yêu cầu ví dụ "vào example.com và chụp ảnh màn hình"; kỹ năng sẽ khởi động server (./skills/dev-browser/server.sh &) và chờ thông báo Ready.
Nếu muốn dùng Chrome đang đăng nhập, cài extension tại https://github.com/SawyerHood/dev-browser/releases rồi chạy npm run start-extension.

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