บทช่วยสอนการทดสอบไม้โปรแทรกเตอร์: กรอบงานเครื่องมืออัตโนมัติ

เหตุใดเราจึงต้องมีกรอบไม้โปรแทรกเตอร์?

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

บางครั้งการจับองค์ประกอบเว็บในแอปพลิเคชัน AngularJS โดยใช้เป็นเรื่องยาก JUnit or Selenium เว็บไดร์เวอร์

Protractor เป็นโปรแกรม NodeJS ที่เขียนด้วย Javaสคริปต์และทำงานกับ Node เพื่อระบุองค์ประกอบเว็บในแอปพลิเคชัน AngularJS และยังใช้ WebDriver เพื่อควบคุมเบราว์เซอร์ด้วยการดำเนินการของผู้ใช้

โอเค เอาล่ะ ทีนี้มาคุยกันว่าแอปพลิเคชัน AngularJS คืออะไรกันแน่?

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

เหตุใดเราจึงไม่พบองค์ประกอบเว็บ Angular JS โดยใช้ Normal Selenium ไดรเวอร์เว็บ?

แอปพลิเคชัน Angular JS มีคุณลักษณะ HTML พิเศษบางอย่าง เช่น ng-repeater, ng-controller, ng-model.. ฯลฯ ซึ่งไม่รวมอยู่ใน Selenium ตัวระบุตำแหน่ง Selenium ไม่สามารถระบุองค์ประกอบเว็บเหล่านั้นได้โดยใช้ Selenium รหัส. ดังนั้นไม้โปรแทรกเตอร์อยู่ด้านบนของ Selenium สามารถจัดการและควบคุมคุณลักษณะเหล่านั้นในเว็บแอปพลิเคชัน

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

ก่อนที่จะเริ่มต้น Protractor เราจะต้องติดตั้งสิ่งต่อไปนี้:

1. Seleniumคุณสามารถค้นหา Selenium ขั้นตอนการติดตั้งตามลิงค์ต่อไปนี้ (https://www.guru99.com/installing-selenium-webdriver.html )
2. การติดตั้ง NPM (Node.js)NodeJS เราจำเป็นต้องติดตั้ง NodeJS เพื่อติดตั้ง Protractor คุณสามารถดูขั้นตอนการติดตั้งได้ในลิงก์ต่อไปนี้ ( https://www.guru99.com/download-install-node-js.html )

การติดตั้งไม้โปรแทรกเตอร์

ขั้นตอน 1) เปิดพรอมต์คำสั่งแล้วพิมพ์ “ติดตั้ง npm –g ไม้โปรแทรกเตอร์” แล้วกด Enter.

คำสั่งดังกล่าวจะดาวน์โหลดไฟล์ที่จำเป็นและติดตั้ง Protractor บนระบบไคลเอนต์

ขั้นตอน 2) ตรวจสอบการติดตั้งและเวอร์ชั่นการใช้งาน "ไม้โปรแทรกเตอร์-รุ่น". หากสำเร็จจะแสดงเวอร์ชันตามภาพหน้าจอด้านล่าง ถ้าไม่ ให้ทำตามขั้นตอนที่ 1 อีกครั้ง

(ขั้นตอนที่ 3 และ 4 เป็นทางเลือก แต่แนะนำเพื่อการปฏิบัติที่ดีขึ้น)

ขั้นตอน 3) อัปเดตตัวจัดการไดรเวอร์เว็บ ตัวจัดการไดรเวอร์เว็บใช้สำหรับเรียกใช้การทดสอบกับแอปพลิเคชันเว็บ Angular ในเบราว์เซอร์เฉพาะ หลังจากติดตั้ง Protractor แล้ว จำเป็นต้องอัปเดตตัวจัดการไดรเวอร์เว็บเป็นเวอร์ชันล่าสุด ซึ่งสามารถทำได้โดยเรียกใช้คำสั่งต่อไปนี้ในพรอมต์คำสั่ง

webdriver-manager update

ขั้นตอน 4) เริ่มตัวจัดการไดรเวอร์เว็บ ขั้นตอนนี้จะเรียกใช้ตัวจัดการไดรเวอร์เว็บในเบื้องหลัง และจะฟังการทดสอบใดๆ ที่ทำงานผ่านไม้โปรแทรกเตอร์

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

