Hướng dẫn kiểm tra thước đo góc: Khung công cụ tự động hóa

Kiểm tra thước đo góc là gì?

Thước đo góc là một công cụ kiểm tra theo hướng hành vi từ đầu đến cuối và tự động hóa, đóng một vai trò quan trọng trong Kiểm tra của các ứng dụng AngularJS và hoạt động như một nhà tích hợp Giải pháp kết hợp các công nghệ mạnh mẽ như Selenium, Jasmine, Trình điều khiển web, v.v. Mục đích của Kiểm tra thước đo góc không chỉ để kiểm tra các ứng dụng AngularJS mà còn để viết các bài kiểm tra hồi quy tự động cho các Ứng dụng web thông thường.

Tại sao chúng ta cần khung thước đo góc?

JavaScript được sử dụng trong hầu hết các ứng dụng web. Khi các ứng dụng phát triển, JavaScript cũng tăng về kích thước và độ phức tạp. Trong trường hợp như vậy, việc kiểm thử ứng dụng web cho nhiều tình huống khác nhau trở thành nhiệm vụ khó khăn đối với Tester.

Đôi khi rất khó để nắm bắt các thành phần web trong ứng dụng AngularJS bằng cách sử dụng JUnit or Selenium WebDriver.

Protractor là một chương trình NodeJS được viết bằng JavaViết script và chạy với Node để xác định các thành phần web trong ứng dụng AngularJS và cũng sử dụng WebDriver để điều khiển trình duyệt bằng các hành động của người dùng.

Được rồi, bây giờ chúng ta hãy thảo luận chính xác ứng dụng AngularJS là gì?

Ứng dụng AngularJS là Ứng dụng web sử dụng cú pháp HTML mở rộng để thể hiện các thành phần ứng dụng web. Nó chủ yếu được sử dụng cho các ứng dụng web động. Các ứng dụng này sử dụng mã ít hơn và linh hoạt hơn so với Ứng dụng web thông thường.

Tại sao chúng ta không thể tìm thấy các phần tử web Angular JS bằng cách sử dụng Normal Selenium Trình điều khiển web?

Các ứng dụng Angular JS có một số thuộc tính HTML bổ sung như ng-repeater, ng-controller, ng-model.., v.v. không có trong Selenium máy định vị. Selenium không thể xác định các thành phần web đó bằng cách sử dụng Selenium mã số. Vì vậy, thước đo góc trên đỉnh Selenium có thể xử lý và kiểm soát các thuộc tính đó trong Ứng dụng Web.

Thước đo góc là khung thử nghiệm từ đầu đến cuối cho các ứng dụng dựa trên Angular JS. Trong khi hầu hết các framework tập trung vào việc tiến hành kiểm tra đơn vị cho các ứng dụng Angular JS thì Protractor lại tập trung vào kiểm tra chức năng thực tế của ứng dụng.

Trước khi khởi động Protractor, chúng ta cần cài đặt những thứ sau:

SeleniumBạn có thể tìm thấy Selenium Các bước cài đặt trong các liên kết sau, (https://www.guru99.com/installing-selenium-webdriver.html )
Cài đặt NPM (Node.js)NodeJS, chúng ta cần cài đặt NodeJS để cài đặt Protractor. Bạn có thể tìm thấy các bước cài đặt này trong liên kết sau. ( https://www.guru99.com/download-install-node-js.html )

Lắp đặt thước đo góc

Bước 1) Mở dấu nhắc lệnh và gõ “npm cài đặt –g thước đo góc” và nhấn Enter.

Lệnh trên sẽ tải xuống các tệp cần thiết và cài đặt Protractor trên hệ thống máy khách.

Bước 2) Kiểm tra cài đặt và phiên bản bằng cách sử dụng "Thước đo góc –chuyển đổi". Nếu thành công, nó sẽ hiển thị phiên bản như trong ảnh chụp màn hình bên dưới. Nếu không, hãy thực hiện lại bước 1.

(Bước 3 và 4 là Tùy chọn nhưng được khuyến nghị để thực hành tốt hơn)

Bước 3) Cập nhật trình quản lý trình điều khiển Web. Trình quản lý trình điều khiển web được sử dụng để chạy thử nghiệm đối với ứng dụng web góc trong một trình duyệt cụ thể. Sau khi Protractor được cài đặt, trình quản lý trình điều khiển web cần được cập nhật lên phiên bản mới nhất. Điều này có thể được thực hiện bằng cách chạy lệnh sau trong dấu nhắc lệnh.

webdriver-manager update

Bước 4) Khởi động trình quản lý trình điều khiển web. Bước này sẽ chạy trình quản lý trình điều khiển web ở chế độ nền và sẽ lắng nghe mọi bài kiểm tra chạy qua thước đo góc.

