Thước đo góc - Đối tượng

Chương này thảo luận chi tiết về các đối tượng trong Thước đo góc.

Đối tượng Trang là gì?

Đối tượng trang là một mẫu thiết kế đã trở nên phổ biến để viết các bài kiểm tra e2e nhằm tăng cường bảo trì kiểm tra và giảm sự trùng lặp mã. Nó có thể được định nghĩa là một lớp hướng đối tượng phục vụ như một giao diện cho một trang AUT (ứng dụng đang thử nghiệm) của bạn. Tuy nhiên, trước khi đi sâu vào các đối tượng trang, chúng ta phải hiểu những thách thức với kiểm tra giao diện người dùng tự động và cách xử lý chúng.

Những thách thức với kiểm tra giao diện người dùng tự động

Tiếp theo là một số thách thức phổ biến khi tự động kiểm tra giao diện người dùng -

Thay đổi giao diện người dùng

Các vấn đề rất phổ biến khi làm việc với thử nghiệm giao diện người dùng là các thay đổi xảy ra trong giao diện người dùng. Ví dụ, hầu hết thời gian xảy ra rằng các nút hoặc hộp văn bản, v.v. thường thay đổi và tạo ra các vấn đề cho thử nghiệm giao diện người dùng.

Thiếu hỗ trợ DSL (Ngôn ngữ dành riêng cho miền)

Một vấn đề khác với thử nghiệm giao diện người dùng là thiếu hỗ trợ DSL. Với vấn đề này, thật khó hiểu những gì đang được thử nghiệm.

Lặp lại nhiều / Mã trùng lặp

Vấn đề phổ biến tiếp theo trong thử nghiệm giao diện người dùng là có rất nhiều sự lặp lại hoặc trùng lặp mã. Nó có thể được hiểu với sự trợ giúp của các dòng mã sau:

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

Bảo trì khó khăn

Do những thách thức trên, nó trở nên đau đầu cho việc bảo trì. Đó là bởi vì chúng tôi phải tìm tất cả các phiên bản, thay thế bằng tên mới, bộ chọn và mã khác. Chúng tôi cũng cần dành nhiều thời gian để giữ cho các thử nghiệm phù hợp với việc tái cấu trúc.

Kiểm tra hỏng

Một thách thức khác trong thử nghiệm giao diện người dùng là xảy ra rất nhiều lỗi trong các thử nghiệm.

Cách xử lý các thách thức

Chúng tôi đã thấy một số thách thức phổ biến của thử nghiệm giao diện người dùng. Một số cách để xử lý những thách thức như sau:

Cập nhật tài liệu tham khảo theo cách thủ công

Tùy chọn đầu tiên để xử lý các thách thức trên là cập nhật các tham chiếu theo cách thủ công. Vấn đề với tùy chọn này là chúng tôi phải thực hiện thay đổi thủ công trong mã cũng như các thử nghiệm của chúng tôi. Điều này có thể được thực hiện khi bạn có một hoặc hai tệp thử nghiệm nhưng nếu bạn có hàng trăm tệp thử nghiệm trong một dự án thì sao?

Sử dụng Đối tượng Trang

Một tùy chọn khác để xử lý các thách thức trên là sử dụng các đối tượng trang. Đối tượng trang về cơ bản là một JavaScript thuần túy đóng gói các thuộc tính của mẫu Angular. Ví dụ: tệp đặc tả sau được viết không có và với các đối tượng trang để hiểu sự khác biệt:

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

Để viết mã với Đối tượng Trang, điều đầu tiên chúng ta cần làm là tạo Đối tượng Trang. Do đó, một Đối tượng Trang cho ví dụ trên có thể trông như thế này -

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();

Sử dụng Đối tượng Trang để Tổ chức Kiểm tra

Chúng ta đã thấy việc sử dụng các đối tượng trang trong ví dụ trên để xử lý các thách thức của thử nghiệm giao diện người dùng. Tiếp theo, chúng ta sẽ thảo luận về cách chúng ta có thể sử dụng chúng để tổ chức các bài kiểm tra. Đối với điều này, chúng tôi cần sửa đổi tập lệnh thử nghiệm mà không sửa đổi chức năng của tập lệnh thử nghiệm.

Thí dụ

Để hiểu khái niệm này, chúng tôi sử dụng tệp cấu hình ở trên với các đối tượng trang. Chúng tôi cần sửa đổi tập lệnh thử nghiệm như sau:

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!');
   });
});

Ở đây, lưu ý rằng đường dẫn đến đối tượng trang sẽ liên quan đến đặc điểm kỹ thuật của bạn.

Đồng thời, chúng tôi cũng có thể tách bộ thử nghiệm của mình thành nhiều bộ thử nghiệm khác nhau. Sau đó, tệp cấu hình có thể được thay đổi như sau

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.
   }
};

Giờ đây, chúng tôi có thể dễ dàng chuyển đổi giữa việc chạy một hoặc một bộ thử nghiệm khác. Lệnh sau sẽ chỉ chạy phần trang chủ của bài kiểm tra -

protractor protractor.conf.js --suite homepage

Tương tự, chúng ta có thể chạy các bộ thử nghiệm cụ thể bằng lệnh như sau:

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