webdriver-manager start

ทีนี้หากคุณไปที่ URL ต่อไปนี้ (http://localhost:4444/wd/hub/static/resource/hub.html) ในเบราว์เซอร์ของคุณ คุณจะเห็นตัวจัดการไดรเวอร์เว็บทำงานอยู่เบื้องหลัง

ตัวอย่างการทดสอบแอปพลิเคชัน AngularJS โดยใช้ Protractor

ไม้โปรแทรกเตอร์ต้องการไฟล์สองไฟล์จึงจะรันได้ ข้อมูลจำเพาะ ไฟล์และ องค์ประกอบ ไฟล์

1. แฟ้มการกำหนดค่า: ไฟล์นี้ช่วยไม้โปรแทรกเตอร์ไปยังตำแหน่งที่จะวางไฟล์ทดสอบ (specs.js) และพูดคุยด้วย Selenium เซิร์ฟเวอร์ (Selenium ที่อยู่). Chrome เป็นเบราว์เซอร์เริ่มต้นสำหรับไม้โปรแทรกเตอร์

2. ไฟล์ข้อมูลจำเพาะ: ไฟล์นี้มีตรรกะและตัวระบุตำแหน่งเพื่อโต้ตอบกับแอปพลิเคชัน.

ขั้นตอน 1) เราต้องเข้าสู่ระบบ https://angularjs.org และใส่ข้อความว่า “GURU99” ในช่องข้อความ “ใส่ชื่อที่นี่”

ขั้นตอน 2) ในขั้นตอนนี้

1. ใส่ชื่อ “Guru99”
2. ในข้อความเอาต์พุต ” Hello Guru99″ ปรากฏขึ้น

ขั้นตอน 3) ตอนนี้เราต้องจับข้อความจากหน้าเว็บหลังจากป้อนชื่อแล้วและต้องตรวจสอบด้วยข้อความที่คาดหวัง.

รหัส:

เราต้องเตรียมไฟล์คอนฟิกูเรชัน (conf.js) และไฟล์สเป็ค (spec.js) ดังกล่าวข้างต้น

ตรรกะของ spec.js :

describe('Enter GURU99 Name', function() {
 it('should add a Name as GURU99', function() {
 browser.get('https://angularjs.org');
 element(by.model('yourName')).sendKeys('GURU99');
  var guru= element(by.xpath('html/body/div[2]/div[1]/div[2]/div[2]/div/h1'));
expect(guru.getText()).toEqual('Hello GURU99!');
  });
});

คำอธิบายรหัสของ spec.js:

1. บรรยาย('ป้อนชื่อ GURU99', function()ไวยากรณ์อธิบายมาจากเฟรมเวิร์กของ Jasmine ที่นี่ "อธิบาย" ('ป้อนชื่อ GURU99') โดยทั่วไปจะกำหนดส่วนประกอบของแอปพลิเคชัน ซึ่งอาจเป็นคลาสหรือฟังก์ชัน เป็นต้น ในชุดโค้ด เรียกว่า “Enter GURU99” ซึ่งเป็นเพียงสตริง ไม่ใช่โค้ด
2. it('ควรเพิ่มชื่อเป็น GURU99', function()
3. browser.get('https://angularjs.org')เหมือนใน Selenium Webdriver browser.get จะเปิดอินสแตนซ์เบราว์เซอร์ใหม่พร้อม URL ดังกล่าว
4. ธาตุ(by.model('ชื่อของคุณ'))sendKeys('GURU99') ที่นี่เรากำลังค้นหาองค์ประกอบเว็บโดยใช้ชื่อโมเดลเป็น "yourName" ซึ่งเป็นค่าของ "ng-model" บนหน้าเว็บ ตรวจสอบภาพหน้าจอด้านล่าง -

5. var guru= element(by.xpath('html/body/div[2]/div[1]/div[2]/div[2]/div/h1')) ที่นี่เรากำลังค้นหาองค์ประกอบเว็บโดยใช้ XPath และเก็บค่าไว้ในตัวแปร “กูรู”.
6. คาดหวัง(guru.getText())ถึงเท่ากับ('Hello GURU99!') ในที่สุด เรากำลังตรวจสอบข้อความที่เราได้รับจากหน้าเว็บ (โดยใช้ gettext() ) กับข้อความที่คาดหวัง

ตรรกะของ conf.js:

exports.config = {
  seleniumAddress: 'http://localhost:4444/wd/hub',
  specs: ['spec.js']
};

คำอธิบายรหัสของ conf.js

1. seleniumAddress: 'http://localhost:4444/wd/hub' ไฟล์การกำหนดค่าจะแจ้งให้ Protractor ทราบถึงตำแหน่งของ Selenium ที่อยู่ที่จะพูดคุยด้วย Selenium เว็บไดร์เวอร์
2. รายละเอียด: ['spec.js']บรรทัดนี้บอก Protractor ถึงตำแหน่งของไฟล์ทดสอบ spec.js

การดำเนินการตามรหัส

ก่อนอื่น เราจะเปลี่ยนเส้นทางไดเร็กทอรีหรือนำทางไปยังโฟลเดอร์ที่วาง confi.js และ spec.js ไว้ในระบบของเรา.

ทำตามขั้นตอนต่อไปนี้

ขั้นตอน 1) เปิดพรอมต์คำสั่ง

ขั้นตอน 2) ตรวจสอบให้แน่ใจว่าตัวจัดการไดรเวอร์เว็บของ Selenium ทำงานได้ โดยให้คำสั่งว่า “webdriver-manager start” แล้วกด Enter.

