บทนำสู่การทดสอบส่วนหน้า

Sep 13, 2025

วิธีการ

หน้า 1 จาก 2:

การทดสอบส่วนหน้าประเภทต่าง ๆ (และเมื่อใช้งาน)

การทดสอบส่วนหน้าประเภทต่าง ๆ (และเมื่อใช้งาน)
โอบกอดและบังคับใช้วัฒนธรรมการทดสอบ

การทดสอบรหัสส่วนหน้ายังคงเป็นวิธีปฏิบัติที่สับสนกับนักพัฒนาหลายคน แต่ด้วยการพัฒนาส่วนหน้าที่ซับซ้อนมากขึ้นและมีนักพัฒนาที่รับผิดชอบต่อความมั่นคงและความสม่ำเสมออย่างที่ไม่เคยมีมาก่อนการทดสอบส่วนหน้าจะต้องยอมรับในฐานะพลเมืองที่เท่าเทียมกันในโค้ดของคุณ เราแยกตัวเลือกการทดสอบที่แตกต่างกันของคุณและอธิบายว่าพวกเขาใช้สถานการณ์ใดดีที่สุด

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

ในตอนท้ายของบทความนี้คุณควรรู้สึกสะดวกสบายในการประเมินว่ากลยุทธ์การทดสอบใดที่เหมาะสมกับทีมงานของคุณและโค้ดของคุณ ตัวอย่างโค้ดต่อไปนี้จะถูกเขียนโดยใช้กรอบ Jasmine แต่กฎและกระบวนการมีความคล้ายคลึงกันในกรอบการทดสอบส่วนใหญ่

ซอฟต์แวร์ทดสอบผู้ใช้ที่ดีที่สุด

01. การทดสอบหน่วย

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

ลองนึกภาพคุณมีชุดเลโก้สำหรับบ้าน ก่อนที่คุณจะเริ่มสร้างคุณต้องการให้แน่ใจว่าแต่ละชิ้นแต่ละชิ้นคิดเป็น (ห้าสี่เหลี่ยมสีแดงสามสี่เหลี่ยมสีเหลือง) การทดสอบหน่วยทำให้แน่ใจว่ารหัสแต่ละชุด - สิ่งต่าง ๆ เช่นการตรวจสอบอินพุตและการคำนวณ - ทำงานตามที่ตั้งใจไว้ก่อนสร้างคุณสมบัติที่ใหญ่กว่า

ช่วยในการคิดเกี่ยวกับการทดสอบหน่วยควบคู่กับ "ทำสิ่งหนึ่งที่ดี 'มนต์ หากคุณมีรหัสชิ้นหนึ่งที่มีความรับผิดชอบเพียงครั้งเดียวคุณอาจต้องการเขียนการทดสอบหน่วย

ลองดูที่โค้ดโค้ดต่อไปนี้ซึ่งเรากำลังเขียนการทดสอบหน่วยสำหรับเครื่องคิดเลขที่เรียบง่าย:

 อธิบาย ("การดำเนินการเครื่องคิดเลข", ฟังก์ชั่น () {
  มัน ("ควรเพิ่มตัวเลขสองตัว" ฟังก์ชั่น () {
    เครื่องคิดเลข.init ();
    varrugu = calculator.adnumbers (7,3);
    คาดหวัง (ผลลัพธ์) .tobe (10);
  });
});

ในของเรา เครื่องคิดเลข แอปพลิเคชันเราต้องการให้แน่ใจว่าการคำนวณมักจะทำงานอย่างอิสระในแบบที่เราคาดหวัง ในตัวอย่างเราต้องการให้แน่ใจว่าเราสามารถเพิ่มตัวเลขสองตัวเข้าด้วยกันได้อย่างแม่นยำ

สิ่งแรกที่เราทำคืออธิบายชุดของการทดสอบที่เราจะดำเนินการโดยใช้จัสมิน อธิบาย . สิ่งนี้สร้างชุดทดสอบ - การจัดกลุ่มการทดสอบที่เกี่ยวข้องกับพื้นที่เฉพาะของแอปพลิเคชัน สำหรับเครื่องคิดเลขของเราเราจะจัดกลุ่มการทดสอบการคำนวณแต่ละครั้งในห้องสวีทของตัวเอง

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

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

จากนั้นเราจะเขียนการยืนยันการทดสอบของเราซึ่งเป็นที่ที่เราทดสอบหากรหัสของเราฟังก์ชั่นตามที่เราคาดหวัง เราเริ่มต้นเครื่องคิดเลขของเราและดำเนินการของเรา addnumbers ฟังก์ชั่นที่มีตัวเลขสองตัวที่เราต้องการเพิ่ม เราเก็บหมายเลขเป็นผลให้และยืนยันว่านี่เท่ากับจำนวนที่เราคาดหวัง (ในกรณีของเรา 10)

