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

⚠️ ประกาศแจ้งเตือนการเลิกใช้งาน: มือโปรtracทอร์คือ เลิกใช้แล้วและเก็บถาวรแล้วการสนับสนุนสิ้นสุดลงในเดือนสิงหาคม 2023 และ Angular CLI ได้ยกเลิกเวอร์ชัน Pro แล้วtracตัวสร้าง Tor หลังจาก Angular 15 เลือก นักเขียนบทละคร, Cypressสำหรับผู้ใช้ใหม่ ให้ใช้ WebdriverIO หรือ TestCafe การทดสอบแบบ end-to-endคำแนะนำด้านล่างนี้ยังคงใช้ได้กับห้องสวีทแบบเดิม

ทำไมเราถึงต้องการมืออาชีพtracเฟรมเวิร์ก Tor?

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

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

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

แล้วแอปพลิเคชัน AngularJS คืออะไรกันแน่?

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

ทำไมเราจึงไม่สามารถค้นหาองค์ประกอบเว็บ AngularJS โดยใช้ Normal ได้ Selenium เว็บไดร์เวอร์?

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

มือโปรtracTor เป็นเฟรมเวิร์กสำหรับการทดสอบแบบครบวงจร (end-to-end testing) สำหรับแอปพลิเคชันที่ใช้ AngularJS ในขณะที่เฟรมเวิร์กส่วนใหญ่มุ่งเน้นไปที่การดำเนินการทดสอบ การทดสอบหน่วย สำหรับแอปพลิเคชัน AngularJS, Protractor มุ่งเน้นการทดสอบการทำงานจริงของแอปพลิเคชัน

ก่อนที่เราจะเริ่มโปรtracสำหรับ Tor เราจำเป็นต้องติดตั้งสิ่งต่อไปนี้:

1. Selenium: คุณสามารถค้นหาได้ Selenium ขั้นตอนการติดตั้งใน Selenium คู่มือการติดตั้ง WebDriver.
2. NPM (Node.js): เราจำเป็นต้องติดตั้ง Node.js เพื่อติดตั้ง Protracคุณสามารถค้นหาขั้นตอนการติดตั้งเหล่านี้ได้ใน tor คู่มือการดาวน์โหลดและติดตั้ง Node.js.

มือโปรtracสำหรับการติดตั้ง

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

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

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

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

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

webdriver-manager update

ไฟล์ไบนารีของไดรเวอร์จะถูกดาวน์โหลดตามที่แสดงด้านล่าง

ขั้นตอน 4) เริ่มใช้งาน WebDriver Manager ขั้นตอนนี้จะเรียกใช้ WebDriver Manager ในพื้นหลังและคอยตรวจสอบการทดสอบใดๆ ที่ดำเนินการผ่าน protracยอดหินของภูเขา

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

webdriver-manager start

หน้าจอคอนโซลจะแสดงที่อยู่สำหรับการรับฟัง

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

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

เมื่อโปรแกรมจัดการไดรเวอร์ทำงานอยู่ Protracโปรแกรม Tor ต้องการไฟล์สองไฟล์ในการทำงาน ได้แก่... ข้อมูลจำเพาะ ไฟล์และ องค์ประกอบ ไฟล์

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

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

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

1. ป้อนชื่อ “Guru99 "
2. ในข้อความแสดงผล "สวัสดี" Guruเห็นเลข 99

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

Code:

เราต้องเตรียมไฟล์คอนฟิกูเรชัน (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!');
  });
});

Code คำอธิบายเกี่ยวกับไฟล์ spec.js:

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

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']
};

Code คำอธิบายเกี่ยวกับไฟล์ conf.js

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

การดำเนินการของ Code

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

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

ขั้นตอน 2) ให้แน่ใจว่า Selenium WebDriver Manager เริ่มทำงานแล้ว ให้ใช้คำสั่ง “webdriver-manager start” แล้วกด Enter.

(ถ้า Selenium WebDriver ไม่ทำงาน เราจึงไม่สามารถดำเนินการทดสอบต่อได้ เนื่องจากเวอร์ชัน Pro ไม่สมบูรณ์trac(tor ไม่พบ WebDriver ที่ใช้จัดการเว็บแอปพลิเคชัน)

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

คำอธิบาย:

• เฮียร์ โปรtracTor จะเรียกใช้ไฟล์การกำหนดค่าที่มีไฟล์ข้อมูลจำเพาะที่ระบุไว้ภายใน
• เราสามารถเห็น 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 แล้วทำซ้ำขั้นตอนข้างต้นของ “การดำเนินการ” Codeส่วน”

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

ผลลัพธ์:

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

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

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

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

มือโปรtracTor รองรับ Jasmine reporters ส่วนนี้ใช้ JUnitใช้ XmlReporter เพื่อสร้างรายงานผลการทดสอบโดยอัตโนมัติในรูปแบบ XML โดยทำตามขั้นตอนด้านล่าง

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

มีสองตัวเลือก คือ ตัวเลือกท้องถิ่นหรือตัวเลือกสากล

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

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

คำสั่งข้างต้นจะติดตั้ง jasmine-reporters ในเครื่องโลคอล ภายในไดเร็กทอรีที่เรียกใช้คำสั่งนั้น

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) เปิดพรอมต์คำสั่งและดำเนินการคำสั่ง สำหรับtractor conf.js.

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

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

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

มือโปรtracTor เทียบกับทางเลือกการทดสอบอัตโนมัติสมัยใหม่

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

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

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