(หากไดรเวอร์เว็บ Selenium ไม่ทำงาน เราจะไม่สามารถดำเนินการทดสอบได้ เนื่องจาก Protractor ไม่พบไดรเวอร์เว็บเพื่อจัดการแอปพลิเคชันเว็บ)

ขั้นตอน 3) เปิดพรอมต์คำสั่งใหม่และกำหนดคำสั่งเป็น “ไม้โปรแทรกเตอร์ conf.js” เพื่อเรียกใช้ไฟล์กำหนดค่า

คำอธิบาย:

• ที่นี่ไม้โปรแทรกเตอร์จะดำเนินการไฟล์การกำหนดค่าพร้อมกับไฟล์ข้อมูลจำเพาะที่กำหนดในนั้น
• เราจะเห็นเซิร์ฟเวอร์ Selenium ทำงานที่ “http://localhost:4444/wd/hub” ซึ่งเราได้ให้ไว้ในไฟล์ conf.js
• นอกจากนี้ ที่นี่ยังสามารถดูผลลัพธ์ได้ว่ามีกี่ครั้งที่ผ่านและล้มเหลวเหมือนในภาพหน้าจอด้านบน.

ได้ค่ะ เราตรวจสอบผลแล้วเมื่อผ่านหรือตามที่คาดไว้ ตอนนี้ให้เราดูผลลัพธ์ที่ล้มเหลวด้วย

ขั้นตอน 1) เปิดและเปลี่ยนแปลงคาดว่าจะส่งผลให้ spec.js เป็น “'Hello change GURU99” เหมือนด้านล่าง

หลังจากเปลี่ยน spec.js :

describe('Enter GURU99 Name', function() {
 it('should add a Name as GURU99', function() {
 browser.get('https://angularjs.org');
 element(by.model('yourName')).sendKeys('GURU99');
  var guru= element(by.xpath('html/body/div[2]/div[1]/div[2]/div[2]/div/h1'));
expect(guru.getText()).toEqual('Hello change GURU99!');
  });
});

ขั้นตอน 2) บันทึกไฟล์ spec.js และทำซ้ำขั้นตอนด้านบนของส่วน "การดำเนินการโค้ด"

ตอนนี้ดำเนินการตามขั้นตอนข้างต้น

ผลลัพธ์:

เราจะเห็นผลลัพธ์ว่าล้มเหลวซึ่งระบุด้วย 'F' ในภาพหน้าจอโดยมีเหตุผลดังนี้ “คาดว่า 'สวัสดี GURU99!' ให้เท่ากับ 'สวัสดี เปลี่ยน GURU99!' นอกจากนี้ยังแสดงจำนวนความล้มเหลวที่พบในการรันโค้ด