ถ้า addnumbers ล้มเหลวในการคืนตัวเลขที่ถูกต้องการทดสอบของเราจะล้มเหลว เราจะเขียนการทดสอบที่คล้ายกันสำหรับการคำนวณอื่น ๆ ของเรา - การลบการคูณและอื่น ๆ

02. การทดสอบการยอมรับ

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

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

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

 อธิบาย ("ลงทะเบียนสถานะล้มเหลว" ฟังก์ชั่น () {
  มัน ("ไม่อนุญาตให้สมัครใช้ข้อมูลที่ไม่ถูกต้อง" ฟังก์ชั่น () {
    Var Page = Visit ("/ Home");
    หน้า.fill_in ("อินพุต [name = 'อีเมล']", "ไม่ใช่อีเมล");
    Page.Click (ปุ่ม [Type = ส่ง] ");
    Page.Click (ปุ่ม [Type = ส่ง] ");
    คาดหวัง (หน้า.find ("# signuperror") hasclass ("ซ่อน")) tobefalsy ();
  });
});

โครงสร้างดูคล้ายกับการทดสอบหน่วยของเรา: เรากำหนดห้องชุดด้วย อธิบาย จากนั้นเขียนการทดสอบของเราภายใน มัน ฟังก์ชั่นจากนั้นดำเนินการรหัสบางอย่างและตรวจสอบผลลัพธ์

แทนที่จะทดสอบรอบ ๆ ฟังก์ชั่นและค่าเฉพาะที่นี่เรากำลังทดสอบเพื่อดูว่าเวิร์กโฟลว์เฉพาะ (การไหลของการลงทะเบียน) ทำงานตามที่คาดไว้เมื่อเรากรอกข้อมูลที่ไม่ดี มีการกระทำในนาทีที่เกิดขึ้นที่นี่เช่นการตรวจสอบแบบฟอร์มที่อาจเป็นหน่วยทดสอบรวมถึงการจัดการใด ๆ สำหรับสิ่งที่แสดงสถานะข้อผิดพลาดของเราแสดงให้เห็นโดยองค์ประกอบที่มี ID คนโง่ .

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

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

03. การทดสอบการถดถอยทางสายตา

ดังที่ได้กล่าวไว้ในการแนะนำการทดสอบบางประเภทมีลักษณะเฉพาะกับโลกส่วนหน้า ครั้งแรกของเหล่านี้คือการทดสอบการถดถอยทางสายตา สิ่งนี้ไม่ได้ทดสอบรหัสของคุณ แต่เปรียบเทียบผลลัพธ์ที่เรนเดอร์ของรหัสของคุณ - อินเทอร์เฟซของคุณ - ด้วยแอปพลิเคชันของคุณในการผลิตการแสดงละครหรือสภาพแวดล้อมท้องถิ่นที่มีการเปลี่ยนแปลงล่วงหน้า

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

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

 Casper.Start ("/ Home") จากนั้น (ฟังก์ชั่น () {

  // สถานะเริ่มต้นของแบบฟอร์ม
  phantomcss.screenshot ("# signupform", "แบบฟอร์มลงทะเบียน");

  // กดปุ่มลงทะเบียน (ควรทริกเกอร์ข้อผิดพลาด)
  Casper.Click ("ปุ่ม # ลงทะเบียน");

  // ใช้ภาพหน้าจอขององค์ประกอบ UI
  phantomcss.screenshot ("# signupform", "ข้อผิดพลาดแบบฟอร์มลงทะเบียน");

  // กรอกแบบฟอร์มโดยแอตทริบิวต์ชื่อ & amp; ส่ง
  Casper.Fill ("# signupform", {
    ชื่อ: "Alicia Sedlock",
    อีเมล: "[email protected]"
  }, จริง);

  // สกรีนช็อตที่สองของสถานะความสำเร็จ
 phantomcss.screenshot ("# signupform", "ลงทะเบียนสำเร็จ");
});

This visual regression framework illustrates decision trees in your application, exposing complexity to those outside of development — กรอบการถดถอยภาพนี้แสดงให้เห็นถึงต้นไม้ในการตัดสินใจในใบสมัครของคุณเปิดเผยความซับซ้อนให้กับผู้ที่อยู่นอกการพัฒนา

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

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

นี่เป็นเพียงเพราะลักษณะของการพัฒนา - การเปลี่ยนแปลง ui อาจมีเจตนา แต่การทดสอบเท่านั้นที่รู้ว่า 'ใช่นี่เป็นสิ่งเดียวกัน' หรือ 'ไม่แตกต่างกัน' อย่างไรก็ตามหากการถดถอยทางสายตาเป็นจุดปวดภายในแอปพลิเคชันของคุณวิธีนี้อาจช่วยประหยัดเวลาและความพยายามของทีมโดยรวมเมื่อเทียบกับการแก้ไขการถดถอยอย่างต่อเนื่อง

04. การทดสอบการเข้าถึงและประสิทธิภาพ

ในฐานะที่เป็นวัฒนธรรมและการรับรู้รอบ ๆ การทดสอบส่วนหน้าเพิ่มขึ้นดังนั้นความสามารถของเราในการทดสอบด้านต่าง ๆ ของระบบนิเวศ ให้การโฟกัสที่เพิ่มขึ้น การเข้าถึงได้ และประสิทธิภาพในวัฒนธรรมทางเทคนิคของเราการรวมเข้ากับชุดทดสอบของคุณช่วยให้มั่นใจว่าแนวคิดเหล่านี้ยังคงมีลำดับความสำคัญ

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

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

อย่างไรก็ตามหากคุณไม่ได้ใช้งานนักวิ่งคุณสามารถคว้า PerfBudget เป็นโมดูล NPM แบบสแตนด์อโลนและเรียกใช้การทดสอบด้วยตนเอง

นี่คือสิ่งที่ดูเหมือนว่าจะเรียกใช้สิ่งนี้ผ่านเทอร์มินัล:

 PerfBudget --URL http://www.alicibility.com - คีย์ [WebPageTest API] - Speedindex 2000 - Rrender 400

และในทำนองเดียวกันการตั้งค่าผ่านฮึดฮัด:

perfbudget: {
  ค่าเริ่มต้น: {
    ตัวเลือก: {
      URL: 'http://alicaily.com'
      คีย์: 'WebPageTest API Key',
      งบประมาณ: {
        SpeedIndex: '2000',
        แสดงผล: '400'
      }
    }
  }
}

[... ]

Grunt.RegisterTask ('เริ่มต้น', ['jsmint', 'perfbudget']);

ตัวเลือกเดียวกันนี้มีให้สำหรับการทดสอบการเข้าถึง ดังนั้นสำหรับ PA11Y คุณสามารถเรียกใช้ PA11Y คำสั่งในเบราว์เซอร์ของคุณสำหรับเอาต์พุตหรือตั้งค่างานเพื่อทำตามขั้นตอนนี้โดยอัตโนมัติ ในเทอร์มินัล:

 Pa11y Alicibility.com

// เป็นคำสั่ง JavaScript หลังจากการติดตั้ง NPM

var pa11y = ต้องการ ('pa11y'); // ต้องการ PA11Y
var test = pa11y (); // รับ PA11Y พร้อมที่จะตั้งค่า

test.run ('alicibility.com', ฟังก์ชั่น (ข้อผิดพลาด, ผลลัพธ์) {
  // บันทึกการแยกวิเคราะห์ผลลัพธ์ของคุณ
});

เครื่องมือส่วนใหญ่ในหมวดหมู่เหล่านี้เป็นแบบ plug-and-play อย่างเป็นธรรม แต่ยังให้ตัวเลือกในการปรับแต่งวิธีการทดสอบการทำงานได้อย่างไรคุณสามารถตั้งค่าให้เพิกเฉยต่อมาตรฐาน WCAG บางอย่าง

Resemble.js is a popular image comparison library, and gives you a lot of control over what triggers a visual differentiation — resemble.js เป็นไลบรารีเปรียบเทียบรูปภาพที่เป็นที่นิยมและให้คุณควบคุมสิ่งที่ทำให้เกิดความแตกต่างด้วยภาพ

หน้าถัดไป: วิธีการแนะนำการทดสอบในเวิร์กโฟลว์ของคุณ

หน้าปัจจุบัน: การทดสอบส่วนหน้าประเภทต่าง ๆ (และเมื่อใช้งาน)

หน้าต่อไป โอบกอดและบังคับใช้วัฒนธรรมการทดสอบ

บทนำสู่การทดสอบส่วนหน้า

01. การทดสอบหน่วย

02. การทดสอบการยอมรับ

03. การทดสอบการถดถอยทางสายตา

04. การทดสอบการเข้าถึงและประสิทธิภาพ

วิธีการ - บทความยอดนิยม

วิธีการเปลี่ยนแบบอักษรใน Bio Twitter ของคุณ

วิธีการซ่อนรหัส JavaScript ของคุณจากแหล่งดู

เข้าใจการประมวลผลภาษาธรรมชาติ

สีศิลปะแนวตั้งแสดงออกด้วย Artrage 5

สร้างมนุษย์ดิจิตอลที่เหมือนจริง

วิธีการเลือกด้วยเครื่องมือ Lasso ของ Photoshop

วิธีสร้างเอฟเฟกต์ที่น่าทึ่งด้วยรูปร่าง CSS

วิธีการถ่ายทอดเสียงในภาพวาด

หมวดหมู่