ลองนึกภาพว่าคุณกำลังกำหนดมาตรฐาน CI ของคุณให้ใช้หนึ่งในสามเครื่องมือทดสอบการถดถอยเชิงภาพแบบโอเพนซอร์สที่ทุกคนคัดเข้ารายชื่อ (BackstopJS, Argos, Lost Pixel) แล้วพบว่า หลังจากเริ่มศึกษาได้หนึ่งสัปดาห์ สองในสามไม่ได้เป็นอย่างที่เห็นจากภายนอก Argos มีโค้ดที่ยอดเยี่ยมบน GitHub แต่ผู้ดูแลบอกอย่างตรงไปตรงมาว่าการ self-hosting นั้นไม่ได้รับการสนับสนุนและไม่มีเอกสารประกอบ Lost Pixel ถูกเก็บถาวรเมื่อวันที่ 22 เมษายน 2026 ตอนที่ทีมย้ายไป Figma และไม่ได้ทิ้งเส้นทางการย้ายข้อมูลใด ๆ ไว้ให้ทีมที่ใช้งานอยู่แล้ว
นั่นทำให้เหลือเพียงหนึ่งในสามที่วันนี้สามารถ self-host ได้จริงและยังมีการดูแลอยู่ ซึ่งเป็นเรื่องแปลกที่จะพูดเกี่ยวกับหมวดหมู่ที่ดูเหมือนมีตัวเลือกมากมายขนาดนี้ แต่นั่นคือสภาพภูมิทัศน์จริง ๆ เครื่องมือที่ผู้คนมองว่าเท่าเทียมกันสามตัว ในทางปฏิบัติแล้วคือตัวเลือก self-hosted ที่ใช้งานได้หนึ่งตัว เครื่องมือที่แข็งแกร่งหนึ่งตัวที่อยู่บนเซิร์ฟเวอร์ของคนอื่น และอีกหนึ่งตัวที่คุณควรย้ายออก
นี่คือมุมมองที่ให้ความสำคัญกับ self-hosting เป็นอันดับแรก เกี่ยวกับเครื่องมือทดสอบการถดถอยเชิงภาพแบบ self-hosted ที่อยู่รอดเมื่อปะทะกับความเป็นจริง ว่าตัวไหนเหมาะกับข้อจำกัดใด และควรทำอย่างไรหากคุณกำลังใช้ Lost Pixel อยู่ตอนนี้
เวอร์ชันสั้น
- BackstopJS คือตัวเลือกที่ self-host ได้ มีการดูแล ใช้สัญญาอนุญาต MIT และไม่มีค่าใช้จ่าย ใช้ Puppeteer โดยค่าเริ่มต้นพร้อมรองรับ Playwright เปรียบเทียบพิกเซลผ่าน Resemble.js และมี UI สำหรับรีวิวแบบ HTML (พร้อมข้อควรระวังเรื่องการเรนเดอร์ใน Docker ที่คุณต้องวางแผนรับมือ)
- Argos คือเครื่องมือที่แข็งแกร่งกว่าในด้านเวิร์กโฟลว์ (การรีวิว PR และการเปรียบเทียบสแนปช็อต ARIA ตั้งแต่ปลายปี 2025) แต่ในทางปฏิบัติแล้วเป็น SaaS แบบมีการจัดการ ผู้ดูแลไม่ได้ให้ทั้งการสนับสนุนและเอกสารสำหรับการรันเอง
- Lost Pixel ถูกเก็บถาวรในเดือนเมษายน 2026 อย่านำมาใช้กับงานใหม่ และหากคุณใช้มันอยู่ ให้วางแผนการย้ายข้อมูลของคุณตั้งแต่ตอนนี้
คำตัดสินในบรรทัดเดียว: สำหรับไปป์ไลน์ CI ที่ self-hosted เต็มรูปแบบ BackstopJS คือตัวเลือกที่ใช้งานได้จริง หากคุณต้องการเวิร์กโฟลว์รีวิวที่ดีที่สุดและยอมรับการพึ่งพา SaaS ได้ Argos คือเครื่องมือที่ดีกว่า
(สิ่งที่บทความนี้ไม่ครอบคลุม: การทดสอบเชิงภาพที่อิงกับ Cypress เวิร์กโฟลว์คอมโพเนนต์เฉพาะของ Storybook และตัวเลขประสิทธิภาพที่วัดด้วยมือ การเปรียบเทียบนี้สร้างขึ้นจากข้อเท็จจริงจากแหล่งข้อมูลปฐมภูมิ ไม่ใช่จากชุดทดสอบที่ผมรันเอง)
ภูมิทัศน์ของการทดสอบการถดถอยเชิงภาพแบบ self-hosted เปลี่ยนไปแล้ว
เหตุการณ์เฉพาะสองอย่างในปีที่ผ่านมาได้ปรับโฉมรายชื่อคัดเลือกนี้ใหม่ และทั้งสองก็พลาดได้ง่ายหากคุณทำงานจากบทความแบบลิสต์ที่เขียนขึ้นก่อนที่มันจะเกิด
อย่างแรก: ใน การอภิปรายบน GitHub ในเดือนกันยายน 2025ผู้ดูแล Argos ได้ระบุว่า Argos ไม่ให้ทั้งการสนับสนุนและเอกสารสำหรับการรันนอกบริการแบบมีการจัดการ โค้ดใช้สัญญาอนุญาต MIT และเปิดเผยอยู่ ดังนั้น "คุณ self-host มันได้" จึงถูกต้องในเชิงเทคนิค แต่ไม่มีเส้นทางที่ได้รับการสนับสนุน ซึ่งเป็นข้อแตกต่างที่สำคัญอย่างมหาศาลเมื่อคุณคือคนที่ต้องเข้าเวรดูแลมัน
อย่างที่สอง: รีโพซิทอรี Lost Pixel ถูกเก็บถาวร เมื่อวันที่ 22 เมษายน 2026 เป็นแบบอ่านอย่างเดียว เมื่อทีมประกาศว่าพวกเขา กำลังย้ายไป Figma ไม่มีคำแนะนำการย้ายข้อมูลใด ๆ มาพร้อมกับการยุติ เครื่องมือที่จนกระทั่งเมื่อไม่นานมานี้เคยเป็นทางเลือก self-hosted ฟรีที่ถูกต้องแทน Percy และ Chromatic ตอนนี้กลายเป็นสิ่งที่ต้องพึ่งพาโดยไม่มีผู้ดูแล
ทั้งสองการเปลี่ยนแปลงชี้ไปในทิศทางเดียวกัน เหตุผลที่ทีมมาลงเอยตรงนี้ตั้งแต่แรก คือราคา SaaS ที่โตตามจำนวนเบราว์เซอร์คูณด้วยวิวพอร์ตคูณด้วยหน้าเว็บ หรือกฎการปฏิบัติตามข้อกำหนดที่ห้ามอัปโหลดภาพหน้าจอของ UI ที่ยังไม่เผยแพร่ไปยังบุคคลที่สาม ยังไม่ได้หายไป สิ่งที่เปลี่ยนไปคือเมนู self-hosted นั้นสั้นกว่าที่เห็น
ข้อสรุปสำคัญของหัวข้อนี้: มีเพียงหนึ่งในสามเครื่องมือที่ผู้คนคัดเข้ารายชื่อเท่านั้นที่วันนี้ self-host ได้จริงและมีการดูแลอย่างต่อเนื่อง
BackstopJS: ตัวเลือกที่ self-host ได้จริง
การติดตั้งคือ npm install -g backstopjs (หรือการติดตั้งในโปรเจกต์แบบโลคัล) และข้อเท็จจริงเดียวนี้อธิบายเหตุผลส่วนใหญ่ว่าทำไม BackstopJS จึงชนะในแกน self-hosting: ไม่มีบริการที่ต้องทำ reverse engineering ไม่มีแบ็กเอนด์แบบมีการจัดการที่มันแอบพึ่งพาอยู่ มันทำงานเป็นแพ็กเกจ npm หรือคอนเทนเนอร์ Docker บนโครงสร้างพื้นฐานที่คุณควบคุม ภายใต้สัญญาอนุญาต MIT ด้วยค่าลิขสิทธิ์เป็นศูนย์ README ระบุว่าสายเวอร์ชันปัจจุบัน (6.3.x) รองรับ Node 20
เบื้องหลัง มันขับ Puppeteer โดยค่าเริ่มต้น (headless Chrome) และยังรองรับ Playwright ทั้ง chromium, firefox และ webkit การเปรียบเทียบอิงพิกเซลผ่าน Resemble.js ด้วยค่าที่กำหนดได้ misMatchThreshold ซึ่งควบคุมว่าค่าเบี่ยงเบนของพิกเซลเท่าไรจึงนับเป็นความล้มเหลว การอนุมัติเกิดขึ้นผ่านรายงาน HTML พร้อม UI ในเบราว์เซอร์สำหรับการยอมรับการเปลี่ยนแปลง
ข้อจำกัดคือจุดที่การตัดสินใจเชิงกลยุทธ์เกิดขึ้น BackstopJS ไม่มีเวิร์กโฟลว์บล็อก PR ในตัว: มันจะบอกคุณว่ามีความแตกต่างอยู่ แต่การเชื่อมสิ่งนั้นเข้ากับประตู "PR นี้ merge ไม่ได้" เป็นหน้าที่ของคุณ การตั้งค่าของมันอยู่ใน JSON ทีละสถานการณ์ และเมื่อมีเทสต์เคสสองสามร้อยรายการ JSON นั้นก็กลายเป็นพื้นผิวการดูแลรักษาในตัวมันเอง การพัฒนาค่อนข้างช้ามากกว่าเร็ว: โปรเจกต์ไม่ได้ถูกเก็บถาวร แพ็กเกจปัจจุบันอยู่ที่ เวอร์ชัน 6.3.25 และรีโพแสดงดาว GitHub ราว 7,200 ดวงและ issue ที่เปิดอยู่ 516 รายการ ดังนั้นจงมอง BackstopJS ว่าเป็นเครื่องมือที่เติบโตเต็มที่และใช้งานได้ ไม่ใช่แพลตฟอร์มทดสอบเชิงภาพที่พัฒนาเร็ว
ความเสี่ยงเชิงปฏิบัติการที่แหลมคมที่สุดคือการเรนเดอร์ใน Docker สอง issue, ภาพหน้าจอสีขาวหรือถูกตัดใน Docker (#1156) และ ผลลัพธ์ที่ไม่สอดคล้องกันหลังอัปเกรด Docker เป็น v5.3.0 (#1303) เปิดอยู่มาหลายปีโดยไม่มีการแก้ไข Docker ก็เป็นสิ่งที่คุณต้องการสำหรับ CI พอดี เพราะมันทำให้การเรนเดอร์เป็นมาตรฐานเดียวกันข้ามเครื่อง ดังนั้นเครื่องมือที่ให้การควบคุมแก่คุณมากที่สุดก็ยื่นคลาสความไม่เสถียรที่รู้จักและยังไม่ถูกแก้ไขให้คุณด้วย ในการตั้งค่าเดียวกับที่คุณจะรันมันเป๊ะ ๆ นั่นคือความเสี่ยงที่วางแผนได้ ไม่ใช่ตัวตัดจบ แต่มันควรอยู่บนโต๊ะก่อนที่คุณจะตัดสินใจผูกมัด
เคล็ดลับ: กับดัก baseline ข้ามระบบปฏิบัติการ หากนักพัฒนาของคุณสร้าง baseline บน macOS แต่ CI runner ของคุณเป็น Linux เทสต์ของคุณจะล้มเหลวเพียงเพราะความแตกต่างของการลบรอยหยักของฟอนต์เพียงอย่างเดียว ก่อนที่จะมีการถดถอยจริงใด ๆ เกิดขึ้นเสียอีก ตามที่ผู้ปฏิบัติงานคนหนึ่งได้ บันทึกไว้ การเรนเดอร์ฟอนต์ต่างกันระหว่างอิมเมจ Linux ที่ใช้ในบริการ CI กับเครื่อง macOS แบบโลคัล มากพอที่จะทำให้เทสต์เชิงภาพล้มเหลวได้ด้วยตัวมันเอง ทางแก้คือสร้างและเปรียบเทียบ baseline ในสภาพแวดล้อมเดียว (รัน BackstopJS แบบโลคัลในอิมเมจ Docker เดียวกับที่คุณใช้ใน CI) เพื่อให้ภาพอ้างอิงและภาพเปรียบเทียบมาจากการเรนเดอร์ที่เหมือนกัน
Argos: เวิร์กโฟลว์ที่ดีที่สุด แต่ในทางปฏิบัติเป็น SaaS
Argos ทำเรื่องประสบการณ์การรีวิวได้ตรงจุดในแบบที่ BackstopJS ทำไม่ได้ และนั่นคือเหตุผลทั้งหมดที่มันอยู่ในรายชื่อนี้แม้จะมีข้อควรระวังเรื่อง self-hosting มันผสานรวมกับ Playwright, Cypress, Storybook, WebdriverIO และ Puppeteer และเสียบเข้ากับ GitHub Actions, GitLab CI, Bitbucket และ Azure DevOps เวิร์กโฟลว์รีวิว PR คือพื้นผิวผลิตภัณฑ์ระดับชั้นหนึ่ง และมันก็เคลื่อนไปข้างหน้าเรื่อย ๆ รายการ changelog ล่าสุด เพิ่มการรีวิวแบบร่วมกันพร้อมความคิดเห็นที่ปักหมุด (มิถุนายน 2026) และการเพิกเฉยการเปลี่ยนแปลงที่ไม่เสถียรโดยอัตโนมัติ
จุดต่างทางเทคนิคที่น่าสนใจที่สุดของมันคือการเปรียบเทียบ นอกเหนือจากการเปรียบเทียบพิกเซลแบบกำหนดผลได้ Argos ได้เพิ่ม การเปรียบเทียบสแนปช็อต ARIA สำหรับ Playwright SDK ของมันเมื่อวันที่ 4 พฤศจิกายน 2025 การเปรียบเทียบสแนปช็อต ARIA จะเทียบต้นไม้การเข้าถึง (บทบาท ป้ายกำกับ และโครงสร้าง) ควบคู่ไปกับภาพหน้าจอพิกเซล ซึ่งจับการถดถอยเชิงความหมายและการเข้าถึงประเภทหนึ่งที่การเปรียบเทียบพิกเซลล้วน ๆ อาจพลาด (เช่น ปุ่มที่ยังดูเหมือนเดิมทุกอย่างแต่สูญเสียป้ายกำกับที่เข้าถึงได้ไป) สำหรับทีมที่มีพันธะเรื่องการเข้าถึง นั่นคือความสามารถที่แท้จริงที่เครื่องมือแบบพิกเซลล้วนไม่มีให้
แล้วก็มาถึงข้อจำกัด โค้ดเป็น MIT แต่ผลิตภัณฑ์คือบริการแบบมีการจัดการ และผู้ดูแลก็พูดชัดเจนว่า self-hosting ไม่มีเอกสารและไม่ได้รับการสนับสนุน คุณตั้งมันขึ้นมาจากซอร์สได้ คุณแค่ทำโดยรู้ว่าการเปลี่ยนแปลงต้นน้ำใด ๆ อาจทำให้การดีพลอยของคุณพัง และไม่มีใครมีหน้าที่ต้องช่วย มีความไม่แน่นอนที่เกี่ยวข้องซึ่งควรชี้ให้เห็นมากกว่าจะยืนยัน: รายงานจากชุมชนบ่งชี้ว่าการผสานรวม GitLab Self-Managed คาดหวังแผน Enterprise (ผมถือว่านี่เป็นสัญญาณจากชุมชน ไม่ใช่ข้อกำหนดที่ยืนยันแล้ว ดังนั้นโปรดตรวจสอบกับการตั้งค่าของคุณเองก่อนที่มันจะนำไปสู่การตัดสินใจ)
สิ่งนี้ก่อให้เกิดช่องว่างที่อึดอัด ทีมที่มีข้อกำหนดด้านความเป็นส่วนตัวที่เข้มงวด (ทีมที่มีแรงจูงใจในการ self-host มากที่สุดเป๊ะ ๆ) ที่ต้องการประสบการณ์การรีวิวของ Argos ด้วย ไม่มีเส้นทางที่ดี พวกเขาใช้บริการแบบมีการจัดการและยอมรับการพึ่งพาบุคคลที่สาม หรือ self-host โดยไม่มีการสนับสนุน หรือเลือกเครื่องมืออื่นก็ได้ ไม่มีประตูที่สี่ที่สะอาดหมดจด และการเรียกมันตามจริงย่อมซื่อสัตย์กว่าการแสร้งว่าสัญญาอนุญาตโอเพนซอร์สปิดมันไว้
ข้อสรุปสำคัญของหัวข้อนี้: Argos คือเครื่องมือที่แข็งแกร่งกว่า การ self-host มันไม่ได้รับการสนับสนุนและเปราะบางในเชิงปฏิบัติการ
Lost Pixel: ถูกเก็บถาวร และควรทำอย่างไรหากคุณกำลังใช้มัน
แบนเนอร์ แบนเนอร์ ของรีโพ Lost Pixel เองคือเรื่องราวทั้งหมดในบรรทัดเดียว: รีโพถูกเจ้าของเก็บถาวรเมื่อวันที่ 22 เมษายน 2026 และตอนนี้เป็นแบบอ่านอย่างเดียว ทีมย้ายไป Figma รีลีสสุดท้ายคือ v3.22.0 ในเดือนพฤศจิกายน 2024 และไม่มีการเผยแพร่คำแนะนำการย้ายข้อมูลใด ๆ
จนถึงการเก็บถาวร Lost Pixel เคยเป็นตัวเลือกที่สมเหตุสมผล (การเรนเดอร์ที่อิงกับ Docker รองรับ Playwright และ Storybook รวมถึง Ladle และ Histoire และการทดสอบเชิงภาพทั้งแบบเต็มหน้าและระดับคอมโพเนนต์) ไม่มีสิ่งใดในนั้นเปลี่ยนแปลงในเชิงเทคนิคเมื่อวันที่ 22 เมษายน สิ่งที่เปลี่ยนไปคือตอนนี้มันไม่มีผู้ดูแล ไม่มีแพตช์ความปลอดภัย และไม่มีโรดแมป ซึ่งสำหรับสิ่งที่ต้องพึ่งพาใน CI ถือเป็นการตัดสิทธิ์สำหรับงานใหม่ ไม่ว่าเวอร์ชันปัจจุบันจะทำงานได้ดีแค่ไหน
หากคุณใช้มันอยู่วันนี้ การย้ายข้อมูลจะแยกตามวิธีที่คุณใช้มัน หากคุณพึ่งพาการทดสอบระดับคอมโพเนนต์ของมัน โดยเฉพาะเวิร์กโฟลว์ Storybook หรือ Ladle ตัวแทนที่ใกล้เคียงที่สุดคือบริการแบบมีการจัดการของ Argos หรือ การทดสอบภาพหน้าจอเนทีฟของ Playwright BackstopJS จับ selector หรือ URL ของ Storybook ได้ แต่ไม่ได้ให้เวิร์กโฟลว์คอมโพเนนต์ในตัวแบบเดียวกับที่ Lost Pixel ให้ ดังนั้นคุณจะต้องจำลองสถานะคอมโพเนนต์เหล่านั้นเอง หากคุณใช้มันสำหรับการถดถอยเชิงภาพแบบเต็มหน้า BackstopJS คือผู้สืบทอด self-hosted โดยตรง ไม่ว่าจะอย่างไร การย้ายไม่ได้เร่งด่วนในความหมายว่า "บิลด์ของคุณจะพังในวันพรุ่งนี้" แต่เวลากำลังเดิน: เครื่องมือทดสอบที่ไม่มีการดูแลจะค่อย ๆ ผุพังอย่างเงียบ ๆ เมื่อเวอร์ชันของเบราว์เซอร์ ระบบปฏิบัติการ และเฟรมเวิร์กของคุณเลื่อนห่างจากเวอร์ชันที่มันถูกบิลด์ล่าสุด
การเปรียบเทียบแบบเหลือบมองครั้งเดียว
นี่คือข้อมูลเดียวกันแบบเทียบเคียงกัน เพื่อให้คุณกวาดตาดูแกนที่สำคัญต่อการตัดสินใจ CI ก่อนจะนำไปวางทาบกับข้อจำกัดของคุณเอง
| แกน | BackstopJS | Argos | Lost Pixel |
|---|---|---|---|
| สัญญาอนุญาต | MIT | โค้ด MIT ผลิตภัณฑ์ SaaS แบบมีการจัดการ | MIT |
| ความจริงของ self-hosting | self-host ได้เต็มรูปแบบโดยการออกแบบ | เป็นไปได้ แต่ไม่มีการสนับสนุนและไม่มีเอกสาร | เคย self-host ได้ ตอนนี้ถูกเก็บถาวร |
| สถานะการดูแล | มีการดูแล พัฒนาช้าและเติบโตเต็มที่ | ใช้งานอยู่ (บริการแบบมีการจัดการ) | ถูกเก็บถาวรเมื่อวันที่ 22 เมษายน 2026 |
| แนวทางการเปรียบเทียบ | การเปรียบเทียบพิกเซล (Resemble.js) | การเปรียบเทียบพิกเซลบวกการเปรียบเทียบสแนปช็อต ARIA | การเปรียบเทียบพิกเซล (ไม่มีการดูแล) |
| การรองรับเฟรมเวิร์กและเอนจิน | Puppeteer (ค่าเริ่มต้น), Playwright | Playwright, Cypress, Storybook, WebdriverIO, Puppeteer | Playwright, Storybook, Ladle, Histoire (ณ เวลาที่เก็บถาวร) |
| เวิร์กโฟลว์รีวิว | รายงาน HTML อนุมัติด้วยมือ ไม่มีประตู PR | รีวิว PR ความคิดเห็นแบบร่วมกัน การกั้นประตู PR | ไม่มีผล (ถูกเก็บถาวร) |
| ต้นทุน | ฟรี | ราคา SaaS (อิงตามสแนปช็อต) | ฟรีแต่ไม่มีการดูแล |
วิธีเลือก (กรอบการตัดสินใจ)
เริ่มจากข้อจำกัดที่หนักที่สุดของคุณ ไม่ใช่จากรายการฟีเจอร์ ข้อจำกัดจะตัดเมนูส่วนใหญ่ออกให้คุณ
- self-hosted เต็มรูปแบบ งบประมาณเป็นศูนย์ และคุณยอมรับการทดสอบแบบเต็มหน้าอย่างเดียวพร้อมการรีวิวด้วยมือได้: BackstopJS เป็นตัวเลือกเดียวที่ตอบโจทย์ self-hosted มีการดูแล และฟรี พร้อมกันในเวลาเดียว และข้อแลกเปลี่ยน (ไม่มีประตู PR การตั้งค่าแบบ JSON ความไม่เสถียรของ Docker) คือปริมาณที่รู้จักซึ่งคุณออกแบบรอบ ๆ มันได้
- คุณต้องการประสบการณ์การรีวิวที่ดีที่สุด การกั้นประตู PR และการเปรียบเทียบ ARIA และคุณยอมรับการพึ่งพา SaaS ได้: บริการแบบมีการจัดการของ Argos นี่คือเส้นทางสู่จุดแข็งของ Argos โดยไม่มีความเสี่ยงของ self-hosting ที่ไม่ได้รับการสนับสนุน หากกฎการปฏิบัติตามข้อกำหนดห้ามอัปโหลดภาพหน้าจอไปยังบุคคลที่สาม ประตูนี้จะปิด และคุณกลับไปที่ BackstopJS
- ชุดทดสอบขนาดเล็กหรือ Playwright มาก่อน: พิจารณาที่จะไม่เพิ่มเครื่องมือเฉพาะทางใด ๆ เลย Playwright มาพร้อม
toHaveScreenshot()แบบเนทีฟ และสำหรับชุดต่ำกว่าราว 100 เทสต์ นั่นอาจเป็นทั้งหมดที่คุณต้องการ คู่มือของผู้ปฏิบัติงาน หนึ่งฉบับวางจุดเปลี่ยนที่เครื่องมือเฉพาะทางเริ่มคุ้มค่าไว้ราว ๆ ระดับนั้น (โปรดถือว่าเป็นข้อสังเกตของวงการ ไม่ใช่ตัวเลขทางการของ Playwright) ภาระการจัดการไฟล์ baseline ใน git จะโตขึ้นเลยจุดนั้น และนั่นคือจุดที่เครื่องมือเฉพาะทางคุ้มทุน - ปัจจุบันอยู่บน Lost Pixel: ย้ายตอนนี้ ตามการแบ่งในหัวข้อก่อนหน้า อย่าถือว่า "มันยังใช้ได้อยู่" เป็นเหตุผลที่จะอยู่ต่อ
ข้อควรระวังที่มาก่อนเครื่องมือทั้งหมดนี้และอยู่ยืนยงหลังจากพวกมัน: ทีม Sparkbox ซึ่งเขียนไว้เมื่อหลายปีก่อน เลือกตัวเลือกแบบโฮสต์โดยเฉพาะเพราะการทำให้วิศวกรใช้เทสต์จริง ๆ นั้นยากกว่าการตั้งค่า เครื่องมือ self-hosted ที่มี UI รีวิวอ่อนแอกว่าอาจชนะที่ต้นทุนและแพ้ที่การนำไปใช้ (หากทีมของคุณเพิกเฉยรายงาน BackstopJS ที่จอแจ ค่าลิขสิทธิ์เป็นศูนย์ของมันก็ไม่ได้ให้อะไรคุณเลย) จงคำนึงถึงประสบการณ์การรีวิวในการตัดสินใจ ไม่ใช่แค่ราคา
ข้อสรุปสำคัญของหัวข้อนี้: ข้อจำกัดเป็นตัวเลือกเครื่องมือ self-hosted และฟรีชี้ไปที่ BackstopJS เวิร์กโฟลว์ดีที่สุดกับ SaaS ที่ยอมรับได้ชี้ไปที่ Argos และเล็กกับ Playwright มาก่อนอาจชี้ไปที่ไม่มีเครื่องมือเลย
การกำหนดขนาด CI runner สำหรับ headless Chromium
เครื่องมือทั้งสามขับ headless Chromium และคือรอยเท้าหน่วยความจำของ Chromium (ไม่ใช่ CPU) ที่กำหนดขนาด runner ของคุณ เพราะ worker เบราว์เซอร์ที่ทำงานพร้อมกันแต่ละตัวต้องการ RAM ไม่กี่กิกะไบต์ของตัวเอง กำหนดขนาดเครื่องเล็กเกินไปแล้วเทสต์เชิงภาพของคุณจะไม่ล้มเหลวอย่างสะอาด มันถูก OOM ฆ่ากลางคันและถูกรายงานเป็นสัญญาณรบกวนโครงสร้างพื้นฐานที่ไม่เสถียร ซึ่งเป็นความล้มเหลวประเภทที่ดีบักยากที่สุด
ในฐานะแนวทางคร่าว ๆ ที่กำหนดขนาดตามการทำงานคู่ขนานมากกว่าเป็นตัวเลขตายตัว (การใช้งานจริงขึ้นกับความซับซ้อนของหน้าและจำนวน worker ที่คุณรันคู่ขนาน):
- ทีมเล็กหรือเทสต์แบบอนุกรม: ราว 2 vCPU / 4 GB RAM รองรับ worker headless Chromium ตัวเดียวพร้อมโอเวอร์เฮดของ CI daemon
- การใช้ CI แบบทีม: ราว 4 vCPU / 8 GB RAM รองรับ worker เบราว์เซอร์คู่ขนานราว 2 ถึง 4 ตัว ซึ่งเป็นจุดที่ทีมส่วนใหญ่มาลงเอย
- ปริมาณงานสูงหรือชุดทดสอบขนาดใหญ่: ราว 8 vCPU / 16 GB RAM สำหรับการทำงานคู่ขนานสูง หรือเมื่อการรันถดถอยเชิงภาพแชร์ runner กับงาน CI อื่น
พื้นที่จัดเก็บคือรายการที่เงียบเชียบ อาร์ติแฟกต์ภาพหน้าจอและ baseline ในอดีตสะสมทีละรอบ ๆ ดังนั้นจงวางแผนสำหรับการเติบโตนั้น: เผื่อพื้นที่จัดเก็บอย่างเอื้อเฟื้อหากคุณเก็บ baseline ไว้แบบโลคัล หรือดัน baseline และอาร์ติแฟกต์ไปยังที่จัดเก็บแบบอ็อบเจกต์ เพื่อไม่ให้ดิสก์ของ runner เป็นข้อจำกัด
VPS คือโฮสต์ตามธรรมชาติสำหรับ CI runner แบบ self-hosted ที่ทำสิ่งนี้ เพราะคุณต้องการ RAM ที่คาดเดาได้และจัดสรรเฉพาะสำหรับ worker Chromium และเครื่อง homelab จะสมเหตุสมผลก็ต่อเมื่อฮาร์ดแวร์มีอยู่แล้ว หากคุณกำลังตั้งสแตก CI โดยรอบด้วย ชิ้นส่วนรอบ ๆ เครื่องมือทดสอบเชิงภาพคือการดีพลอยแบบคลิกเดียวในมาร์เก็ตเพลสของ Cloudzy: Gitea, GitLab, Jenkins และ Forgejo สำหรับ CI forge และ Docker สำหรับความสม่ำเสมอของการเรนเดอร์ที่เครื่องมือต้องการ ตัวเครื่องมือถดถอยเชิงภาพเองติดตั้งทับด้านบนผ่าน npm หรือ Docker ดังนั้นจงเปิดใช้ Linux VPS ที่กำหนดขนาดจากช่วงข้างต้นและรันมันที่นั่น หากคุณกำลังเดินสาย CI ที่อิงกับ Docker คู่มือของ Cloudzy เรื่อง ทางเลือก GitLab แบบ self-hosted และ การลิสต์คอนเทนเนอร์ Docker ครอบคลุมการตั้งค่าที่อยู่ข้างเคียง
คำถามที่พบบ่อย
Argos self-host ได้ไหม?
ในเชิงเทคนิคได้ (โค้ดใช้สัญญาอนุญาต MIT) แต่ผู้ดูแลระบุในเดือนกันยายน 2025 ว่า Argos ไม่ให้ทั้งการสนับสนุนและเอกสารสำหรับการรันนอกบริการแบบมีการจัดการ จงถือว่า self-hosting ไม่ได้รับการสนับสนุนและเปราะบางในเชิงปฏิบัติการ: มันพังได้ที่การเปลี่ยนแปลงต้นน้ำใด ๆ โดยไม่มีผู้ดูแลคนใดมีหน้าที่ต้องช่วย สำหรับทีมส่วนใหญ่ บริการแบบมีการจัดการคือวิธีที่ใช้งานได้จริงในการได้ประโยชน์จาก Argos
เกิดอะไรขึ้นกับ Lost Pixel?
Lost Pixel ถูกเก็บถาวรเมื่อวันที่ 22 เมษายน 2026 เมื่อทีมย้ายไป Figma และยุติผลิตภัณฑ์ รีโพเป็นแบบอ่านอย่างเดียว รีลีสสุดท้ายคือ v3.22.0 ในเดือนพฤศจิกายน 2024 และไม่มีการจัดหาคำแนะนำการย้ายข้อมูลใด ๆ อย่านำมาใช้กับงานใหม่ หากคุณใช้มันอยู่ ให้วางแผนการย้ายไปที่ BackstopJS (การทดสอบแบบเต็มหน้า) หรือไปที่ Argos และ Playwright แบบเนทีฟ (การทดสอบคอมโพเนนต์)
การเปรียบเทียบสแนปช็อต ARIA คืออะไร?
การเปรียบเทียบสแนปช็อต ARIA จะเทียบต้นไม้การเข้าถึง (บทบาท ป้ายกำกับ และโครงสร้าง) ควบคู่ไปกับภาพหน้าจอพิกเซล และจับการถดถอยเชิงความหมายและการเข้าถึงที่การเปรียบเทียบพิกเซลเพียงอย่างเดียวอาจพลาด เช่น ปุ่มที่เหมือนกันทุกอย่างในเชิงภาพแต่สูญเสียป้ายกำกับที่เข้าถึงได้ Argos เพิ่มฟีเจอร์นี้เมื่อวันที่ 4 พฤศจิกายน 2025
headless Chromium ต้องการ RAM เท่าไรใน CI?
worker แบบอนุกรมตัวเดียวมักรันที่ราว 2 ถึง 4 GB และ worker ที่ทำงานพร้อมกันจะสเกล RAM จากตรงนั้นแบบเชิงเส้นคร่าว ๆ การใช้งานจริงขึ้นกับความซับซ้อนของหน้าและจำนวนอินสแตนซ์เบราว์เซอร์ที่คุณรันคู่ขนาน ดังนั้นจงถือว่าค่าเหล่านี้เป็นแนวทาง ไม่ใช่ตัวเลขตายตัว และเผื่อพื้นที่ไว้เพื่อหลีกเลี่ยงการรันเทสต์ที่ถูก OOM ฆ่า
BackstopJS รองรับ Playwright ไหม?
รองรับ Puppeteer คือเอนจินค่าเริ่มต้น (headless Chrome) และ BackstopJS ยังรองรับ Playwright ทั้ง chromium, firefox และ webkit คุณเลือกเอนจินในการตั้งค่าของคุณ