เราสามารถบรรลุผลเช่นเดียวกันกับ Selenium ไดรเวอร์เว็บ?

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

สร้างรายงานโดยใช้ Jasmine Reporters

Protractor รองรับ Jasmine Reporter เพื่อสร้างรายงานการทดสอบ ในส่วนนี้ เราจะใช้ JunitXMLReporter เพื่อสร้างรายงานการดำเนินการทดสอบโดยอัตโนมัติในรูปแบบ XML

ทำตามขั้นตอนด้านล่างเพื่อสร้างรายงานในรูปแบบ XML

การติดตั้งจัสมินรีพอร์ตเตอร์

มีสองวิธีที่คุณสามารถทำได้ ทั้งในระดับท้องถิ่นหรือระดับโลก

1. เปิดพรอมต์คำสั่งแล้วดำเนินการคำสั่งต่อไปนี้เพื่อติดตั้งในเครื่อง

npm install --save-dev jasmine-reporters@^2.0.0

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

2. เปิดพรอมต์คำสั่งแล้วดำเนินการคำสั่งต่อไปนี้สำหรับการติดตั้งทั่วโลก

npm install –g jasmine-reporters@^2.0.0

ในบทช่วยสอนนี้ เราจะติดตั้งนักข่าวจัสมินในเครื่อง.

ขั้นตอน 1) ดำเนินการคำสั่ง

npm install --save-dev jasmine-reporters@^2.0.0

จากพรอมต์คำสั่งเหมือนด้านล่าง

ขั้นตอน 2) ตรวจสอบโฟลเดอร์การติดตั้งในไดเร็กทอรี. ” Node_modules” ควรพร้อมใช้งานหากติดตั้งสำเร็จเหมือนในภาพรวมด้านล่าง

ขั้นตอน 3) เพิ่มโค้ดสีต่อไปนี้ลงในไฟล์ conf.js ที่มีอยู่

exports.config = {
      seleniumAddress: 'http://localhost:4444/wd/hub',
      capabilities: {
          'browserName': 'firefox'
      },
      specs: ['spec.js'],
     framework: 'jasmine2' ,
      onPrepare: function() {
          var jasmineReporters = require('C:/Users/RE041943/Desktop/guru/node_modules/jasmine-reporters');
          jasmine.getEnv().addReporter(new jasmineReporters.JUnitXmlReporter(null, true, true)
          );
     }
   };

คำอธิบายของรหัส:

ในโค้ดเรากำลังสร้างรายงาน “JUnitXmlReporter” และให้ Path ที่จะจัดเก็บรายงาน

ขั้นตอน 4) เปิดพรอมต์คำสั่งและดำเนินการคำสั่ง ไม้โปรแทรกเตอร์ conf.js

ขั้นตอน 5) เมื่อคุณดำเนินการโค้ดข้างต้น junitresults.xml จะถูกสร้างขึ้นในเส้นทางที่ระบุ

ขั้นตอน 6) เปิด XML และตรวจสอบผลลัพธ์ ข้อความแสดงความล้มเหลวจะแสดงในไฟล์ผลลัพธ์เป็นของเรา กรณีทดสอบ ล้มเหลว กรณีทดสอบล้มเหลวเนื่องจากผลลัพธ์ที่คาดหวังจาก "spec.js" ไม่ตรงกับผลลัพธ์จริงจากเว็บเพจ

ขั้นตอน 7) ใช้ไฟล์ junitresult.xml สำหรับหลักฐานหรือไฟล์ผลลัพธ์

สรุป

แม้ Selenium สามารถทำบางอย่างเหมือนกับที่ไม้โปรแทรกเตอร์ทำ ไม้โปรแทรกเตอร์เป็นมาตรฐานอุตสาหกรรมและแนวปฏิบัติที่ดีที่สุดในการทดสอบแอปพลิเคชัน AngularJS ไม้โปรแทรกเตอร์ยังสามารถจัดการความสามารถหลายอย่างในนั้นและจัดการกับการเปลี่ยนแปลงแบบไดนามิกขององค์ประกอบเว็บโดยใช้ ng-รุ่น, ng-click.., ฯลฯ (ซึ่งซีลีเนียมทำไม่ได้)