Sau khi Protractor được sử dụng để chạy bất kỳ thử nghiệm nào, trình điều khiển web sẽ tự động tải và chạy thử nghiệm trong trình duyệt có liên quan. Để khởi động trình quản lý trình điều khiển web, lệnh sau cần được thực thi từ dấu nhắc lệnh.

webdriver-manager start

Bây giờ, nếu bạn truy cập vào URL sau (http://localhost:4444/wd/hub/static/resource/hub.html) trong trình duyệt của mình, bạn sẽ thực sự thấy trình quản lý trình điều khiển Web đang chạy ở chế độ nền.

Thử nghiệm ứng dụng AngularJS mẫu bằng Protractor

Thước đo góc cần hai tệp để chạy, một suy nghi tập tin và cấu hình tập tin.

Tập tin cấu hình: Tệp này giúp thước đo góc đến nơi đặt các tệp thử nghiệm (specs.js) và để nói chuyện với Selenium người phục vụ (Selenium Địa chỉ). Chrome là trình duyệt mặc định cho Protractor.

Tệp thông số kỹ thuật: Tệp này chứa logic và bộ định vị để tương tác với ứng dụng.

Bước 1) Chúng ta phải đăng nhập https://angularjs.org và nhập văn bản là “GURU99” vào hộp văn bản “Nhập tên ở đây”.

Bước 2) Trong bước này,

Nhập tên “Guru99”
Trong văn bản đầu ra “Xin chào Guru99” được nhìn thấy.

Bước 3) Bây giờ chúng ta phải chụp văn bản từ trang web sau khi nhập tên và cần xác minh bằng văn bản dự kiến.

Mã Code:

Chúng ta phải chuẩn bị file cấu hình (conf.js) và tập tin đặc tả (spec.js) Như được đề cập ở trên.

Logic của 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!');
  });
});

Giải thích mã của spec.js:

mô tả("Nhập tên GURU99', function() Cú pháp mô tả là từ khung công tác Jasmine. Ở đây, “mô tả” ('Nhập tên GURU99') thường xác định các thành phần của một ứng dụng, có thể là một lớp hoặc hàm, v.v. Trong bộ mã được gọi là “Nhập GURU99”, nó chỉ là một chuỗi chứ không phải mã.
it('nên thêm Tên là GURU99', function()
trình duyệt.get('https://angularjs.org')Giống như trong Selenium Webdriver browser.get sẽ mở một phiên bản trình duyệt mới có URL được đề cập.
thành phần(by.model('yourName')).gửi phím('GURU99') Ở đây chúng tôi đang tìm thành phần web bằng cách sử dụng tên Model là “yourName”, là giá trị của “ng-model” trên trang web. Kiểm tra ảnh chụp màn hình bên dưới-

var guru= element(by.xpath('html/body/div[2]/div[1]/div[2]/div[2]/div/h1')) Ở đây chúng tôi đang tìm phần tử web bằng cách sử dụng Xpath và lưu trữ giá trị của nó trong biến “guru”.
mong đợi(guru.getText()).toEqual('Xin chào GURU99!') Cuối cùng, chúng tôi đang xác minh văn bản mà chúng tôi nhận được từ trang web (sử dụng gettext() ) với văn bản dự kiến.

Logic của conf.js:

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

Giải thích mã của conf.js

seleniumAddress: 'http://localhost:4444/wd/hub'Tệp cấu hình cho Protractor biết vị trí của Selenium Địa chỉ để nói chuyện Selenium WebDriver.
thông số kỹ thuật: ['spec.js']Dòng này cho Protractor biết vị trí của tệp thử nghiệm spec.js

Thi hành mã

Trước tiên, chúng ta sẽ thay đổi đường dẫn thư mục hoặc điều hướng đến thư mục chứa confi.js và spec.js trong hệ thống của chúng ta.

Thực hiện theo các bước sau.

Bước 1) Mở dấu nhắc lệnh.

Bước 2) Đảm bảo trình quản lý trình điều khiển web Selenium đang hoạt động. Để làm điều đó, hãy nhập lệnh “webdriver-manager start” và nhấn Enter.

(Nếu trình điều khiển web Selenium không hoạt động, chúng tôi không thể tiến hành kiểm tra vì Thước đo không thể tìm thấy trình điều khiển web để xử lý ứng dụng web)

Bước 3) Mở một dấu nhắc lệnh mới và đưa ra lệnh như “thước đo góc conf.js” để chạy tập tin cấu hình.

Giải thích:

