HTML Academy · บทเรียน

การทดสอบ HTML ด้วยภาพสแนปชอต

ตรวจจับการเปลี่ยนแปลง HTML ที่ไม่ได้ตั้งใจด้วยการทดสอบสแนปชอต

การทดสอบ HTML ด้วยภาพสแนปชอต เป็นบทเรียน HTML Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน

การทดสอบด้วยภาพบันทึกคืออะไร

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

การทดสอบด้วยภาพบันทึกของเจสต์

ตัวจับคู่ toMatchSnapshot() ของเจสต์จะแปลงค่าเป็นอนุกรม (รวมถึง JSX ที่แสดงผลเป็น HTML) แล้วเปรียบเทียบกับไฟล์ที่บันทึกไว้ npx jest -u จะอัปเดตภาพบันทึกเมื่อเกิดการเปลี่ยนแปลงโดยตั้งใจ การทดสอบทำหน้าที่เป็นตาข่ายป้องกันการถดถอยจากการเปลี่ยนแปลงการแสดงผลโดยไม่ตั้งใจ

import { render } from "@testing-library/react";
import Button from "./Button";

test("Button renders consistently", () => {
  const { container } = render(<Button>Save</Button>);
  expect(container.innerHTML).toMatchSnapshot();
});

ตัวเรียกใช้การทดสอบของสตอรีบุ๊ก

ตัวเรียกใช้การทดสอบของสตอรีบุ๊กจะเรียกใช้ทุกเรื่องราวและบันทึกผลลัพธ์ผ่านแอกซ์ (การเข้าถึง) และการแปลง DOM เป็นอนุกรม เมื่อใช้ร่วมกับโครมาติก จะเพิ่มการตรวจจับการถดถอยด้านภาพเข้าไป — มีความแตกต่างระดับพิกเซลเพิ่มเติมจากความแตกต่างของ DOM

การถดถอยด้านภาพด้วยเพอร์ซีหรือโครมาติก

เพอร์ซีและโครมาติกจะบันทึกหน้าเว็บที่แสดงผลเป็นรูปภาพและแสดงความแตกต่างด้านภาพ เครื่องมือเหล่านี้ตรวจจับการถดถอยของ CSS ที่ภาพบันทึก DOM ตรวจไม่พบ เช่น การเปลี่ยนแบบอักษร การปรับระยะขอบ หรือการเปลี่ยนสี ควรใช้ภาพบันทึก DOM (ประหยัดและรวดเร็ว) ร่วมกับภาพบันทึกด้านภาพ (ใช้ทรัพยากรมากและครอบคลุม)

การบำรุงรักษาภาพบันทึก

ภาพบันทึกที่เปลี่ยนแปลง "ง่ายเกินไป" จะกลายเป็นสัญญาณรบกวน หลีกเลี่ยงการบันทึกค่าที่ไม่คงที่ เช่น วันที่ ตัวระบุ และคีย์สุ่ม ใช้ตัวจับคู่คุณสมบัติของเจสต์ (expect.any(String)) สำหรับฟิลด์ที่เปลี่ยนแปลงระหว่างการเรียกใช้แต่ละครั้งอย่างถูกต้องตามเหตุผล เก็บภาพบันทึกให้มีขนาดเล็กและมุ่งประเด็น

การตรวจทานโค้ดสำหรับภาพบันทึก

ความแตกต่างของไฟล์ภาพบันทึกในคำขอรวมโค้ดเป็นเนื้อหาสำคัญสำหรับการตรวจทาน ผู้ตรวจทานจะยืนยันว่าการเปลี่ยนแปลง DOM เป็นสิ่งที่ตั้งใจและยอมรับได้ พร้อมช่วยตรวจจับผลกระทบต่อเนื่องโดยไม่ตั้งใจจากการเปลี่ยน CSS "แบบง่าย ๆ" ควรปฏิบัติต่อความแตกต่างของภาพบันทึกเช่นเดียวกับความแตกต่างอื่น ๆ

อย่าสร้างภาพบันทึกทุกอย่าง

การสร้างภาพบันทึกของการแสดงผลหน้าเว็บระดับบนสุดขนาดใหญ่มีความเปราะบาง — การเปลี่ยนแปลงเล็กน้อยทุกครั้งจะส่งต่อเป็นความแตกต่างขนาดมหึมา ให้สร้างภาพบันทึกในระดับองค์ประกอบ: ปุ่มแต่ละปุ่ม การ์ดแต่ละใบ และ FormField แต่ละรายการ การแสดงผลระดับหน้าควรใช้การทดสอบการถดถอยด้านภาพแทน

การทำให้เป็นอนุกรมของภาพบันทึก

เลือกวิธีทำให้เป็นอนุกรม: HTML แบบเต็ม DOM แบบย่อ เฉพาะคุณสมบัติ หรือแผนผังการช่วยการเข้าถึง แต่ละรูปแบบตรวจจับการถดถอยได้แตกต่างกัน สำหรับองค์ประกอบ UI แล้ว HTML แบบเต็มจะครอบคลุมที่สุด ส่วนตรรกะที่ขับเคลื่อนด้วยคุณสมบัติ การตรวจสอบเฉพาะคุณสมบัติจะใช้ทรัพยากรน้อยกว่าและแทบไม่ทำให้เกิดผลบวกลวง

