Percy และ Chromatic สำหรับ Storybook
ผสาน Percy และ Chromatic เข้ากับกระบวนการ CI เพื่อทบทวนภาพขององค์ประกอบ Storybook โดยอัตโนมัติ
Percy และ Chromatic สำหรับ Storybook เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
ภาพรวมเพอร์ซี
เพอร์ซีเป็นแพลตฟอร์ม VRT บนคลาวด์ที่ผสานรวมกับไปป์ไลน์ของการผสานรวมอย่างต่อเนื่อง โดยจับภาพหน้าจอของหน้าเว็บและสตอรีของสตอรีบุ๊ก จัดเก็บภาพอ้างอิงไว้บนคลาวด์ และสร้างการตรวจทานความแตกต่างทางภาพที่เข้าถึงได้ผ่านส่วนติดต่อผู้ใช้บนเว็บ รองรับเพลย์ไรต์ ไซเปรส ซีลีเนียม และสตอรีบุ๊ก
ภาพรวมโครมาติก
โครมาติกเป็นแพลตฟอร์ม VRT ที่สร้างขึ้นโดยเฉพาะสำหรับสตอรีบุ๊ก โดยจับภาพสตอรีทั้งหมดในเบราว์เซอร์บนคลาวด์ เปรียบเทียบกับภาพอ้างอิง และสร้างส่วนติดต่อผู้ใช้สำหรับตรวจทานความแตกต่าง นอกจากนี้ โครมาติกยังเผยแพร่สตอรีบุ๊กเป็นเว็บไซต์เอกสารคอมโพเนนต์ที่โฮสต์ให้ใช้งาน
การผสานรวมกับสตอรีบุ๊ก
เพอร์ซีและโครมาติกจะค้นหาและบันทึกภาพของสตอรีในสตอรีบุ๊กทุกสตอรีโดยอัตโนมัติ ไม่จำเป็นต้องเขียนโค้ดการทดสอบเพิ่มเติม เพียงเขียนสตอรีสำหรับคอมโพเนนต์ของคุณ เรียกใช้ CLI แล้วสถานะด้านภาพทุกสถานะจะได้รับการทดสอบโดยอัตโนมัติ วิธีนี้ทำให้เริ่มใช้งานได้รวดเร็วในโครงการสตอรีบุ๊กที่มีอยู่แล้ว
การตั้งค่าเพอร์ซี
ติดตั้ง @percy/cli และ @percy/storybook เพิ่มตัวแปรสภาพแวดล้อม PERCY_TOKEN ในระบบการผสานรวมอย่างต่อเนื่อง และเพิ่ม percy storybook ./storybook-static ลงในไปป์ไลน์ เพอร์ซีจะบันทึกภาพของทุกสตอรีและโพสต์บิลด์ VRT ไปยังแดชบอร์ดของเพอร์ซีโดยอัตโนมัติ
การตั้งค่าโครมาติก
ติดตั้ง chromatic เพิ่ม CHROMATIC_PROJECT_TOKEN ในระบบการผสานรวมอย่างต่อเนื่อง แล้วเรียกใช้ chromatic --project-token=... การเรียกใช้ครั้งแรกจะสร้างภาพอ้างอิง การเรียกใช้ครั้งถัดไปจะเปรียบเทียบกับภาพอ้างอิงและโพสต์ลิงก์ตรวจทานไปยังการตรวจสอบ PR ของ GitHub
กระบวนการตรวจทาน
เครื่องมือทั้งสองจะเพิ่มการตรวจสอบ PR ที่แสดงข้อความว่า "ตรวจพบการเปลี่ยนแปลง X รายการ" เมื่อคลิก ระบบจะเปิดส่วนติดต่อผู้ใช้สำหรับตรวจทานพร้อมแสดงความแตกต่างแบบวางเทียบกันหรือแบบซ้อนทับ ผู้ตรวจทานจะอนุมัติการเปลี่ยนแปลงที่ตั้งใจไว้ ซึ่งเป็นการสร้างภาพอ้างอิงใหม่ หรือขอให้แก้ไขการถดถอยที่เกิดขึ้นโดยไม่ตั้งใจ
อาร์กิวเมนต์ของสตอรีสำหรับความครอบคลุม VRT
ใช้ args ของสตอรีบุ๊ก (ตัวควบคุม) เพื่อสร้างสตอรีหลายรูปแบบ ได้แก่ ค่าเริ่มต้น กำลังโหลด ข้อผิดพลาด ปิดใช้งาน LongText และ SmallViewport แต่ละรูปแบบจะกลายเป็นภาพบันทึก VRT แยกกัน ทำให้ครอบคลุมสถานะได้อย่างครบถ้วนโดยไม่ต้องเขียนไฟล์การทดสอบแยกกัน
การทดสอบพื้นที่แสดงผลและธีม
โครมาติกและเพอร์ซีรองรับความกว้างของพื้นที่แสดงผลหลายค่าในภาพบันทึกแต่ละภาพ ตั้งค่าในสตอรีหรือแบบส่วนกลางใน .storybook/preview.js สำหรับพื้นที่แสดงผล เรียกใช้ VRT ในแต่ละพื้นที่แสดงผลและแต่ละธีม (สว่าง/มืด) เพื่อจับการถดถอยของการตอบสนองและธีมได้พร้อมกัน
การจัดการภาพอ้างอิง
ยอมรับการเปลี่ยนแปลงทั้งหมดเมื่อเพิ่มเลขเวอร์ชันหลักหรือปรับการออกแบบใหม่โดยตั้งใจ เครื่องมือทั้งสองรองรับการยอมรับเป็นชุด หลังจากอัปเดตระบบการออกแบบครั้งใหญ่ ให้ยอมรับความแตกต่างทั้งหมดในครั้งเดียว แล้วภาพหน้าจอชุดใหม่จะกลายเป็นภาพอ้างอิงสำหรับการเปลี่ยนแปลงแบบเพิ่มทีละน้อยในอนาคต
การทดสอบการโต้ตอบด้วย VRT
ผสานฟังก์ชัน play() ของสตอรีบุ๊ก (การทดสอบการโต้ตอบ) เข้ากับ VRT โดย play() จะจำลองการโต้ตอบของผู้ใช้ (คลิกปุ่ม เปิดหน้าต่างโมดัล) จากนั้นภาพบันทึก VRT จะจับภาพสถานะที่เกิดขึ้น วิธีนี้ช่วยทดสอบผลลัพธ์ทางภาพของคอมโพเนนต์เชิงโต้ตอบที่ซับซ้อน
ค่าใช้จ่ายและขีดจำกัดของภาพบันทึก
เพอร์ซีและโครมาติกคิดค่าบริการตามภาพบันทึก ชุดสตอรีบุ๊กขนาดใหญ่ที่มีสตอรีหลายร้อยรายการ พื้นที่แสดงผลหลายขนาด และหลายธีม อาจสร้างภาพบันทึกหลายพันภาพต่อ PR โปรดติดตามการใช้งาน ใช้ดีคอเรเตอร์ของสตอรีอย่างมีประสิทธิภาพ และพิจารณาข้าม VRT สำหรับสตอรีที่เน้นตรรกะเพียงอย่างเดียว
ตรวจสอบความรู้
อะไรทำให้โครมาติกเหมาะกับโครงการสตอรีบุ๊กเป็นพิเศษเมื่อเทียบกับเครื่องมือ VRT ทั่วไป
สรุป
เพอร์ซีและโครมาติกทำให้ VRT สำหรับสตอรีบุ๊กเป็นแบบอัตโนมัติด้วยการค้นหาและบันทึกภาพของสตอรีทั้งหมดในเบราว์เซอร์บนคลาวด์ สร้างการตรวจทานความแตกต่างของ PR และจัดการภาพอ้างอิง เมื่อใช้ร่วมกับ args ของสตอรีเพื่อครอบคลุมสถานะ และ play() เพื่อทดสอบการโต้ตอบ เครื่องมือเหล่านี้จึงมอบการประกันคุณภาพทางภาพอย่างครบถ้วนสำหรับไลบรารีคอมโพเนนต์
คำถามที่พบบ่อย
บทเรียน “Percy และ Chromatic สำหรับ Storybook” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “Percy และ Chromatic สำหรับ Storybook” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “Percy และ Chromatic สำหรับ Storybook”
ผสาน Percy และ Chromatic เข้ากับกระบวนการ CI เพื่อทบทวนภาพขององค์ประกอบ Storybook โดยอัตโนมัติ คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “Percy และ Chromatic สำหรับ Storybook” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม
ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- แนวคิดการทดสอบการถดถอยทางภาพ
- Percy และ Chromatic สำหรับ Storybook
- การทดสอบหน่วย CSS ด้วย Jest
- การทดสอบการเข้าถึง: color-contrast และโฟกัส