ไม่ต้องลากรูปอีกต่อไป! AI รันเทส E2E พร้อมแปะผลใน PugBase ให้ทีมดู

Modern AI Tools YouTube Thumbnail.png

เคยเป็นไหม รันเทสเสร็จได้ screenshot มาเป็นสิบรูป กองอยู่ในโฟลเดอร์ แล้วก็งงว่าจะเอาไปไว้ไหนดี

โพสต์นี้ผมจะเล่าวิธีที่ใช้อยู่จริง คือให้ AI ใน VSCode รันเทสแล้วเก็บผลพร้อมรูปไว้ใน PugBase ให้เลย ทีมเปิดดูพร้อมกันได้ ไม่ต้องส่งรูปไปมา ใครอยากลองทำตามก็ง่ายมาก เริ่มจากศูนย์ได้เลย

ปัญหาที่เจอกันประจำ

สมมติเขียนเทสเว็บด้วย Playwright พอรันเสร็จมันก็เซฟรูปไว้ในเครื่องเรา ทีนี้พอจะเอาให้เพื่อนในทีมดู หรือจะรายงานหัวหน้า มันเริ่มยุ่งละ

ต้องลากรูปไปแปะ Slack ทีละรูป แล้วพิมพ์อธิบายเองว่ารูปไหนคืออะไร
ผ่านไปอาทิตย์นึง กลับมาเปิดโฟลเดอร์ ก็จำไม่ได้แล้วว่ารูปกองนี้คือเทสรอบไหน
คนที่ไม่ใช่สาย dev เปิดไฟล์ในเครื่องเราก็ไม่ได้อยู่ดี

รูปมันมีครบนะ แต่ไม่มีที่อยู่เป็นหลักเป็นแหล่ง พอเทสบ่อยๆ เข้า ก็ยิ่งรก

แล้ว PugBase ช่วยยังไง

ไอเดียมันง่ายมาก แทนที่จะปล่อยรูปกองในเครื่อง เราย้ายผลเทสทั้งหมดไปอยู่ใน note เดียวบน PugBase รูป คำอธิบาย สถานะผ่าน/ไม่ผ่าน อยู่ด้วยกันหมด

ทีมเปิดดูพร้อมกันได้ คอมเมนต์ได้ แชร์เป็นลิงก์ส่งใครก็ได้
อยู่ที่เดียวกับ spec กับ plan ของโปรเจกต์ ไม่ต้องเปิดหลายที่
ที่ชอบสุดคือ เราไม่ต้องนั่งทำเอง สั่ง AI ใน VSCode ทีเดียว มันเขียนรายงานพร้อมแปะรูปให้เลย

แอปที่จะใช้เป็นตัวอย่างวันนี้คือ Pug Todo แอปจดงานเล็กๆ เพิ่ม ติ๊กเสร็จ แก้ ลบ ได้ หน้าตาแบบนี้

หน้าแอป Pug Todo

1. ขั้นแรก ขอ API Key ก่อน

ก่อนที่ AI จะเขียนอะไรลง PugBase ได้ เราต้องให้กุญแจมันก่อน เข้าไปที่ Settings แล้วเลือกแท็บ Developer กด Create API key จะได้ token มาเส้นนึง (ขึ้นต้นด้วย pgb_) เก็บไว้ดีๆ นะ มันเหมือนรหัสผ่าน

หน้า Developer settings ของ PugBase สร้าง API key สำหรับต่อ MCP

หน้านี้มีบล็อกให้ copy ไปวางได้เลย เอา token ไปใส่ในไฟล์ชื่อ .mcp.json ที่ root ของโปรเจกต์

{
  "mcpServers": {
    "pugbase": {
      "type": "http",
      "url": "https://pugbase.io/api/mcp",
      "headers": { "Authorization": "Bearer pgb_ใส่ของคุณตรงนี้" }
    }
  }
}

เซฟ แล้ว reload VSCode ทีนึง เท่านี้ AI ก็มองเห็น PugBase แล้ว

2. บอก AI ว่าอยากได้อะไร

เปิดโปรเจกต์ใน VSCode ที่มี Claude Code อยู่ แล้วพิมพ์สั่งมันตรงๆ เหมือนคุยกับเพื่อนร่วมงานคนนึง เช่น

ช่วยเขียน e2e test ให้แอป Todo หน่อย เทสตั้งแต่เพิ่ม ติ๊กเสร็จ แก้ ลบ แล้วรันจริง เก็บผลพร้อม screenshot ไว้ใน PugBase ให้ที

แค่นี้แหละ ที่เหลือมันจัดการเองหมด ตั้งแต่เขียนเทส รันจริงในเบราว์เซอร์ จับรูปทุกขั้น อัปรูปขึ้น PugBase ไปจนเรียบเรียงเป็นรายงานให้ เราไม่ต้องไปยุ่งกับเรื่องเทคนิคเบื้องหลังเลย นั่งรอมันทำเสร็จอย่างเดียว

3. ผลลัพธ์ที่ได้ หน้าตาแบบนี้

พอ AI ทำเสร็จ เปิด PugBase มาก็จะเจอ note รายงานผลเทสรออยู่ มีตารางสรุปว่าเคสไหนผ่านไม่ผ่าน มีรูปแต่ละขั้นตอนแปะให้ดูพร้อม

ตัวอย่าง note รายงานผลเทสใน PugBase มีตารางสรุปผ่าน/ไม่ผ่าน และรูปแต่ละขั้น

แถมยังแปะรายงานแบบกดดูได้จริงไว้ในโน้ตด้วย อันนี้ของจริง ลองเลื่อนดูในนี้ได้เลย

https://firebasestorage.googleapis.com/v0/b/fire-note-pug.firebasestorage.app/o/workspaces%2F5srXzYvCzloSZzcD7Fae%2Fclaude-uploads%2F1782831756533_pug-todo-e2e-report.html?alt=media&token=5adc7d3d-1454-42e5-b7e4-587e11d5edf0

ทีนี้ใครในทีมก็เปิดดูได้ ส่งลิงก์ให้หัวหน้าก็ได้ ไม่ต้องมานั่งส่งรูปทีละใบอีกต่อไป

PugBase รองรับการทำงานร่วมกัน (co-op) ได้อย่างเต็มที่ หากคุณไม่ต้องการเผยแพร่ผลเทสเป็นสาธารณะ ก็สามารถเชิญสมาชิกในทีมเข้ามาอ่านในโน้ตส่วนตัวของคุณได้เลย

สรุป

ปัญหาเดิมคือรูปผลเทสกองในเครื่อง ส่งต่อยาก หาย้อนไม่เจอ
ย้ายมาเก็บที่ PugBase ทุกอย่างอยู่ที่เดียว ทีมเห็นพร้อมกัน แชร์ลิงก์ได้
เซ็ตอัปแค่ครั้งเดียว คือทำกุญแจ MCP แล้วใส่ .mcp.json ที่เหลือบอก AI ใน VSCode ประโยคเดียวจบ

ลองดูครับ เสียเวลาเซ็ตรอบเดียว แต่ใช้ยาวๆ คุ้มมาก

By PugBase-G