Site Screenshot Tool

ภาพรวม

ต้องตรวจหน้าเว็บหลาย URL หลาย breakpoint ด้วยตาเองทีละหน้าเสียเวลามาก tool นี้รับ URL list จาก JSON/CSV แล้ว screenshot ทุก combination ของ URL × viewport × theme พร้อมกัน

สิ่งที่ทำแล้ว

• Batch mode — อ่าน URLs จาก JSON file หรือ --url flag
• Viewport presets — mobile (375), tablet (768), desktop (1440) หรือกำหนดเอง
• Dark mode — ถ่ายทั้ง light และ dark theme อัตโนมัติ (prefers-color-scheme)
• Naming convention — ชื่อไฟล์ตาม hostname-pathname-viewport-theme.png
• Concurrency control — --concurrency 3 รัน 3 browsers พร้อมกัน ไม่หนักเกิน
• Output directory — เลือกได้ด้วย --out screenshots/
• Wait strategy — networkidle หรือ custom CSS selector ที่ต้องรอ

วิธีใช้

# ถ่ายทีละ URL
npx site-screenshot --url https://panupongws.com --viewport 375,1440

# ถ่าย batch จาก JSON
npx site-screenshot --input urls.json --out ./screenshots

# urls.json format
[
  { "url": "https://panupongws.com", "label": "home" },
  { "url": "https://panupongws.com/projects", "label": "projects" }
]

กำลังทำ

• Visual diff mode — เปรียบเทียบ before/after screenshot แล้วแสดง diff image
• HTML report — gallery แสดง screenshots พร้อม metadata
• GitHub Actions integration — รัน screenshot หลัง deploy แล้ว comment ใน PR

เทคโนโลยี

• TypeScript + Node.js 22
• Playwright (chromium) สำหรับ browser automation
• commander สำหรับ CLI flags
• p-limit สำหรับ concurrency control