Angular2+ 使用 Protractor 與 Modify Header Value (HTTP Headers) 外掛程式 完成 Windows Authorization 驗證

標籤：項目   沒有   data-   time   http   跳過   users   加密   happy   

入職新公司第二周，接到了一個E2E測試的任務，兩天的時間把所有的測試條件都寫完了，結果剩下三天都卡在了Windows Authorization驗證這裡。

 

先說一下公司項目Authorize的邏輯

第一步，輸入網址後，將重新導向到公司統一的登入網站，需要Windows Authorization。

第二部，驗證成功的話，將跳轉到公司SSO網站，返回相對應網站的cookie

第三部，使用cookie訪問使用者想訪問的網站

 

失敗想法一：

剛開始很偷懶的想用Protractor去抓輸入框和登入按鈕就好了麼。事實證明，這個想法還是太天真。因為瀏覽器裡面的 Windows Authorization 對話方塊是不存在於DOM上的，所以Protractor是抓不到這個視窗的。

那這個可以理解，換方案。

 

失敗想法二：

stackoverflow.com大法好，搜尋了一圈之後，找到第二種方法是在URL中輸入http://username:[email protected]。

結果發現不好用，仔細看了看文章，發現這都是2017年之前的文章，於是我去Chrome官網查了相關資料，發現這個方法在V59就被禁止了。

好吧，下一個方案

 

失敗想法三：

這是時候，就要想我能不能繞過認證，直接拿cookie去進行驗證呢?

在做這個方案的時候，我可悲的發現，Protractor做不了這件事，沒有方法去配置header裡面的cookie，即使配置了，也沒有按照邏輯去運行。

比如browser.manage().addCookie()，這個方法一直沒有按照我的預想去運行，不知道有沒有大神能指導我一下

也許我沒找到這個正確的方法吧……

 

失敗想法四：

依然是stackoverflow.com，這個方法(Link)我是沒有成功，不知道國外那幫大神是怎麼乾的，理論上應該可行。這裡我可以跟大家說這個解決方案的思路，這個思路是成功的，之後我會說解決方案。

這個方法的核心是加了一層proxy，當Protractor啟動後，chrome啟動並訪問我們去測試的網站，那麼在中間加一層來配置header並加上Cookie就可以了。

這裡面的http-proxy就是這麼做的，當Protractor啟動之後，所有發出的資訊都經過Proxy添加了相應的header，這樣就實現了繞過驗證頁面登入網站。

結果……太複雜，我的大腦已經宕機……

所以換方案

 

失敗想法五：

這時候，我想反正Windows Authrization視窗就跳出來了，那我就類比鍵盤敲擊：

1. 輸入帳號

2. 按下Tab鍵

3. 輸入密碼

4. 按下Tab鍵

5. 這時候login按鈕得到焦點，按下Enter鍵就可以了

於是我試了robotjs與robot-js，結果是悲劇的，唉，這時候的感覺就是絕望，真的絕望。

 

成功方案的摸索過程

這周就剩一天了，在吃了根香蕉（程式猿需要吃香蕉減輕壓力啊）

在同事的關懷與鼓勵下，我還沒有被擊倒的情況下發現了另一種解決方案。

那就是藉助Chrome的外掛程式來完成這個挑戰，這個方案也是一波多折，但是總算解決問題了。

 

配置的過程：

因為我們訪問網站，如果想跳過驗證介面的話，直接添加一個帶有合法Cookie的header就好了。

1. 於是我下載了一個Chrome擴充差件 Modify Header Value (HTTP Headers)

2. 在添加完成之後，開啟外掛程式，url那列添加網址，header那列寫cookie，value那列填入cookie的值，點最右邊的加號按鈕儲存

3. 之後外掛程式一定要啟動起來，訪問我們想要測試的網站，發現不用輸入密碼就可以進入網站了

 

發現問題：

用angular-cli運行命令ng e2e的時候，chrome正常啟動，但是發現並沒有載入外掛程式，所以測試不成功。

 

調查問題：

這個問題的原因是protractor只是啟動了selenium裡面的chrome.exe，所以他是很乾淨的環境，只是載入了一個automation的外掛程式。我們之前在chrome配置的外掛程式根本就沒有載入進來

 

解決問題：

依然通過stackoverflow搜尋到載入外掛程式的方法

修改protractor.conf.js裡面的代碼，在exports.config裡面添加這些代碼。

exports.config = {　　allScriptsTimeout: 11000,　　specs: [　　　　‘./e2e/**/*.e2e-spec.ts‘　　],　　capabilities: {　　　　‘browserName‘: ‘chrome‘,　　　　‘chromeOptions‘: {　　　　　　‘args‘: [‘--load-extension=C:/Users/<User Name>/AppData/Local/Google/Chrome/User Data/Profile 1/Extensions/cbdibdfhahmknbkkojljfncpnhmacdek/0.1.4_0‘,　　　　　　　　　　　　‘--user-data-dir=C:/Users/<User Name>/AppData/Local/Google/Chrome/User Data‘]　　　　}　　},　　directConnect: true,　　...}

--load-extension是指定了extention的路徑，後面的cbdibdfhahmknbkkojljfncpnhmacdek是加密的擴充外掛程式名稱

--user-data-dir是指定了我們使用的chrome記錄的記錄，如果不指定這個檔案的話，你會發現，當protractor啟動瀏覽器後，即使載入了外掛程式，那麼外掛程式裡面的之前儲存的資料也讀取不到

這時運行e2e測試時，會發現外掛程式已經載入，並且裡面能看到我們之前設定的cookie。

而且驗證也已經自動通過了。

 

更改好的解決方案：

剛剛有了一個想法，進行驗證，這個方法是更好的

實際上我們已經開啟Chrome, 登入網站，已經選擇了儲存帳號與密碼，這個時候我們知道確保protractor啟動的Chrome能讀取到使用者檔案就好了。

所以我刪除了第三方外掛程式，並且將exports.config修改如下

capabilities: {    ‘browserName‘: ‘chrome‘,    ‘chromeOptions‘: {      ‘args‘: [‘--user-data-dir=C:/Users/YLi135/AppData/Local/Google/Chrome/User Data‘]    }  },

這樣修改完成後，protractor啟動的chrome會讀取我們之前的登入資訊，跳轉到我們想測試的介面。

 

解決方案只是折中的方案，因為第一次測試的時候，我們需要開啟chrome並且輸入帳號密碼並進行儲存。

希望有解決這個問題的大神能分享一下經驗，謝謝！

 

希望對大家有協助

Happy Testing!

Angular2+ 使用 Protractor 與 Modify Header Value (HTTP Headers) 外掛程式 完成 Windows Authorization 驗證