เมื่อความซับซ้อนและขนาดของแอปพลิเคชันเพิ่มขึ้นมันไม่สามารถใช้การทดสอบด้วยตนเองของความน่าเชื่อถือการจับข้อผิดพลาดและการทดสอบการถดถอยของคุณสมบัติใหม่
เพื่อแก้ปัญหานี้เราได้จัดตั้งนักวิ่งสถานการณ์เชิงมุมเพื่อเลียนแบบการดำเนินงานของผู้ใช้และช่วยให้เราตรวจสอบความทนทานของแอปพลิเคชันเชิงมุม
1. สรุป
เราสามารถเขียนการทดสอบสถานการณ์ใน JavaScript เพื่ออธิบายพฤติกรรมของแอปพลิเคชันของเราและเพื่อโต้ตอบกับบางรัฐ สถานการณ์ประกอบด้วยบล็อก "IT" หนึ่งบล็อกขึ้นไป (เราสามารถปฏิบัติตามข้อกำหนดเหล่านี้สำหรับแอปพลิเคชันของเรา) ซึ่งประกอบด้วยคำสั่งและความคาดหวัง คำสั่งบอกให้นักวิ่งทำอะไรบางอย่างในแอปพลิเคชัน (เช่นไปที่หน้าหรือคลิกปุ่ม) และความคาดหวังจะบอกให้นักวิ่งตัดสินบางสิ่งเกี่ยวกับรัฐ (เช่นค่าของโดเมนหรือ URL ปัจจุบัน) หากความคาดหวังใด ๆ ล้มเหลวนักวิ่งแท็กนี้ "มัน" เป็น "เท็จ" จากนั้นก็ดำเนินการต่อไปด้วย "มัน" ต่อไป สถานการณ์ยังสามารถมีบล็อก "ก่อน" และ "aftereach" ที่ทำงานก่อนหรือหลังแต่ละบล็อก "มัน" โดยไม่คำนึงว่ามันจะผ่านหรือไม่ก็ตาม
นอกเหนือจากองค์ประกอบข้างต้นแล้วสถานการณ์ยังสามารถรวมฟังก์ชั่นผู้ช่วยเพื่อหลีกเลี่ยงรหัสที่ซ้ำกันในบล็อก "IT"
นี่คือตัวอย่างสถานการณ์ง่ายๆ:
อธิบาย ('Buzz Client', function () {it ('ควรกรองผลลัพธ์', function () {input ('user'). ป้อน ('jacksparrow'); องค์ประกอบ (': ปุ่ม') คลิก (); คาดหวัง (repeater ('ul li') Li '). count ()). toequal (1);});});สถานการณ์นี้อธิบายถึงข้อกำหนดของไคลเอนต์เครือข่ายและอย่างชัดเจนควรมีความสามารถในการกรองผู้ใช้ มันเริ่มต้นด้วยการป้อนค่าลงในกล่องอินพุต“ ผู้ใช้” คลิกปุ่มเดียวบนหน้าและจากนั้นจะตรวจสอบว่ามีรายการ 10 รายการ จากนั้นจะเข้าสู่ "ผึ้ง" ลงในกล่องอินพุตของ "FilterText" จากนั้นตรวจสอบว่ารายการจะลดลงเหลือเพียงรายการเดียว
บท API ต่อไปนี้แสดงคำสั่งและความคาดหวังที่มีอยู่ใน Runner
2. API
ซอร์สโค้ด: https://github.com/angular/angular.js/blob/master/src/ngscenario/dsl.js
หยุดชั่วคราว()
หยุดการดำเนินการทดสอบจนกว่าเราจะเรียกประวัติย่อ () ในคอนโซล (คุณสามารถคลิกลิงก์เรซูเม่ในอินเทอร์เฟซรันเนอร์)
นอนหลับ (วินาที)
หยุดการทดสอบชั่วคราวสำหรับ n วินาที
เบราว์เซอร์ (). Navigateto (URL)
โหลด URL ที่ระบุใน setFrame
เบราว์เซอร์ (). Navigateto (URL, FN)
โหลด URL ที่ส่งคืนโดย FN ในกรอบทดสอบ พารามิเตอร์ URL ที่นี่เพิ่งใช้เป็นเอาต์พุตทดสอบ API นี้สามารถใช้งานได้เมื่อ URL ปลายทางเป็นแบบไดนามิก (ที่อยู่ยังไม่ทราบเมื่อเขียนการทดสอบ)
เบราว์เซอร์ (). โหลดซ้ำ ()
รีเฟรชหน้าที่โหลดในปัจจุบันในเฟรมทดสอบ
เบราว์เซอร์ (). window (). href ()
กลับไปที่ window.location.href ของหน้าปัจจุบันของกรอบทดสอบ
เบราว์เซอร์ (). window (). path ()
ส่งคืน window.location.pathName ของหน้าปัจจุบันของกรอบทดสอบ
เบราว์เซอร์ (). window (). ค้นหา ()
กลับไปที่ window.location.search ของหน้าปัจจุบันของกรอบทดสอบ
เบราว์เซอร์ (). window (). แฮช ()
ส่งคืน window.location.hash (ไม่รวม #) ของหน้าปัจจุบันของกรอบทดสอบ
เบราว์เซอร์ (). ตำแหน่ง (). url ()
ส่งคืนผลลัพธ์ของ $ location.url () ของหน้าปัจจุบัน (http://docs.angularjs.org/api/ng.$location)
เบราว์เซอร์ (). ตำแหน่ง (). เส้นทาง ()
ส่งคืนผลลัพธ์ของ $ location.path () ของหน้าปัจจุบัน (http://docs.angularjs.org/api/ng.$location)
เบราว์เซอร์ (). ตำแหน่ง (). ค้นหา ()
ส่งคืนผลลัพธ์ของ $ ตำแหน่งของหน้าปัจจุบัน search () (http://docs.angularjs.org/api/ng.$location)
เบราว์เซอร์ (). ตำแหน่ง (). แฮช ()
ส่งคืนผลลัพธ์ของตำแหน่ง $ แฮช () ของหน้าปัจจุบัน (http://docs.angularjs.org/api/ng.$location)
คาดหวัง (อนาคต). {matcher}
กำหนดว่ามูลค่าในอนาคตที่กำหนดนั้นเป็นไปตามตัวจับคู่หรือไม่ การประกาศ API ทั้งหมดส่งคืนวัตถุในอนาคตด้วยค่าที่ระบุหลังจากดำเนินการ ตัวจับคู่ถูกกำหนดโดยใช้ Angular.scenario.matcher และพวกเขาใช้ค่าของอนาคตเพื่อดำเนินการตามความคาดหวัง ตัวอย่างเช่น:
คาดหวัง (เบราว์เซอร์ () .location () .href ()) .toequal ('http://www.google.com');
คาดหวัง (อนาคต) .not (). {matcher}
กำหนดว่ามูลค่าของอนาคตที่กำหนดนั้นตรงกันข้ามกับความคาดหวังที่คาดหวังของตัวจับคู่ที่ระบุหรือไม่
ใช้ (ตัวเลือก, ฉลาก)
กำหนดขอบเขตการเลือกองค์ประกอบ DSL ถัดไป (คาดว่าจะ จำกัด ขอบเขตของตัวเลือกการประมาณการฉลากจะใช้สำหรับการทดสอบเอาต์พุต)
ตัวอย่าง:
ใช้ ('#foo', "'foo' ฟิลด์ข้อความ"). อินพุต ('bar')
การผูก (ชื่อ)
ส่งคืนการผูกแรกที่ตรงกับชื่อที่ระบุ (อาจเกี่ยวข้องกับ NG-bind)
อินพุต (ชื่อ) .ENTER (ค่า)
ป้อนค่าที่ระบุไปยังฟิลด์ฟอร์มฟอร์มที่ระบุของชื่อ
อินพุต (ชื่อ). ตรวจสอบ ()
เลือกหรือยกเลิกการเลือกช่องทำเครื่องหมายของชื่อที่ระบุ
อินพุต (ชื่อ) .Select (ค่า)
เลือกอินพุต [type =” วิทยุ”] ด้วยค่ามัธยฐานของชื่อที่ระบุชื่อ
อินพุต (ชื่อ) .val ()
ส่งคืนค่าปัจจุบันของอินพุตของชื่อที่ระบุ
repeater (ตัวเลือก, ฉลาก) .count ()
ส่งคืนจำนวนแถวของ repeater ที่ตรงกับตัวเลือกที่ระบุ (ตัวเลือก jQuery) ฉลากใช้เป็นเอาต์พุตทดสอบเท่านั้น
repeater ('#ผลิตภัณฑ์ผลิตภัณฑ์', 'รายการผลิตภัณฑ์') นับ () // จำนวนแถว
repeater (ตัวเลือก, ฉลาก) .Row (ดัชนี)
ส่งคืนอาร์เรย์ผูกพันแถวที่ระบุใน repeater ที่ตรงกับดัชนีที่ระบุ ฉลากใช้สำหรับการทดสอบเอาต์พุตเท่านั้น
repeater ('#ผลิตภัณฑ์ผลิตภัณฑ์', 'รายการผลิตภัณฑ์'). แถว (1) // การผูกทั้งหมดในแถวเป็นอาร์เรย์
repeater (ตัวเลือก, ฉลาก) .Column (การผูก)
ส่งคืนอาร์เรย์ด้วยค่าของคอลัมน์ใน repeater ที่ตรงกับการเชื่อมโยงที่ระบุซึ่งตรงกับตัวเลือกที่ระบุ (ตัวเลือก jQuery) ฉลากใช้สำหรับการทดสอบเอาต์พุตเท่านั้น
repeater ('#ผลิตภัณฑ์ผลิตภัณฑ์', 'รายการผลิตภัณฑ์') คอลัมน์ ('product.name') // ค่าทั้งหมดในทุกแถวในอาร์เรย์
เลือก (ชื่อ). ตัวเลือก (ค่า)
เลือกตัวเลือกเพื่อระบุค่าในการเลือกชื่อที่ระบุ
เลือก (ชื่อ). ตัวเลือก (ค่า 1, ค่า 2)
เลือกตัวเลือก (ตัวเลือกหลายอย่าง) ของค่าที่ระบุในการเลือกชื่อที่ระบุ
องค์ประกอบ (ตัวเลือก, ฉลาก) .count ()
ส่งคืนจำนวนองค์ประกอบที่ตรงกับตัวเลือกที่ระบุ ฉลากใช้เป็นเอาต์พุตทดสอบเท่านั้น
องค์ประกอบ (ตัวเลือก, ฉลาก) .click ()
คลิกองค์ประกอบที่ตรงกับตัวเลือกที่ระบุ ฉลากใช้เป็นเอาต์พุตทดสอบเท่านั้น
องค์ประกอบ (ตัวเลือก, ป้ายกำกับ). QUARY (FN)
ดำเนินการ FN ที่ระบุ (SelectedElements, DONE) และ SelectedElement เป็นชุดขององค์ประกอบที่ตรงกับตัวเลือกที่ระบุ; และเสร็จสิ้นเป็นฟังก์ชั่นที่จะดำเนินการหลังจากดำเนินการ FN ฉลากใช้เป็นเอาต์พุตทดสอบเท่านั้น
องค์ประกอบ (ตัวเลือก, ฉลาก). {method} ()
ส่งคืนค่าส่งคืนของการดำเนินการวิธีการบนองค์ประกอบที่ตรงกับตัวเลือกที่ระบุ วิธีการนี้สามารถเป็นวิธีการ jQuery ต่อไปนี้: val, text, html, ความสูง, innerheight, outerheight, ความกว้าง, innerwidth, outerwidth, ตำแหน่ง, scrolllelft, scrolltop, ออฟเซ็ต ฉลากใช้เป็นเอาต์พุตทดสอบเท่านั้น
องค์ประกอบ (ตัวเลือก, ฉลาก). {วิธี} (ค่า)
ดำเนินการวิธีการที่ระบุบนองค์ประกอบที่ตรงกับตัวเลือกที่ระบุและใช้คีย์และค่าเป็นพารามิเตอร์ วิธีการนี้สามารถเป็นวิธีการ jQuery ต่อไปนี้: val, text, html, ความสูง, innerheight, outerheight, ความกว้าง, innerwidth, outerwidth, ตำแหน่ง, scrolllelft, scrolltop, ออฟเซ็ต ฉลากใช้เป็นเอาต์พุตทดสอบเท่านั้น
องค์ประกอบ (ตัวเลือก, ฉลาก). {method} (คีย์)
ส่งคืนผลลัพธ์ของการดำเนินการวิธีการที่ระบุบนองค์ประกอบที่ตรงกับตัวเลือกที่ระบุ วิธีการเหล่านี้อาจเป็นวิธีการ jQuery ต่อไปนี้: attr, prop, css ฉลากใช้เป็นเอาต์พุตทดสอบเท่านั้น
องค์ประกอบ (ตัวเลือก, ฉลาก). {วิธี} (คีย์, ค่า)
ดำเนินการวิธีการบนองค์ประกอบที่ตรงกับตัวเลือกที่ระบุและใช้คีย์และค่าเป็นพารามิเตอร์ วิธีการเหล่านี้อาจเป็นวิธีการ jQuery ต่อไปนี้: attr, prop, css ฉลากใช้เป็นเอาต์พุตทดสอบเท่านั้น
JavaScript เป็นภาษาที่พิมพ์แบบไดนามิกซึ่งนำการแสดงออกที่ทรงพลัง แต่ก็ช่วยให้เราได้รับความช่วยเหลือเล็กน้อยจากคอมไพเลอร์ ดังนั้นเรารู้สึกอย่างยิ่งว่ารหัสใด ๆ ที่เขียนใน JavaScript ต้องมีการทดสอบที่ครอบคลุมและครอบคลุม Angular มีคุณสมบัติมากมายที่ทำให้เราสามารถทดสอบแอปพลิเคชันของเราได้ง่ายขึ้น ดังนั้นเราจึงไม่มีข้อแก้ตัวที่จะไม่เขียนการทดสอบ -
ข้างต้นคือการรวบรวมข้อมูลเกี่ยวกับการทดสอบ AngularJS E2E เราจะยังคงเพิ่มข้อมูลที่เกี่ยวข้องในอนาคต ขอบคุณสำหรับการสนับสนุนเว็บไซต์นี้!