ในบทความก่อนหน้านี้ฉันได้พูดคุยเกี่ยวกับการทดสอบหน่วยของ NG วันนี้ฉันจะพูดคุยเกี่ยวกับการทดสอบ E2E (end-to-end)
เมื่อเราทดสอบจุดใช้งานเดียวของโมดูลที่แน่นอนการทดสอบหน่วยจะเหมาะสมที่สุด อย่างไรก็ตามเมื่อมีข้อบกพร่องเกิดขึ้นเมื่อผู้ใช้โต้ตอบกับหลายหน้าการทดสอบหน่วยจะไม่ทำงาน ในเวลานี้จะต้องใช้ E2E เพื่อจำลองการดำเนินงานของผู้ใช้และกู้คืนไซต์ปัญหา แน่นอนว่าการใช้การทดสอบ E2E ยังสามารถทดสอบความทนทานของโปรแกรมได้ หลายสิ่งที่การทดสอบหน่วยไม่สามารถทำได้โดยการทดสอบ E2E
ก่อนหน้านี้ NG ใช้นักวิ่งสถานการณ์เชิงมุมเพื่อเรียกใช้การทดสอบ E2E และตอนนี้มันถูกแทนที่ด้วยไม้โปรแทรกเตอร์เพื่อเรียกใช้ E2E
ไม้โปรแทรกเตอร์
ไม้โปรแทรกเตอร์เป็นเฟรมเวิร์กที่ใช้ใน AngularJs เพื่อทดสอบ E2E มันเป็นโมดูล NPM และสร้างขึ้นบน webDriverJs โปรแลตเตอร์สามารถช่วยให้กรณีทดสอบของคุณทำงานบนเบราว์เซอร์และจำลองพฤติกรรมที่แท้จริงของผู้ใช้อย่างสมบูรณ์
นี่คือที่อยู่ทรัพยากรบางส่วน:
1. ทดสอบ API ที่จัดทำโดยไม้โปรแทรกเตอร์
2. ตัวอย่างการใช้งานง่ายของไม้โปรแทรกเตอร์
3. คู่มือ WebDriverJS นี่คือแกนกลางของการพึ่งพาการยืดตัวโมดูล NPM เรียกว่า selenium-webdriver
หลักการปฏิบัติการไม้โปรแทรกเตอร์
ไม้โปรแทรกเตอร์ขึ้นอยู่กับสิ่งต่อไปนี้เพื่อเรียกใช้การทดสอบ E2E:
1. WebDriver APIs ซึ่งเป็น webDriverJs ที่กล่าวถึงข้างต้นเป็น JS API ที่เกี่ยวข้องกับซีลีเนียมในการทดสอบส่วนหน้า
2. เซิร์ฟเวอร์ซีลีเนียมซึ่งเป็นแพ็คเกจ jar แบ็กเอนด์ใช้เพื่อสื่อสารกับไดรเวอร์เบราว์เซอร์
3. ไดรเวอร์เบราว์เซอร์ WebDriver ใช้เพื่อแสดงเนื้อหาเว็บไซต์จริงและสื่อสารกับเซิร์ฟเวอร์ซีลีเนียม นี่คือสถานที่ที่จะส่งผ่านการดำเนินงานของเบราว์เซอร์จริง
กระบวนการดำเนินการทั้งหมดมีดังนี้
หากคุณต้องการทราบข้อมูลเพิ่มเติมเกี่ยวกับการโต้ตอบก่อนหน้าของส่วนประกอบเหล่านี้โปรดคลิกที่นี่
ใช้โครงการเมล็ดพันธุ์ NG เพื่ออธิบาย E2E
เราใช้โครงการเมล็ดพันธุ์ที่จัดทำโดย NG เพื่ออธิบายตัวอย่าง E2E ที่แท้จริง ก่อนอื่นให้ใช้คำสั่งต่อไปนี้เพื่อรับโครงการเมล็ดพันธุ์
การคัดลอกรหัสมีดังนี้:
git clone https://github.com/angular/angular-seed.git
จากนั้นวิ่ง
การคัดลอกรหัสมีดังนี้:
การติดตั้ง NPM
ติดตั้งการอ้างอิงทั้งหมดที่เกี่ยวข้องกับ
ที่นี่เราจะพูดคุยเกี่ยวกับไฟล์การกำหนดค่าที่จำเป็นในการเรียกใช้การทดสอบ E2E คุณจะเห็นได้ว่าไฟล์ทดสอบ/stracraction-conf.js ใช้เพื่อกำหนดค่าฟังก์ชั่นที่เกี่ยวข้อง มามุ่งเน้นไปที่คุณลักษณะต่างๆ
1.SPECS แสดงถึงเส้นทางของไฟล์ทดสอบที่จะเรียกใช้และอันที่เขียนไว้ที่นี่คือ E2E/*. JS
2.Baseurl แสดงถึงที่อยู่รูทของหน้ากระโดดระหว่างเบราว์เซอร์ในไฟล์ทดสอบ
3. ความสามารถแสดงถึงเบราว์เซอร์ที่ใช้ในการเรียกใช้กรณีทดสอบเช่นการใช้ Chrome คุณสามารถตั้งค่าได้เช่นนี้
การคัดลอกรหัสมีดังนี้:
ความสามารถ: {
'BrowserName': 'Chrome'
-
เฟรมเวิร์กแสดงถึงกรอบการทดสอบที่จะใช้นี่คือจัสมิน
หากคุณต้องการทราบข้อมูลเพิ่มเติมเกี่ยวกับไฟล์การกำหนดค่านี้โปรดคลิกที่นี่เพื่อดู
หลังจากพูดคุยเกี่ยวกับไฟล์การกำหนดค่าลองมาดูวิธีเขียนกรณีทดสอบและโพสต์ตัวอย่างบนเว็บไซต์ทางการก่อน
การคัดลอกรหัสมีดังนี้:
'ใช้อย่างเข้มงวด';
/ * https://github.com/angular/protractor/blob/master/docs/getting-started.md */
อธิบาย ('แอปของฉัน', function () {
browser.get ('index.html');
มัน ('ควรเปลี่ยนเส้นทางไปยัง /view1 โดยอัตโนมัติเมื่อตำแหน่งแฮช /แฟรกเมนต์ว่างเปล่า' ฟังก์ชั่น () {
คาดหวัง (เบราว์เซอร์ getLocationAbsurl ()). tomatch ("/view1");
-
อธิบาย ('view1', function () {
ก่อนหน้า (ฟังก์ชั่น () {
browser.get ('index.html#/view1');
-
มัน ('ควรแสดง View1 เมื่อผู้ใช้นำทางไปยัง /view1', function () {
คาดหวัง (element.all (by.css ('[ng-view] p')). ก่อน (). getText ())
tomatch (/บางส่วนสำหรับดู 1/);
-
-
อธิบาย ('view2', function () {
ก่อนหน้า (ฟังก์ชั่น () {
browser.get ('index.html#/view2');
-
มัน ('ควรแสดง View2 เมื่อผู้ใช้นำทางไปยัง /view2', function () {
คาดหวัง (element.all (by.css ('[ng-view] p')). ก่อน (). getText ())
tomatch (/บางส่วนสำหรับดู 2/);
-
-
-
ก่อนอื่นไวยากรณ์ด้านบนคือวิธีการเขียนที่สนับสนุนโดยกรอบจัสมิน หากคุณไม่เข้าใจการใช้งานคุณสามารถคลิกที่นี่
ที่นี่เราจะพูดคุยเกี่ยวกับวิธีการและคุณสมบัติทั่วไปบางอย่างที่จัดทำโดยไม้โปรแทรกเตอร์ในตัวอย่างข้างต้น
1.Browser วัตถุระดับโลกแสดงถึงอินสแตนซ์ของเบราว์เซอร์ปัจจุบัน วิธี GET ที่ใช้กันทั่วไปใช้เพื่อใช้การเปลี่ยนแปลงที่อยู่ของเบราว์เซอร์
2. องค์ประกอบ, วัตถุทั่วโลกมีฟังก์ชั่นเช่น jQuery ที่รับผิดชอบในการค้นหาองค์ประกอบเอกสารและมักจะใช้ในการใช้งานร่วมกันโดยวัตถุ
3. โดยวัตถุทั่วโลกมีประเภทตัวเลือกเช่นคุณสามารถค้นหาองค์ประกอบผ่าน CSS, โมเดล, การผูกและคุณสมบัติอื่น ๆ
สำหรับวิธีการขององค์ประกอบและโดยโปรดดูเอกสารประกอบ API ของไม้โปรแทรกเตอร์ข้างต้นด้านบน
ต้องพูดมากถึงเวลาเรียกใช้กรณีทดสอบข้างต้นคำสั่งค่อนข้างง่าย
การคัดลอกรหัสมีดังนี้:
npm run update-webdriver
สิ่งนี้มีหน้าที่รับผิดชอบในการดาวน์โหลดไดรเวอร์เบราว์เซอร์ที่เกี่ยวข้องและแพ็คเกจ JAR ท้องถิ่นของเซเลเนียม-เซิร์ฟเวอร์ โดยทั่วไปสิ่งนี้จะล้มเหลวเนื่องจากทรัพยากรทั้งสองอยู่บนเซิร์ฟเวอร์ Google ดังนั้นคุณสามารถใช้เบราว์เซอร์เพื่อเรียกดูผนังเพื่อดาวน์โหลดแยกต่างหาก ที่อยู่มีดังนี้:
1. ที่อยู่ไดรเวอร์ Chrome โดยทั่วไปดาวน์โหลดไฟล์ ChromedRiver_2.9.zip
2. ดาวน์โหลดแพ็คเกจ JAR ท้องถิ่นของเซิร์ฟเวอร์ซีเซิร์ฟเวอร์โดยทั่วไปดาวน์โหลดไฟล์ Selenium-Server-Standalone-2.40.0.0.jar
จากนั้นคัดลอกซีลีเนียม-เซิร์ฟเวอร์ไปยังโฟลเดอร์ Selenium ในแพ็คเกจไม้โปรแทรกเตอร์ หากคำสั่งข้างต้นหมดเวลาไฟล์จะปรากฏขึ้นที่นี่ แต่มันจะว่างเปล่าเพียงแค่แทนที่โดยตรง คุณต้องคัดลอกไฟล์หลังจากการบีบอัดของ Chromedriver_2.9.zip ไปที่นี่
ในที่สุดเรียกใช้คำสั่งต่อไปนี้เพื่อดูผลการทดสอบ
การคัดลอกรหัสมีดังนี้:
NPM RUN RUNTRACRATION
หากคุณต้องการทราบข้อมูลเพิ่มเติมเกี่ยวกับบรรทัดคำสั่งในโครงการ NG SEED คุณสามารถคลิกที่นี่เพื่อดู
สรุป
การทดสอบ NG E2E นั้นซับซ้อนกว่าการกำหนดค่าการทดสอบหน่วย แต่สามารถทำสิ่งต่าง ๆ ได้มากมาย หากคุณคุ้มค่ามากคุณสามารถลองได้ หากคุณมีคำถามใด ๆ คุณสามารถตอบกลับความคิดเห็น