Kiểm tra thước đo góc là gì?
PROTRACTOR là một công cụ kiểm tra hướng hành vi tự động hóa và end-to-end đóng vai trò quan trọng trong Kiểm tra các ứng dụng AngularJS và hoạt động như một bộ 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 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.
Trong hướng dẫn dành cho người mới bắt đầu này, bạn sẽ học-
- Tại sao chúng ta cần khung thước đo góc?
- Cài đặt thước đo góc
- Thử nghiệm ứng dụng AngularJS mẫu bằng cách sử dụng Thước đo góc
- Thực thi Quy tắc
- Tạo Báo cáo bằng Jasmine Reporters
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 kích thước và độ phức tạp. Trong trường hợp đó, Người kiểm tra sẽ trở thành một nhiệm vụ khó khăn khi kiểm tra ứng dụng web cho các tình huống khác nhau.
Đôi khi rất khó để nắm bắt các phần tử web trong các ứng dụng AngularJS bằng cách sử dụng JUnit hoặc Selenium WebDriver.
Protractor là một chương trình NodeJS được viết bằng JavaScript và chạy với Node để xác định các phần tử web trong các ứng dụng AngularJS và nó 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 về ứng dụng AngularJS chính xác 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 các Ứng dụng Web bình 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 trình điều khiển Web Selenium Thường?
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 bộ định vị Selenium. Selenium không thể xác định các phần tử web đó bằng mã Selenium. Vì vậy, Thước đo góc trên đầu 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à một khung thử nghiệm đầu cuối cho các ứng dụng dựa trên Angular JS. Trong khi hầu hết các khuôn khổ tập trung vào việc tiến hành các bài kiểm tra đơn vị cho các ứng dụng Angular JS, thì Protractor tập trung vào việc kiểm tra chức năng thực tế của một ứng dụng.
Trước khi khởi động Thước đo góc, chúng ta cần cài đặt những thứ sau:
- Selen
Bạn có thể tìm thấy các bước Cài đặt Selenium trong các liên kết sau, (https://www.guru99.com/installing-selenium-webdriver.html)
- NPM (Node.js)
Cài đặt NodeJS, chúng ta cần cài đặt NodeJS để cài đặt Thước đo góc. 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)
Cài đặt thước đo góc
Bước 1) Mở dấu nhắc lệnh và nhập "thước đo góc npm install -g" 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 Thước đo 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 " Protractor --version ." 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 các bài kiểm tra đối với ứng dụng web góc cạnh trong một trình duyệt cụ thể. Sau khi cài đặt Protractor, 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 bất kỳ bài kiểm tra nào chạy qua thước đo góc.
Khi Thước đo góc đượ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 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 trong nền.
Thử nghiệm ứng dụng AngularJS mẫu bằng cách sử dụng Thước đo góc
Thước đo góc cần hai tệp để chạy, một tệp đặc tả và tệp cấu hình .
- Tệp cấu hình : Tệp này giúp thước đo góc tới nơi đặt tệp thử nghiệm (specs.js) và nói chuyện với máy chủ Selenium (Địa chỉ Selenium). Chrome là trình duyệt mặc định cho Thước đo góc.
- Tệp đặc 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 với văn bản mong đợi .
Mã:
Chúng ta phải chuẩn bị tệp cấu hình (conf.js) và tệp đặc tả (spec.js) như đã nói ở 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ả việc ( 'Nhập GURU99 Tên', function ()
Cú pháp mô tả là từ khuôn khổ Jasmine. Ở đây "description" ('Enter GURU99 Name') thường xác định các thành phần của ứng dụng, có thể là một lớp hoặc chức năng, 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 ()
- browser.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 với URL được đề cập.
- phần tử (by.model ('yourName')). sendKeys ('GURU99')
Ở đây chúng tôi đang tìm phần tử web 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 XPath và lưu trữ giá trị của nó trong một 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 mong đợi.
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 Địa chỉ Selenium để nói chuyện với Selenium WebDriver.
- thông số kỹ thuật: ['spec.js']
Dòng này cho Protractor biết vị trí của các tệp thử nghiệm spec.js
Thực thi Quy tắc
Ở đây trước tiên, chúng tôi sẽ thay đổi đường dẫn thư mục hoặc điều hướng đến thư mục nơi confi.js và spec.js được đặt trong hệ thống của chúng tôi .
Làm theo bước sau.
Bước 1) Mở dấu nhắc lệnh.
Bước 2) Đảm bảo rằng trình quản lý trình điều khiển web selenium đã được thiết lập và đang chạy. Đối với điều đó, hãy đặt lệnh là "webdriver-manager start" và nhấn Enter .
(Nếu trình điều khiển web selen không được thiết lập và đang chạy, chúng tôi không thể tiến hành kiểm tra vì Thước đo góc không thể tìm thấy trình điều khiển web để xử lý ứng dụng web)
Bước 3) Mở dấu nhắc lệnh mới và cung cấp lệnh dưới dạng "protractor conf.js" để chạy tệp cấu hình.
Giải trình:
- Tại đây Protractor sẽ thực thi tệp cấu hình với tệp đặc tả đã cho trong đó.
- Chúng tôi có thể thấy máy chủ selen đang chạy tại " 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 được vượt qua và không thành công 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 như mong đợi. Bây giờ chúng ta cũng 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 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ờ, thực hiện các bước trên.
Kết quả:
Chúng tôi có thể thấy kết quả là không thành công được chỉ ra bằng 'F' trong ảnh chụp màn hình với lý do là "Mong đợi 'Xin chào GURU99!' bằng 'Xin chào thay đổi GURU99!'. Ngoài ra, nó cho biết 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 trình điều khiển web Selenium không?
Đôi khi chúng ta có thể xác định các phần tử web của ứng dụng AngularJS bằng cách sử dụng bộ chọn XPath hoặc CSS từ trình điều khiển web Selenium. Nhưng trong các ứng dụng AngularJS, các phần tử sẽ được tạo và thay đổi động. Vì vậy, thước đo góc 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 Jasmine Reporters
Thước đo góc hỗ trợ các phóng viên Jasmine tạo các báo cáo thử nghiệm. Trong phần này, chúng tôi sẽ sử dụng JunitXMLReporter để tạo báo cáo thực thi Kiểm tra tự động ở định dạng XML.
Thực hiện theo các bước dưới đây để tạo báo cáo ở định dạng XML.
Cài đặt phóng viên Jasmine
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 jasmine báo cáo nút-mô-đun cục bộ từ thư mục nơi chúng ta đ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 bộ các phóng viên hoa nhài .
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ẽ có sẵn nếu nó đượ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 " JUnitXmlReporter " và cung cấp Đườ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 thước đo góc lệnh 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ậ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ả vì Trường hợp kiểm tra của chúng tôi không thành công. Trường hợp thử nghiệm 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 cho các tệp bằng chứng hoặc kết quả.
Tóm lược:
Mặc dù Selenium có thể thực hiện một số công việc mà thước đo góc làm, nhưng thước đo góc là tiêu chuẩn công nghiệp và thực tiễn tốt nhất để kiểm tra các ứng dụng AngularJS. Một 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 phần tử web bằng cách sử dụng ng-model, ng-click…, v.v.… (Điều mà selen không làm được).
Bài viết này được đóng góp bởi Ranjith Kumar Enishetti