full-page-screenshot

Tổng quan về full-page-screenshot skill

full-page-screenshot dùng để làm gì

full-page-screenshot là một Browser Automation skill dùng để chụp toàn bộ trang web thành một file PNG duy nhất, bao gồm cả phần nội dung nằm dưới màn hình đầu tiên. Skill này được xây dựng quanh một script Node.js độc lập giao tiếp với Chrome qua Chrome DevTools Protocol, nên có thể xử lý các trang dài, nội dung lazy-loaded, ứng dụng single-page app và những trang mà ảnh chụp viewport thông thường sẽ bỏ sót phần lớn nội dung.

Người dùng và tác vụ phù hợp nhất

Hãy cài skill này nếu bạn cần một AI agent tạo ảnh chụp toàn trang một cách ổn định cho QA, rà soát giao diện, tài liệu, audit thiết kế, báo lỗi, nghiên cứu đối thủ hoặc walkthrough sản phẩm có đăng nhập. Skill đặc biệt hữu ích khi trang mục tiêu đã được mở sẵn trong Chrome, vì nó có thể liệt kê các tab hiện có và chụp tab được chọn mà không yêu cầu người dùng tạo lại trạng thái đăng nhập.

Điểm khác biệt chính

Giá trị lớn nhất của full-page-screenshot skill nằm ở độ tin cậy khi vận hành: skill dùng trực tiếp Chrome DevTools Protocol, không có dependency bên ngoài ngoài Node.js 22+ và Chrome/Chromium, đồng thời hỗ trợ cả chụp tab đang mở lẫn chụp theo URL. Quy trình chụp tab đang mở là điểm khác biệt quan trọng với dashboard đã đăng nhập, môi trường staging và các trang nằm sau SSO.

Các điều kiện cần kiểm tra trước khi áp dụng

Trước khi cài đặt, hãy xác nhận môi trường của bạn chạy được Node.js 22+ và Chrome remote debugging có thể dùng được. Skill này không phải là hosted screenshot API và không vượt qua xác thực, CAPTCHA, giới hạn mạng nội bộ, cookie banner hoặc các trang cố tình chặn tự động hóa. Skill hoạt động tốt nhất khi người dùng có thể mở trang bình thường trong Chrome rồi để agent chụp từ chính phiên đó.

Cách sử dụng full-page-screenshot skill

Cài đặt full-page-screenshot và kiểm tra sẵn sàng

Cài skill từ đường dẫn repository:

npx skills add alirezarezvani/claude-skills --skill full-page-screenshot

Sau khi cài đặt, hãy bắt đầu với SKILL.md, rồi xem tiếp scripts/full-page-screenshot.mjs. Script này là lớp thực thi, vì vậy bạn nên đọc qua trước khi dùng skill trong môi trường bị khóa chặt hoặc có tính chất giống CI.

Chạy bước kiểm tra sẵn sàng:

node "${SKILL_DIR}/scripts/full-page-screenshot.mjs" --check

Nếu Chrome debugging chưa khả dụng, hãy mở chrome://inspect/#remote-debugging và bật remote debugging cho phiên trình duyệt, hoặc khởi chạy Chrome/Chromium với debugging port theo chính sách cục bộ của bạn.

Dùng tab đang mở cho các trang đã đăng nhập

Với trang cần xác thực, admin panel hoặc bất kỳ trang nào phụ thuộc vào phiên trình duyệt hiện tại, hãy dùng quy trình chụp tab đang mở. Trước tiên liệt kê các tab đang mở:

node "${SKILL_DIR}/scripts/full-page-screenshot.mjs" --list

Tìm tab theo tiêu đề hoặc URL, rồi chụp tab đó:

node "${SKILL_DIR}/scripts/full-page-screenshot.mjs" <targetId> /tmp/screenshot.png --width 1200 --dpr 1

Cách này tránh mất session cookie và thường đáng tin cậy hơn so với mở một URL mới ở nền. Hãy dùng chiều rộng khớp với breakpoint thiết kế bạn muốn rà soát, chẳng hạn 390 cho bố cục gần giống mobile, 768 cho tablet, hoặc 1200/1440 cho desktop.

Dùng URL cho các trang công khai

Với trang công khai, tài liệu, landing/marketing page hoặc trang không yêu cầu đăng nhập, hãy dùng chế độ URL:

node "${SKILL_DIR}/scripts/full-page-screenshot.mjs" --url "https://example.com" /tmp/screenshot.png --width 1200 --dpr 1 --wait 15000

Tăng --wait khi trang phụ thuộc vào render trễ, client-side routing, nội dung được kích hoạt bởi analytics hoặc các section lazy-loaded. Giữ --dpr 1 để file có dung lượng thực tế và việc rà soát nhanh hơn; chỉ dùng DPR cao hơn khi độ sắc nét theo mật độ điểm ảnh quan trọng hơn kích thước đầu ra.

Mẫu prompt để gọi skill hiệu quả hơn

Một prompt yếu là: “Take a screenshot of this page.” Một prompt dùng full-page-screenshot tốt hơn nên có URL hoặc ngữ cảnh tab, trạng thái xác thực, chiều rộng viewport, nhu cầu chờ tải và đường dẫn đầu ra:

Use the full-page-screenshot skill to capture the already-open Chrome tab for staging.example.com/dashboard. I am logged in. Use desktop width 1440, DPR 1, wait long enough for lazy charts to render, and save the PNG to /tmp/dashboard-full-page.png. If multiple matching tabs exist, list them first and ask me which target ID to use.

Thông tin này giúp agent có đủ cơ sở để chọn giữa --list, chụp tab đang mở và chế độ --url mà không phải phỏng đoán.

Câu hỏi thường gặp về full-page-screenshot skill

full-page-screenshot có tốt hơn prompt chụp màn hình thông thường không?

Có, khi yêu cầu là chụp toàn bộ trang thay vì chỉ phần viewport đang nhìn thấy. Một prompt chung chung có thể dựa vào bất kỳ khả năng chụp màn hình nào mà môi trường cung cấp, thường chỉ tạo ảnh của màn hình hiện tại. full-page-screenshot skill cung cấp cho agent một quy trình cụ thể dựa trên CDP, cấu trúc lệnh rõ ràng và phương án dự phòng cho các tab đã mở sẵn.

Người mới có dùng được skill này không?

Có, nếu họ có thể cài skill và chạy Chrome với remote debugging được bật. Các lệnh khá dễ hiểu, nhưng phần thiết lập mang tính kỹ thuật hơn một browser extension. Người mới nên bắt đầu với --check, sau đó --list, rồi chụp một tab đang mở trước khi thử chế độ URL.

Khi nào không nên dùng skill này?

Không nên dùng skill này khi bạn cần giám sát ảnh chụp theo lịch, so sánh hiển thị trên nhiều trình duyệt, screenshot diffing, OCR, xuất PDF hoặc chạy trên cloud ở quy mô lớn. Skill này chụp PNG từ Chrome/Chromium; nó không thay thế các bộ test Playwright, nền tảng visual regression hoặc hosted screenshot API.

Skill này có phù hợp với Browser Automation workflow không?

Có. full-page-screenshot for Browser Automation rất phù hợp khi agent cần một bước chụp ổn định sau khi điều hướng, đăng nhập, áp dụng bộ lọc hoặc chờ một trạng thái UI. Skill hữu ích nhất khi đóng vai trò công cụ chụp cuối cùng trong một workflow trình duyệt rộng hơn, chứ không phải một framework điều hướng hoặc kiểm thử hoàn chỉnh nếu đứng riêng lẻ.

Cách cải thiện full-page-screenshot skill

Cải thiện input cho full-page-screenshot

Input càng rõ thì ảnh chụp càng tốt. Hãy mô tả trạng thái của trang, không chỉ địa chỉ trang: tài khoản đã đăng nhập, bộ lọc đã chọn, trạng thái modal, chiều rộng viewport, các phần tử dự kiến đã tải và tên file đầu ra. Nếu trang có nội dung động, hãy nêu rõ phần tử hoặc section phải xuất hiện trước khi chụp để agent biết khi nào cần chờ lâu hơn hoặc cần xác nhận thủ công.

Giảm các lỗi chụp thường gặp

Những nguyên nhân chặn phổ biến nhất là Chrome remote debugging chưa được bật, dùng chế độ URL cho trang yêu cầu đăng nhập, chụp trước khi nội dung lazy-loaded tải xong và dùng sai chiều rộng viewport. Hãy khắc phục bằng cách chạy --check, ưu tiên chế độ tab đang mở cho trang đã xác thực, tăng --wait cho public SPA và đặt --width khớp với bố cục bạn thực sự muốn kiểm tra.

Lặp lại sau file PNG đầu tiên

Kiểm tra kết quả đầu tiên để xem có thiếu nội dung cuối trang, sticky header che mất section, cookie banner, ảnh chưa tải hoặc bố cục responsive ngoài dự kiến hay không. Sau đó chạy lại với chiều rộng khác, thời gian chờ lâu hơn hoặc một tab đã được chuẩn bị sẵn. Nếu cookie banner hoặc modal xuất hiện, hãy đóng nó trong Chrome trước rồi chụp tab đang mở, thay vì dựa vào một URL mới chạy nền.

Đọc script trước khi mở rộng

Nếu bạn muốn tùy chỉnh skill, hãy đọc scripts/full-page-screenshot.mjs trước khi chỉnh prompt. Script này kiểm soát việc phát hiện tab, chiều rộng viewport, DPR, hành vi chờ và thao tác chụp qua CDP. Các cải tiến hữu ích có thể gồm thông báo lỗi rõ hơn, chiến lược chờ bổ sung, quy ước đặt tên đầu ra hoặc tùy chọn xử lý CSS để ẩn sticky overlay khi workflow của bạn cho phép.