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

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在angular專案目錄下新建一個terminal(終端), 敲如下命令然後回車: npm install -g protractor
2. 上一條命令完成後, 繼續敲如下命令然後回車: webdriver-manager update
3. 上一條命令完成後, 繼續敲如下命令然後回車: webdriver-manager start
4. 然後關閉這個terminal(終端)， 這點十分重要！！！不然接下來寫test case然後跑起來的時候會提示埠被佔用

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