เมื่อภาพบันทึกไม่ผ่าน

สาเหตุที่พบบ่อยที่สุดคือการปรับโครงสร้างโค้ดที่สร้าง HTML ซึ่งให้ผลเทียบเท่ากันแต่มีโครงสร้างต่างกัน ให้ตรวจสอบความแตกต่าง: หากการเปลี่ยนแปลงนั้นตั้งใจและเป็นผลดี ให้อัปเดตภาพบันทึก หากไม่คาดคิด ให้แก้ไขโค้ดต้นเหตุ อย่าเรียกใช้ jest -u โดยไม่ตรวจสอบอย่างเด็ดขาด

ภาพบันทึกข้ามเบราว์เซอร์

เครื่องมือทดสอบการถดถอยด้านภาพจะแสดงผลในหลายเบราว์เซอร์และรายงานความแตกต่างเฉพาะของแต่ละเบราว์เซอร์ ใช้แนวทางนี้เพื่อตรวจจับ CSS ที่แสดงผลต่างกันใน Safari กับ Chrome ซึ่งพบได้บ่อยกับความสามารถด้านการจัดวางแบบใหม่ในช่วงเริ่มนำมาใช้ หากไม่มีภาพบันทึกข้ามเบราว์เซอร์ การถดถอยเหล่านี้จะถูกพบโดย QA ด้วยตนเองเท่านั้น

การใช้ร่วมกับการทดสอบอื่น

การทดสอบภาพบันทึกเป็นสิ่งจำเป็นแต่ยังไม่เพียงพอ การทดสอบนี้ตรวจจับการเปลี่ยนแปลงการแสดงผลที่ไม่ได้ตั้งใจได้ แต่ตรวจไม่พบข้อผิดพลาดของตรรกะ เช่น การคลิกปุ่มแล้วต้องทำงานได้ถูกต้อง ควรใช้ร่วมกับการทดสอบระดับหน่วยสำหรับพฤติกรรม และการทดสอบตั้งแต่ต้นจนจบสำหรับขั้นตอนการใช้งานของผู้ใช้ แต่ละชั้นจะตรวจจับความล้มเหลวที่แตกต่างกัน

ประสิทธิภาพ

การทดสอบภาพบันทึกทำงานได้รวดเร็ว — เพียงเปรียบเทียบสตริงหรือไฟล์ การทดสอบการถดถอยด้านภาพจะช้ากว่า เพราะต้องแสดงผลพิกเซล เปรียบเทียบรูปภาพ และมักทำในหลายเบราว์เซอร์ ให้เรียกใช้ภาพบันทึกในทุกการสร้าง CI ส่วนการทดสอบการถดถอยด้านภาพให้เรียกใช้ในทุก PR แต่อาจไม่ต้องเรียกใช้ในการส่งการเปลี่ยนแปลงทุกครั้ง ทั้งนี้ขึ้นอยู่กับงบประมาณของ CI

ตรวจสอบความรู้

เหตุใดการทดสอบภาพบันทึกของ DOM จึงมักต้องใช้ร่วมกับการทดสอบการถดถอยด้านภาพ เช่น Percy หรือ Chromatic

สรุป

การทดสอบภาพบันทึกจะเก็บ HTML ที่แสดงผลในการเรียกใช้ครั้งแรก และแจ้งเตือนการเปลี่ยนแปลงใด ๆ ในการเรียกใช้ครั้งถัดไป ใช้ Jest toMatchSnapshot สำหรับ DOM ขององค์ประกอบ ใช้ตัวเรียกใช้การทดสอบของ Storybook สำหรับเรื่องราว และใช้ Percy หรือ Chromatic สำหรับการทดสอบการถดถอยด้านภาพในระดับพิกเซล สร้างภาพบันทึกในระดับองค์ประกอบ ไม่ใช่ระดับหน้าเว็บ ไม่รวมค่าที่ไม่คงที่ และตรวจสอบความแตกต่างอย่างรอบคอบใน PR ใช้ร่วมกับการทดสอบระดับหน่วยและการทดสอบตั้งแต่ต้นจนจบเพื่อให้ครอบคลุมทั้งหมด

คำถามที่พบบ่อย

บทเรียน “การทดสอบ HTML ด้วยภาพสแนปชอต” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การทดสอบ HTML ด้วยภาพสแนปชอต” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การทดสอบ HTML ด้วยภาพสแนปชอต”

ตรวจจับการเปลี่ยนแปลง HTML ที่ไม่ได้ตั้งใจด้วยการทดสอบสแนปชอต คุณปฏิบัติ HTML Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “การทดสอบ HTML ด้วยภาพสแนปชอต” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน HTML Academy นี้ได้ไหม

ได้ บทเรียน HTML Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ HTML Academy