Ở đây Protractor sẽ thực thi tệp cấu hình với tệp thông số kỹ thuật đã cho trong đó.
Chúng ta có thể thấy máy chủ Selenium đang chạy ở “http://localhost:4444/wd/hub” mà chúng tôi đã cung cấp trong tệp conf.js.
Ngoài ra, ở đây có thể xem kết quả có bao nhiêu lần vượt qua và thất bại như trong ảnh chụp màn hình ở trên.

Tốt thôi, chúng tôi đã xác minh kết quả khi nó được thông qua hoặc đúng như mong đợi. Bây giờ chúng ta hãy xem xét kết quả thất bại.

Bước 1) Mở và thay đổi dự kiến sẽ dẫn đến spec.js thành “'Xin chào thay đổi GURU99' như bên dưới.

Sau khi thay đổi trong 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!');
  });
});

Bước 2) Lưu tệp spec.js và lặp lại các bước trên của phần “Thực thi mã”

Bây giờ hãy thực hiện các bước trên.

Kết quả:

Chúng ta có thể thấy kết quả là không thành công được biểu thị bằng 'F' trong ảnh chụp màn hình với lý do là “Dự kiến 'Xin chào GURU99!' bằng 'Xin chào thay đổi GURU99!'. Ngoài ra, nó còn cho thấy có bao nhiêu lỗi gặp phải khi thực thi mã.

Chúng ta có thể đạt được điều tương tự với Selenium trình điều khiển web?

Đôi khi chúng ta có thể xác định các thành phần web của ứng dụng AngularJS bằng cách sử dụng bộ chọn XPath hoặc CSS từ Selenium trình điều khiển web. Nhưng trong các ứng dụng AngularJS, các phần tử sẽ được tạo và thay đổi linh hoạt. Vì vậy, Protractor là cách tốt hơn để làm việc với các ứng dụng AngularJS.

Tạo báo cáo bằng cách sử dụng Jasmine Reporters

Thước đo hỗ trợ các phóng viên Jasmine tạo báo cáo thử nghiệm. Trong phần này, chúng tôi sẽ sử dụng JunitXMLReporter để tự động tạo báo cáo thực hiện Kiểm tra ở định dạng XML.

Hãy làm theo các bước dưới đây để tạo báo cáo ở định dạng XML.

Cài đặt Jasmine Reporter

Có hai cách bạn có thể làm điều này, cục bộ hoặc toàn cầu

Mở dấu nhắc lệnh thực hiện lệnh sau để cài đặt cục bộ

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

Lệnh trên sẽ cài đặt mô-đun nút báo cáo Jasmine cục bộ từ thư mục nơi chúng tôi đang chạy lệnh trong dấu nhắc lệnh.

Mở dấu nhắc lệnh thực hiện lệnh sau để cài đặt toàn cầu

npm install –g jasmine-reporters@^2.0.0

Trong hướng dẫn này, chúng tôi sẽ cài đặt các trình báo cáo Jasmine cục bộ.

Bước 1) Thực hiện lệnh.

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

từ dấu nhắc lệnh như bên dưới.

Bước 2) Kiểm tra các thư mục cài đặt trong thư mục. ” Node_modules” sẽ khả dụng nếu được cài đặt thành công như trong ảnh chụp nhanh bên dưới.

Bước 3) Thêm mã màu sau vào tệp conf.js đã tồn tại

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

Giải thích mã:

Trong mã, chúng tôi đang tạo báo cáo “JUnitTrình báo cáo Xml” và đưa ra Đường dẫn nơi lưu trữ báo cáo.

Bước 4) Mở dấu nhắc lệnh và thực hiện lệnh thước đo góc conf.js.

Bước 5) Khi bạn thực thi đoạn mã trên, junitresults.xml sẽ được tạo trong đường dẫn được đề cập.

Bước 6) Mở XML và xác minh kết quả. Thông báo lỗi được hiển thị trong tệp kết quả dưới dạng Trường hợp thử nghiệm Không thành công. Trường hợp kiểm thử không thành công do Kết quả mong đợi từ “spec.js” không khớp với kết quả thực tế từ một trang Web

Bước 7) Sử dụng tệp junitresult.xml để lấy bằng chứng hoặc tệp kết quả.

Tổng kết

Tuy nhiên Selenium có thể thực hiện một số công việc giống như thước đo góc, thước đo góc là tiêu chuẩn công nghiệp và là phương pháp tốt nhất để kiểm tra các ứng dụng AngularJS. Thước đo góc cũng có thể quản lý nhiều khả năng trong đó và xử lý các thay đổi động của các thành phần web bằng cách sử dụng mô hình ng, ng-click.., v.v. (Điều mà selen không thể làm được).