ไม้โปรแทรกเตอร์ - วัตถุ

บทนี้จะกล่าวถึงรายละเอียดเกี่ยวกับวัตถุในไม้โปรแทรกเตอร์

Page Objects คืออะไร?

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

ความท้าทายกับการทดสอบ UI อัตโนมัติ

สิ่งต่อไปนี้เป็นความท้าทายทั่วไปบางประการกับการทดสอบ UI อัตโนมัติ -

การเปลี่ยนแปลง UI

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

ขาดการสนับสนุน DSL (ภาษาเฉพาะโดเมน)

ปัญหาอีกประการหนึ่งในการทดสอบ UI คือการขาดการรองรับ DSL ด้วยปัญหานี้ทำให้ยากที่จะเข้าใจว่ากำลังทดสอบอะไรอยู่

การทำซ้ำ / การทำซ้ำรหัสจำนวนมาก

ปัญหาที่พบบ่อยถัดไปในการทดสอบ UI คือมีการทำซ้ำหรือโค้ดซ้ำกันมาก สามารถเข้าใจได้ด้วยความช่วยเหลือของโค้ดบรรทัดต่อไปนี้ -

element(by.model(‘event.name’)).sendKeys(‘An Event’);
element(by.model(‘event.name’)).sendKeys(‘Module 3’);
element(by.model(‘event.name’));

การบำรุงรักษาที่ยากลำบาก

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

การทดสอบเสีย

ความท้าทายอีกประการหนึ่งในการทดสอบ UI คือการเกิดความล้มเหลวมากมายในการทดสอบ

วิธีจัดการกับความท้าทาย

เราได้เห็นความท้าทายทั่วไปของการทดสอบ UI วิธีรับมือกับความท้าทายดังกล่าวมีดังนี้ -

การอัปเดตการอ้างอิงด้วยตนเอง

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

การใช้ Page Objects

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

Without Page Objects

describe('angularjs homepage', function() {
   it('should greet the named user', function() {
      browser.get('http://www.angularjs.org');
      element(by.model('yourName')).sendKeys('Julie');
      var greeting = element(by.binding('yourName'));
      expect(greeting.getText()).toEqual('Hello Julie!');
   });
});

With Page Objects

สำหรับการเขียนโค้ดด้วย Page Objects สิ่งแรกที่เราต้องทำคือการสร้าง Page Object ดังนั้น Page Object สำหรับตัวอย่างข้างต้นจึงมีลักษณะดังนี้ -

var AngularHomepage = function() {
   var nameInput = element(by.model('yourName'));
   var greeting = element(by.binding('yourName'));

   this.get = function() {
      browser.get('http://www.angularjs.org');
   };

   this.setName = function(name) {
      nameInput.sendKeys(name);
   };
   
   this.getGreetingText = function() {
      return greeting.getText();
   };
};
module.exports = new AngularHomepage();

การใช้ Page Objects เพื่อจัดระเบียบการทดสอบ

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

ตัวอย่าง

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

var angularHomepage = require('./AngularHomepage');
describe('angularjs homepage', function() {
   it('should greet the named user', function() {
      angularHomepage.get();

      angularHomepage.setName('Julie');
   
      expect(angularHomepage.getGreetingText()).toEqual
      ('Hello Julie!');
   });
});

ที่นี่โปรดทราบว่าเส้นทางไปยังวัตถุหน้าจะสัมพันธ์กับข้อกำหนดของคุณ

ในบันทึกเดียวกันเรายังสามารถแยกชุดทดสอบของเราออกเป็นชุดทดสอบต่างๆได้ จากนั้นไฟล์กำหนดค่าสามารถเปลี่ยนแปลงได้ดังนี้

exports.config = {
   // The address of a running selenium server.
   seleniumAddress: 'http://localhost:4444/wd/hub',

   // Capabilities to be passed to the webdriver instance.
   capabilities: {
      'browserName': 'chrome'
   },
   // Spec patterns are relative to the location of the spec file. They may
   // include glob patterns.
   suites: {
      homepage: 'tests/e2e/homepage/**/*Spec.js',
      search: ['tests/e2e/contact_search/**/*Spec.js',
         'tests/e2e/venue_search/**/*Spec.js']
   },

   // Options to be passed to Jasmine-node.
   jasmineNodeOpts: {
      showColors: true, // Use colors in the command line report.
   }
};

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

protractor protractor.conf.js --suite homepage

ในทำนองเดียวกันเราสามารถเรียกใช้ชุดการทดสอบเฉพาะโดยใช้คำสั่งดังนี้ -

protractor protractor.conf.js --suite homepage,search