如何用ABP框架快速完成項目 - 自動化測試 - 前端angular e2e protractor

要想快速完成一個項目, 自動化是很關鍵很有用的一塊.

1. 自動化測試比人工測試快很多. 特別是在回歸測試中.
2. 實踐證明, 雖然投入了時間在寫自動化測試代碼上, 但是在回歸測試中節省了大量的時間，同時及時發現bug挽救回來時間收益大大超過了早期寫自動化測試代碼的投入.
3. 特別是要測試瀏覽器兼容性的時候，只寫一遍自動化測試代碼，就能自動的快速的在所有瀏覽器跑完測試。
4. 我們這系列文章是使用abp里的asp.net core + angular結構.
5. angular里的UI自動化測試(簡稱e2e)使用的是protractor.

 所以有了這篇文章.

從大家的反饋中得知,

1. 99%的同學之前都沒有接觸過這一塊.
2. protractor官網資料很多, 把官網看一遍會很耗時間, 不夠快速.
3. 而我們這系列文章的關鍵詞就是”快速"
4. 所以我就先從最簡單的說起讓大家快速入手.

 先從安裝protractor開始說起.

第1節 如何安裝和初始化設置

1. 使用管理員模式打開你的vscode
2. vscode在angular項目目錄下新建一個terminal(終端), 敲如下命令然后回車: npm install -g protractor
    注意！一定要global 安裝。在后面遇到任何問題都不要非global安裝protractor。如果不小心非global安裝則要通過這個命令卸載：npm uninstall protractor
   
3. 然后把剛才global安裝的protractor link到你的項目中，敲如下命令然后回車：npm link protractor
4. 上一條命令完成后, 繼續敲如下命令然后回車: webdriver-manager update
5. 上一條命令完成后, 繼續敲如下命令然后回車: webdriver-manager start
6. 然后關閉這個terminal(終端)， 這點十分重要！！！不然接下來寫test case然后跑起來的時候會提示端口被占用

 Q&A：

1. 報錯：

   'webdriver-manager' is not recognized as an internal or external command, operable program or batch file.

   
   必須安裝全局安裝protractor，也就是說npm install -g protractor 一定要加參數-g
2. npm安裝老是失敗
   確認你可以訪問google.com，如果可以訪問還是報錯。改用yarn，不用npm.

第2節 開始第一個test case （以登錄為例）

1. Vscode打開angular項目目錄/e2e/src/app.po.ts
2. 輸入如下代碼：
   

    getUserNameInput() {
       return element(by.name('userNameOrEmailAddress'));
     }
   
     getPasswordInput() {
       return element(by.name('password'));
     }
   
     getLoginButton() {
       return element(by.buttonText('登錄'));
       // return element(by.id('loginbtn')); // 后備措施，比如是英文環境的時候，上面代碼就doesn't work，就要用這句了。
     }
   
     getLogoutButton() {
       return element(by.buttonText('注銷'));
     }
   

   　　

3. Vscode打開angular項目目錄/e2e/src/app.e2e-spec.ts
4. 在頭部import要引用的類

   import { browser } from 'protractor';
   

   　

5. 把如下代碼注釋掉

   // describe('workspace-project App', () => {
   //   let page: AppPage;
   
   //   beforeEach(() => {
   //     page = new AppPage();
   //   });
   
   //   it('should display welcome message', () => {
   //     page.navigateTo();
   //     expect(page.getParagraphText()).toEqual('Welcome to YoyoCmsTemplate!');
   //   });
   // });
   

   　　

6. 寫具體的自動化測試代碼：

   describe('管理員登錄', () => {
     let page: AppPage;
   
     beforeEach(() => {
       page = new AppPage();
     });
   
     it('輸入正確用戶名和密碼', () => {
       page.navigateTo();
       // browser.waitForAngularEnabled(); // 等待程序加載完
       page.getUserNameInput().sendKeys('admin'); // 輸入用戶名
       page.getPasswordInput().sendKeys('123qwe'); // 輸入密碼
       // 等待登錄按鈕從disable變成enable
       browser.wait(function () {
         return page.getLoginButton().isEnabled;
       }
       ).then(function () {
         // console.log(page.getLoginButton());
         page.getLoginButton().click(); // 點擊登錄按鈕
         expect(page.getLogoutButton().isEnabled()).toBe(true); // 出現注銷按鈕，意味着登錄成功了
       });
     });
   });
   

   　　

7. vscode在angular項目目錄下新建一個terminal(終端), 敲如下命令然后回車: ng e2e --no-webdriver-update （為什么不是ng e?因為要避免不能訪問google.com而導致的錯誤） 
8. 如果前面配置都正確的話，會自動彈出一個chrome瀏覽器，並且出現下圖。這時候表示自動化測試已經正常跑起來了，以后的問題就不再是配置問題，是測試用例代碼有問題了
   
   
9. 瀏覽器會自動輸入用戶名密碼，並點擊登錄。
10. 那么怎么查看測試結果呢？回到vscode剛才那個terminal(終端)，這里會顯示測試結果。嗯，對的，這里不會像ng test一樣彈出一個瀏覽器顯示測試結果，這里只會在命令行終端顯示測試結果。
    
11. 跑完一次測試用例后記得要關閉這個terminal(終端)， 這點十分重要！！！不然接下來再跑有一定幾率會出錯。

 

Q&A

問題0：為啥我輸入ng test沒有得到同樣結果？ 回答：ng test和ng e是完全不同的兩回事，結果當然不一樣，所以你應該輸入ng e.
問題1：為啥我復制了你的代碼卻出錯？ 回答：我的代碼是建立在角落白板報的52abp2018年11月份版本上的，如果你不是使用這個版本52abp，那么里面的用戶名和密碼元素的捕抓和值都要做相應更改。
問題2：為啥我執行webdriver-manager update出錯？ 回答：99%是網絡原因。
問題3：報錯：</button> is not clickable at point (514, 688). Other element would receive the click。回答：要被點擊的button沒有顯示在屏幕上，有如下可能：1，瀏覽器沒有全屏，導致這個button看不見，這時候要把瀏覽器設置為全屏。2. 鎖屏了，跑自動化測試的時候不要鎖屏。3. 改用無頭瀏覽器。
問題4：按照我的文章來做，跑測試時在最后一步捕捉“注銷”按鈕處失敗了。回答：看看你的程序界面是否有“注銷”按鈕或鏈接，如果沒有的話，當然捕捉不到，這時候你就要根據你的實際情況去修改捕捉“注銷”按鈕的測試代碼了。

第3節 寫更多test case
第4節 使用cucumber來加快寫test case的速度
第5節 測試瀏覽器兼容性 - 同時在多個不同瀏覽器里跑測試
嗯, 考慮99%的同學之前都還沒接觸過protractor, 大家先把前面兩塊完成消化之后, 給我反饋,我根據大家的反饋再更新第3、4、5節吧.

這是<如何用ABP框架快速完成項目(面向項目交付編程面向客戶編程篇)> 系列文章的其中一篇, 其他文章會陸續更新.

本文會經常更新，請閱讀原文：https://www.cnblogs.com/adalovelacer/p/abp-quickly-delivery-e2e-angular-protractor.html, 以避免陳舊錯誤知識的誤導，同時有更好的閱讀體驗。