1. 程式人生 > >基於angularJS的前端自動化測試工具Protractor快速入門

基於angularJS的前端自動化測試工具Protractor快速入門

1.官網

2.簡介

Protractor是一個為Angular和AngularJS應用程式而生的端對端的測試框架,Protractor就像使用者一樣在真實的瀏覽器中去互動並執行你的測試程式。

(1)就像一個使用者一樣測試:

Protractor是基於WebDriverJS的,WebDriverJs就像一個使用者一樣能使用原生事件和特定的瀏覽器驅動去跟你的應用互動。

(2)為了測試Angular應用

Protractor支援Angular特定的定位器策略,允許你測試Angular的專門的元素而不需要在你的測試部分進行任何安裝。

(3)自動等待

你不需要為你的測試新增等待和休眠,一旦網頁完成了待定任務Protractor就能自動執行下一步測試,所以你不必擔心去等待你的測試和網頁同步。

3安裝

準備環境:nodeJs和jdk

Protractor 5 is compatible withnodejs v6 and newer.

Protractor works with AngularJS versions greater than1.0.6/1.1.4

檢視protractor的版本命令:protractor --version

檢視node.js的版本命令:node --version

檢視是否裝java的命令:java -version(注意只有一個“-”)

通過nodeJS的npm來全域性安裝protractor:

npm install -g protractor


這句命令會安裝兩個命令列工具,protractor和webdriver-manager,安裝完後可以嘗試執行protractor --version這條命令確保protractor是否安裝成功。webdriver-manager是一個輔助工具,能很輕鬆地獲得Selenium 伺服器執行例項。

 

通過這句命令下載必要的二進位制檔案:

webdriver-manager update

 

通過這句命令開啟伺服器:

webdriver-manager start


輸完這句命令將會啟動Selenium伺服器,並且會輸出一串資訊日誌,這個命令列視窗不要關閉,專門給來啟伺服器的,重新執行其他命令要重新開啟一個命令列視窗,因為關閉之後伺服器也會跟著關閉,也可以通過按ctrl+c關閉伺服器。

你的Protractor會發送請求給你本地的瀏覽器。你可以通過輸入http://localhost:4444/wd/hub檢視伺服器的資訊和狀態。

 

4.寫一個測試案例

開啟命令列工具或者終端視窗,並且建立一個測試的檔案。

Protractor需要兩個檔案去執行,一個spec檔案和一個配置檔案。

讓我們用一個簡單的例子開始,在AngularJS官網去導航todo list,並新增一一個的todo項在列表中。

新增todo-spec.js檔案,並複製下面的程式碼儲存:

describe('angularjs homepage todo list', function() {
  it('should add a todo', function() {
    browser.get('https://angularjs.org');

    element(by.model('todoList.todoText')).sendKeys('write first protractor test');
    element(by.css('[value="add"]')).click();

    var todoList = element.all(by.repeater('todo in todoList.todos'));
    expect(todoList.count()).toEqual(3);
    expect(todoList.get(2).getText()).toEqual('write first protractor test');

    // You wrote your first test, cross it off the list
    todoList.get(2).element(by.css('input')).click();
    var completedAmount = element.all(by.css('.done-true'));
    expect(completedAmount.count()).toEqual(2);
  });
});

describe和it語法是來自Jasmine框架,browser是通過Protractor全域性建立的,用於瀏覽器級別的命令,例如用browser.get來導航某一網頁。

5.配置

新建一個conf.js配置檔案,並將下面程式碼複製到conf.js中:

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



這個配置會告訴Protractor你的測試檔案(specs)在哪裡,哪兒去跟你的Selenium伺服器(seleniumAddress)交流,它會使用所有其他的預設配置,谷歌瀏覽器是預設瀏覽器。

6.執行測試

新開啟一個命令列程式現在通過這句命令執行測試:

protractor conf.js

你應該會看到谷歌瀏覽器被打開了,而且在AngularJS頁面中導航到了todo列表,接下來關閉了它自己(這應該執行得非常快!)。

這個測試應該輸出:1 test,3 assertions,0 failures.恭喜,你已經運行了你第一個Protractor測試!

 

 

7.學習更多

通過教程學習更多: