วิธีใช้ Applitools Eyes ตรวจ UI "ดูถูกไหม" ด้วย Visual AI, ตั้งค่าใน 10 นาที และจับบั๊กที่ functional test มองไม่เห็น

โดย Nokka (นก-กา) | 22 สิงหาคม 2026

บทความนี้สอนวิธีใช้ Applitools Eyes ตรวจ UI ด้วย Visual AI และเป็นส่วนหนึ่งของซีรีส์ "ทีมทั่วไปแก้คอขวด QA ยังไง"

Applitools อยู่ตรงไหนของการทดสอบ: มันคือ "ด่านที่สาม", ตรวจ "ภาพ" ไม่ใช่ "ฟังก์ชัน" จับบั๊กที่ functional test มองไม่เห็น เช่น ปุ่มทับกัน, ตัวอักษรล้น, สีผิด, layout แตก, ปัญหาที่ "โค้ดทำงานถูก แต่ UI ดูผิด" [2]

ก่อนอื่น, Applitools Eyes คืออะไร

Applitools Eyes คือ Visual AI testing tool ที่ "ถ่าย screenshot แล้วเทียบกับ baseline" เพื่อตรวจว่า UI "ดูถูกไหม" [1]

หลักการ: ต่างจาก functional test ที่ตรวจ "ปุ่มกดได้ไหม", Applitools ตรวจ "ปุ่มอยู่ถูกที่ไหม, สีถูกไหม, ตัวอักษรล้นไหม"

จุดเด่น: Visual AI, ไม่ใช่ pixel-by-pixel compare แต่ใช้ AI เข้าใจว่า "อะไรคือความต่างที่สำคัญ" (เช่น ปุ่มหาย = สำคัญ, ตัวอักษรขยับ 1px = ไม่สำคัญ)

สิ่งที่ต้องมีก่อนเริ่ม

• บัญชี Applitools + API key
• Node.js + npm
• โปรเจกต์ Playwright (หรือ Selenium/Cypress)

ขั้นตอนติดตั้ง (10 นาที)

ขั้นที่ 1: ตั้ง API key [3]

export APPLITOOLS_API_KEY=<your-api-key>

ขั้นที่ 2: Clone ตัวอย่าง

git clone https://github.com/applitools/example-playwright-typescript.git
cd example-playwright-typescript

ขั้นที่ 3: ติดตั้ง dependencies

npm install
npx playwright install

ขั้นที่ 4: รัน test แรก

npm test

วิธีอ่านผล (Dashboard)

หลัง test เสร็จ ผลจะแสดงใน Applitools Dashboard [1]:

ส่วน	ความหมาย
Batch List	รายการ test suite ที่รัน
Test Status	"New" = ครั้งแรก (ยังไม่มี baseline), "Passed" = ตรง baseline, "Failed" = ต่างจาก baseline
Test Steps	แต่ละ eyesCheckWindow() = 1 step (1 screenshot)
Browser/Device	ว่า test รันบน browser/device ไหน

หลักการทำงาน (Baseline vs Checkpoint)

1. ครั้งแรก, test รันแล้ว screenshot ถูกบันทึกเป็น "baseline" (สถานะ "New")
2. ครั้งถัดไป, screenshot ใหม่เทียบกับ baseline
3. ถ้าต่าง, Applitools flag เป็น "Failed" พร้อม highlight จุดที่ต่าง

Visual AI จะ "เข้าใจ" ว่าความต่างไหนสำคัญ (ปุ่มหาย = bug) และไหนไม่สำคัญ (ตัวอักษรขยับ 1px = noise)

ใช้กับ AI agent ยังไง

Applitools เป็น "ด่านสุดท้าย" ที่จับบั๊กที่เครื่องมืออื่นมองไม่เห็น:

1. Greptile/CodeRabbit ตรวจ "โค้ดถูกไหม"
2. Shiplight/Playwright MCP ทดสอบ "แอปใช้ได้ไหม"
3. Applitools ตรวจ "UI ดูถูกไหม"

โค้ด AI มักสร้าง UI ที่ "ทำงานถูกแต่ดูผิด", เช่น ปุ่มทับกัน, ตัวอักษรล้น, layout แตก, ซึ่ง functional test ผ่านหมด แต่ผู้ใช้เห็นแล้วรู้สึกแย่ Applitools จับจุดนี้ได้

ข้อควรระวัง

1. ต้องมี baseline ก่อน, ครั้งแรกต้อง "ยืนยัน" ว่า baseline ถูกต้อง ไม่งั้นจะเทียบกับ baseline ที่ผิด
2. Visual AI ไม่ใช่ pixel-perfect, มัน "เข้าใจ" ความต่าง แต่บางครั้งก็ flag จุดที่ไม่สำคัญ (ต้องมี human review)
3. ราคาแพงกว่าเครื่องมืออื่น, เป็น enterprise tool ราคาไม่เปิดเผย ต้องขอ quote

สรุป

Applitools Eyes คือ "ด่านที่สาม", ตรวจ UI "ดูถูกไหม" ด้วย Visual AI จับบั๊กที่ functional test มองไม่เห็น

ถ้าทีมคุณใช้ AI agent เขียน frontend และเจอปัญหา "UI ดูแปลกๆ แต่ test ผ่านหมด", Applitools คือคำตอบ

---

สรุปมุมมองของผม

ผมมองว่า Applitools เติมเต็ม "ช่องว่าง" ที่เครื่องมืออื่นทิ้งไว้, Greptile ตรวจโค้ด, Shiplight ทดสอบฟังก์ชัน, แต่ไม่มีใครตรวจ "ภาพ"

และช่องว่างนี้สำคัญมากสำหรับโค้ด AI เพราะ AI มักสร้าง UI ที่ "ทำงานถูกแต่ดูผิด", ซึ่งเป็นบั๊กที่ผู้ใช้เห็นทันที แต่ test ผ่านหมด

ครบ 5 เครื่องมือแล้ว: Greptile → CodeRabbit → Shiplight → Playwright MCP → Applitools, ทีมคุณใช้ครบกี่ตัว? คอมเมนต์บอกผมได้ครับ

แหล่งอ้างอิง

[1] Applitools. "Get started with Applitools Eyes". 2026. https://applitools.com/docs/eyes/sdks/playwright-ts-standard/quickstart

[2] Shiplight AI. "The Best AI QA Tools in 2026". 2026. https://www.shiplight.ai/blog/best-ai-qa-tools-2026

[3] Applitools. "Eyes quick start guide". 2026. https://help.applitools.com/hc/en-us/articles/360007189251

---

บทความนี้วิเคราะห์จาก Applitools documentation และ Shiplight AI ข้อมูล ณ 22 สิงหาคม 2026 Nokka

บทความนี้เขียนโดย AI (DeepSeek V4 Pro) ภายใต้การดูแลของ Nokka