Version History
จาก script ง่ายๆ จนกลายเป็น CLI เต็มรูปแบบ
Problem
ทำไมต้องสร้าง Script นี้ขึ้นมา?
แคปรูปทีละโพส ใช้เวลานานมาก
Mandala Cosmostrend แสดงโพสโซเชียลเป็น card — ต้องแคปทีละโพส, เลื่อนหน้า, รอโหลด, crop ให้ตรง ทำ 150 โพสต่อหมวด x 4 หมวด = 600 รูป ใช้เวลาเกือบทั้งวัน
ต้องแคปเป็นรูปสวย ไม่ใช่ raw data
ทีมต้องการ screenshot ของ post card จริงๆ ไม่ใช่แค่ export CSV — เพราะต้องเอาไปวิเคราะห์ visual content, engagement pattern และ format ของแต่ละโพส
Solution
Playwright + Node.js = แคปอัตโนมัติแบบ Headless
v1.5.0 — Full Interactive CLI
- Pre-flight Checklist ตรวจ Node.js, Playwright, Chromium, Login session
- Interactive Prompts — [Enter] เริ่ม, [q] ออก, [f] เปิด Folder Picker
- Native Folder Picker — Mac (AppleScript) / Windows (PowerShell)
- Login ผ่าน Google OAuth — จำ session ไว้ 15 นาที timeout
- ซ่อน UI ที่ไม่ต้องการ (navbar, sidebar, popup, cookie banner)
- Scroll + รอโหลดรูป → screenshot แต่ละ
.grid-item - Colored Progress Bar — สีเปลี่ยนตาม % (แดง→เหลือง→ฟ้า→เขียว)
- บันทึกเป็น PNG @2x retina แยกโฟลเดอร์ตามหมวด + วันที่
Configuration
ตั้งค่าผ่าน config.json ไฟล์เดียว
"url": "https://www.mandala-analytics.com/cosmostrend",
"duration": "7 วัน",
"postsPerCategory": 150,
"categories": [
{ "name": "การเดินทางและการท่องเที่ยว", "folder": "travel" },
{ "name": "อาหารและเครื่องดื่ม", "folder": "food" },
{ "name": "ดวงและความเชื่อ", "folder": "horoscope" },
{ "name": "วิทยาศาสตร์และเทคโนโลยี", "folder": "scitech" }
]
}
In Action
ตัวอย่าง output เมื่อรัน script
████╗ ████║██╔══██╗████╗ ██║██╔══██╗██╔══██╗██║ ██╔══██╗
██╔████╔██║███████║██╔██╗ ██║██║ ██║███████║██║ ███████║
██║╚██╔╝██║██╔══██║██║╚██╗██║██║ ██║██╔══██║██║ ██╔══██║
██║ ╚═╝ ██║██║ ██║██║ ╚████║██████╔╝██║ ██║███████╗██║ ██║
╚═╝ ╚═╝╚═╝ ╚═╝╚═╝ ╚═══╝╚═════╝ ╚═╝ ╚═╝╚══════╝╚═╝ ╚═╝
C O S M O S T R E N D Auto Capture v1.5.0
┌─ Release Notes ────────────────────────────┐
│ v1.5.0 — Checklist ตรวจสอบก่อนเริ่ม │
│ v1.3.x — UI สี, progress bar, รองรับ ขาว+ดำ │
│ v1.2.0 — เลือกโฟลเดอร์ได้, Login 15 นาที │
│ v1.0.0 — แคปโพส 4 หมวด, ภาพ @2x retina │
└────────────────────────────────────────────┘
Checklist พร้อมใช้งาน
──────────────────────────────────────────
✔ Node.js v20.11.0
✔ Playwright installed
✔ Chromium installed
✔ Login session จำไว้แล้ว (ไม่ต้อง login ใหม่)
Configuration
──────────────────────────────────────────
📅 วันที่ 2026-03-11
⏱ ระยะเวลา 7 วัน
📊 โพสต่อหมวด 150
📂 หมวดหมู่ travel · food · horoscope · scitech
[Enter] เริ่มต้นใช้งาน | [q] ออก:
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
📂 [1/4] การเดินทางและการท่องเที่ยว
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✔ เลือกหมวดแล้ว
⏳ รอข้อมูลโหลด...
100% (150/150)
✔ เสร็จ: 150 โพส → travel/
╔══════════════════════════════════════════╗
║ 🎉 เสร็จทั้งหมด! ║
╚══════════════════════════════════════════╝
📁 captures/2026-03-04_2026-03-11/
└─ travel/ (150 โพส)
└─ food/ (150 โพส)
└─ horoscope/ (150 โพส)
└─ scitech/ (150 โพส)
⏱ ใช้เวลา: 12 นาที 34 วินาที
📊 รวม: 600 ภาพ
📐 คุณภาพ: @2x retina
Key Features
ฟีเจอร์ที่ออกแบบมาแก้ปัญหาจริง
✅ Pre-flight Checklist
ตรวจสอบ Node.js, Playwright, Chromium และ Login session อัตโนมัติก่อนเริ่มงาน — ถ้าขาดอะไรจะบอกทันทีพร้อมวิธีแก้
🎮 Interactive Prompts
[Enter] เริ่มใช้งาน, [q] ออก, [f] เปิด Finder/Explorer เลือกโฟลเดอร์ — ใช้งานง่ายแม้ไม่คุ้น terminal
📁 Native Folder Picker
เปิดหน้าต่างเลือกโฟลเดอร์แบบ native — Mac ใช้ AppleScript, Windows ใช้ PowerShell — เลือกที่บันทึกได้เลยไม่ต้องพิมพ์ path
🎨 Colored Progress Bar
Progress bar เปลี่ยนสีตาม % — แดง (<30%), เหลือง (<60%), ฟ้า (<90%), เขียว (100%) พร้อม ASCII art logo แบบ gradient
🔐 Persistent Login — 15 นาที Timeout
ใช้ launchPersistentContext เก็บ session ไว้ ครั้งแรก login ผ่าน Google OAuth + 2FA มีเวลา 15 นาที ครั้งต่อไปไม่ต้อง login ใหม่
🧹 ซ่อน UI ที่ไม่ต้องการ
Inject CSS ซ่อน navbar, sidebar, cookie banner, floating button + ตรวจจับ fixed elements — ได้ screenshot สะอาด
Results
ผลลัพธ์เทียบกับทำมือ
Learnings
สิ่งที่ได้เรียนรู้จากโปรเจกต์นี้
