不(bù)管是(shì)傳統企業站建設還是(shì)營銷型網站建設，我們在(zài)乎的(de)無非就(jiù)是(shì)有效流量。而(ér)如何提高有效流量最重要(yào / yāo)的(de)就(jiù)是(shì)降低網站的(de)跳出(chū)率。如何降低網站的(de)跳出(chū) 率我們會在(zài)後續的(de)文章中談及。現在(zài)先來(lái)解決第一(yī / yì ／yí)步的(de)問題。現在(zài)科技日新月異，終端設備的(de)浏覽器環境很複雜：浏覽器内核可能不(bù)同、浏覽器應用可能不(bù)同、分辨率可 能不(bù)同、甚至到(dào)浏覽器的(de)關鍵配置可能不(bù)同。但是(shì)網站卻隻有一(yī / yì ／yí)個(gè)，怎麽辦？最傳統的(de)解決方式純粹是(shì)靠人(rén)工去實際測試。比如嘗試在(zài)不(bù)同的(de)浏覽器上(shàng)去訪問網站查 看顯示的(de)效果或者修改電腦的(de)分辨率去測試不(bù)同分辨率下的(de)網站顯示效果；後來(lái)一(yī / yì ／yí)些浏覽器插件開發者開發了(le／liǎo)可以(yǐ)模拟不(bù)同浏覽器以(yǐ)及分辨率的(de)插件，使得人(rén)工成本 又降低了(le／liǎo)一(yī / yì ／yí)些，測試人(rén)員不(bù)再需要(yào / yāo)不(bù)停的(de)切換工作環境；但是(shì)不(bù)管哪種方式，都離不(bù)開人(rén)的(de)參與，然而(ér)在(zài)軟件開發領域，測試成本一(yī / yì ／yí)直占據很高的(de)成本。在(zài)敏捷開發 中，測試和(hé / huò)開發的(de)叠代效率和(hé / huò)軟件的(de)開發成本挂鈎的(de)。所以(yǐ)，如果有高效、智能的(de)測試環境，一(yī / yì ／yí)定會極大(dà)的(de)提高開發效率和(hé / huò)網站的(de)水平。

　　目前市面上(shàng)國(guó)内外的(de)前端測試環境有很多，國(guó)内比較出(chū)名的(de)就(jiù)是(shì)阿裏雲的(de)前端測試服務（http://fts.aliyun.com）以(yǐ)及iTest愛測試前端測試服務平台（http://itest.aliyun.com/）。大(dà)家看兩個(gè)測試網站的(de)域名就(jiù)能發現，兩個(gè)平台都是(shì)aliyun.com的(de)二級域名，後續是(shì)否會被阿裏巴巴收編值得我們關注。但就(jiù)目前來(lái)說(shuō)，兩者還是(shì)獨立的(de)，功能和(hé / huò)操作方式都有所不(bù)同。

提供的(de)網站前端測試服務

兩者都提供一(yī / yì ／yí)站式UI兼容性測試整體解決方案，緻力于(yú)提升前端頁面開發測試效率。提供的(de)測試服務包括：死鏈檢測，多浏覽器截圖，多浏覽器環境，自動化。從這(zhè)點上(shàng)看，兩者還是(shì)比較同質化的(de)。下面我們分别來(lái)看兩個(gè)平台的(de)實操情況。

阿裏雲前端測試服務

• 死鏈檢測：根據用戶提供的(de)url，解析頁面所包含的(de)所有連接，發掘不(bù)可訪問鏈接，幫助用戶快速排查死鏈。

• 多浏覽器截圖：根據用戶提供的(de)url，自動在(zài)多個(gè)浏覽器上(shàng)截圖并展示。幫助用戶查看頁面在(zài)多個(gè)浏覽器下的(de)展示效果。

• 多浏覽器環境：提供Web-Based真實浏覽器操作環境，一(yī / yì ／yí)鍵打開，方便用戶快速選用特定的(de)浏覽器對頁面進行查看

• 自動化：多浏覽器自動化功能爲(wéi / wèi)UI測試同學提供了(le／liǎo)雲端機器分布式執行腳本，并返回多浏覽器運行結果的(de)功能，測試同學無需準備和(hé / huò)維護執行環境。操作簡單，通過Abite工具在(zài)Chrome浏覽器錄制自動化腳本，上(shàng)傳至FTS運行即可。

新建死鏈檢測任務

1.點擊‘死鏈檢測’鏈接或‘立即使用’按鈕

2.選擇檢測範圍，輸入所要(yào / yāo)檢測的(de)url，點擊‘開始檢測’按鈕，等待檢測完成：
所有 – 檢測站内、站外所有連接
僅站内鏈接 – 僅檢測所提供url域名内的(de)鏈接
僅站外鏈接 – 不(bù)檢測所提供url域名内的(de)鏈接，僅檢測其他(tā)域名的(de)鏈接

新建多浏覽器截圖任務

1.點擊‘多浏覽器截圖’鏈接或‘立即使用’按鈕

2.輸入需要(yào / yāo)進行截圖的(de)網頁URL，選擇浏覽器，點擊‘開始截圖’按鈕，等待任務執行結束
在(zài)任務執行過程中：
點擊某個(gè)浏覽器縮略圖可查看大(dà)圖
點擊某個(gè)浏覽器縮略圖右上(shàng)角的(de)刷新按鈕可以(yǐ)重新對該浏覽器進行截圖

多浏覽器環境使用方法

使用限制說(shuō)明：每次使用最長時(shí)間爲(wéi / wèi)15分鍾，新的(de)環境申請需要(yào / yāo)與上(shàng)一(yī / yì ／yí)次申請間隔至少5分鍾，每天最多申請20次。用戶同時(shí)隻能使用一(yī / yì ／yí)個(gè)環境。

1.點擊‘多浏覽器環境’鏈接或‘立即使用’按鈕

2.點擊需要(yào / yāo)使用的(de)浏覽器

3.在(zài)地(dì / de)址欄輸入要(yào / yāo)訪問的(de)網址即可

新建自動化任務

1.‘自動化’鏈接，在(zài)彈出(chū)的(de)窗口中輸入要(yào / yāo)進行錄制的(de)頁面URL，以(yǐ)淘寶主頁爲(wéi / wèi)例，輸入http://www.taobao.com

2.輸入要(yào / yāo)錄制的(de)頁面URL後，點擊确定。
被錄制頁面會在(zài)當前頁面中自動打開，同時(shí)ABITE錄制回放窗口會自動被打開，如圖，左邊爲(wéi / wèi)ABITE錄制窗口，右邊爲(wéi / wèi)要(yào / yāo)錄制的(de)頁面

3.開始錄制：
ABITE窗口和(hé / huò)被錄制頁面打開後，鼠标移動到(dào)被錄制頁面，會有黃色高亮框跟随鼠标的(de)移動，此時(shí)已經進入錄制狀态，對頁面進行的(de)點擊、輸入等操作将會被ABITE錄制下來(lái)。

4.元素驗證：
鼠标移到(dào)需要(yào / yāo)驗證的(de)元素上(shàng)方，點擊右鍵，在(zài)右鍵菜單中點擊“驗證元素

在(zài)ABITE窗口中彈出(chū)的(de)驗證窗口，可選擇文本驗證，屬性驗證或css驗證。在(zài)驗證窗口點擊“完成”後便會生成相應的(de)驗證代碼。

Abite插件安裝

1.簡介
ABITE是(shì)一(yī / yì ／yí)款基于(yú)Chrome的(de)、針對WEBUI測試的(de)錄制回放插件，通過本地(dì / de)錄制并與FTS的(de)多浏覽器自動化功能相配合，努力打造真正無需編程、維護簡單的(de)Web自動化測試。

Web自動化測試最大(dà)的(de)問題是(shì)，由于(yú)頁面變化比較頻繁，小小的(de)改動就(jiù)可能導緻以(yǐ)前的(de)腳本失敗，維護成本太高。ABITE錄制回放，全力解決這(zhè)一(yī / yì ／yí)問題，希望有效降低Web測試的(de)負擔，讓我們的(de)測試工程師輕輕松松做自動化。其中ABITE有如下亮點:
（1）本地(dì / de)回放：頁面操作錄制爲(wéi / wèi)純javascript腳本，無需編寫代碼，不(bù)依賴任何開發環境（例如java/selenium），可直接在(zài)chrome浏覽器中錄制和(hé / huò)回放。
（2）FTS雲端回放：錄制腳本上(shàng)傳到(dào)FTS後可在(zài)FTS的(de)雲端多浏覽器（IE8、IE9、IE10，Firefox、Chrome）環境上(shàng)回放，并通過FTS提供的(de)運行視頻、日志、截圖等方便快速的(de)跟蹤腳本運行情況。
（3）快速更新：元素發生改變，導緻回放失敗，可重新選擇元素，真正做到(dào)一(yī / yì ／yí)鍵更新。

2.插件安裝：
點擊Abite安裝連接，點擊”添加到(dào)Chrome”按鈕。

若chrome商店無法打開，則點擊Abite下載連接下載插件zip包，解壓後，打開chrome://extensions/,勾選”開發者模式”後将解壓後的(de)ABITE文件夾拖到(dào)該頁面完成安裝。

愛測試前端測試服務

Automated User Interact(AUI)

一(yī / yì ／yí)、AUI簡介

       AUI是(shì)一(yī / yì ／yí)款創新革命性的(de)WEB-UI自動化測試産品，相比其他(tā)WEB-UI自動化測試框架，AUI自動化測試腳本的(de)創建和(hé / huò)維護都不(bù)需要(yào / yāo)您接觸腳本代碼，所有交互都是(shì)在(zài)WEB頁面上(shàng)在(zài)線可視化使用。

       它提供了(le／liǎo)在(zài)線的(de)腳本錄制、腳本調試與維護等功能，您的(de)腳本可以(yǐ)在(zài)本機回放進行功能測試，我們還提供雲端腳本執行服務，可以(yǐ)定時(shí)在(zài)後台回放腳本進行項目的(de)持續集成、業務功能的(de)回歸以(yǐ)及線上(shàng)功能的(de)監控等。

二、AUI安裝說(shuō)明

2.1 AUI腳本錄制插件

       AUI錄制插件是(shì)一(yī / yì ／yí)個(gè)Chrome插件，若未安裝Chrome浏覽器，請點我下載安裝Chrome浏覽器

2.1.1 插件安裝

       方法一(yī / yì ／yí)： 點我前往Chrome應用商店進行在(zài)線安裝

       方法二：若Chrome應用商店無法訪問，請點我按照說(shuō)明進行手動安裝

2.1.1 插件關閉與卸載

       在(zài)Chrome浏覽器地(dì / de)址欄中輸入chrome://extensions，找到(dào)“AUI錄制工具”後，即可進行關閉和(hé / huò)卸載操作。

2.2 AUI腳本執行軟件

       爲(wéi / wèi)了(le／liǎo)達到(dào)您的(de)腳本回放調試的(de)最優體驗，建議您安裝一(yī / yì ／yí)個(gè)腳本執行軟件。

2.2.1 執行軟件安裝（點我查看操作系統）

• Windows 64位操作系統：點我下載安裝包，完成後解壓ZIP包，右鍵管理員身份運行AuiAgent.exe

• Windows 32位操作系統：點我下載安裝包，完成後解壓ZIP包，右鍵管理員身份運行AuiAgent.exe

• MAC或Linux操作系統：請點我下載JAR包（32.5MB），命令行中執行以(yǐ)下命令（需要(yào / yāo)自行安裝Java執行環境）
  nohup java -agentlib:jdwp=transport=dt_socket,server=y,suspend=n,address=5600 -jar aui.agent-1.0.0.jar &

2.2.1 執行軟件卸載

       在(zài)安裝目錄（右鍵單擊AuiAgent.exe，查看屬性－> 快捷方式－>目标）下，請點擊“Uninstall.exe ”即可完成卸載。

三、AUI錄制插件-功能簡介

3.1 腳本錄制窗口

       1. 任務用例列表中點擊會直接進入錄制窗口，在(zài)地(dì / de)址欄或者輸入框中輸入被測網站的(de)URL即可開始錄制。

        任務用例列表中點擊會先進入腳本管理窗口，點擊“維護調試”按鈕後會進入錄制窗口。

       2. 錄制窗口有“精簡模式”和(hé / huò)“詳情模式”，您可以(yǐ)自由進行切換，“詳情模式”擁有更多功能，詳見下圖

       3. 上(shàng)圖所示錄制窗口中您可以(yǐ)選擇“自動錄制”模式和(hé / huò)“選擇錄制”模式

• 自動錄制模式：隻需要(yào / yāo)您在(zài)頁面上(shàng)進行操作，會自動錄制您的(de)所有操作；

• 擇錄制模式：需要(yào / yāo)您先選中目标元素，在(zài)進行錄制操作（适用于(yú)更精準的(de)元素錄制操作）

       4. 在(zài)腳本錄制或者維護過程中，您可以(yǐ)在(zài)元素上(shàng)點擊鼠标右鍵，可以(yǐ)進行該元素的(de)高級操作錄制，如下圖所示。

• 元素檢查點：對頁面元素進行檢查點設置

• 變量使用：當元素是(shì)輸入框時(shí)，可以(yǐ)使用之(zhī)前創建的(de)變量進行輸入

• mouseover錄制：mouseover我們會自動進行錄制，當您需要(yào / yāo)手動錄制時(shí)，請使用它

• 模拟鍵盤輸入：當您的(de)輸入框不(bù)是(shì)标準的(de)input輸入框時(shí)，請使用它

• 模拟左鍵單擊：當您的(de)元素不(bù)是(shì)标準的(de)按鈕或者鏈接時(shí)，請使用它

• 右鍵單擊錄制：當您需要(yào / yāo)錄制鼠标右鍵單擊時(shí)，請使用它

• 元素拖拽錄制：當您錄制到(dào)操作時(shí)對一(yī / yì ／yí)個(gè)元素進行拖拽時(shí)，請使用它，需要(yào / yāo)選擇被拖拽元素以(yǐ)及拖拽後釋放的(de)元素

• 日期控件錄制：日期控件建議使用它來(lái)進行錄制，可以(yǐ)使用自定義以(yǐ)當前日期進行推算，适用于(yú)訂機票等場景

• 元素精确選擇：當錄制操作的(de)元素是(shì)一(yī / yì ／yí)個(gè)Object對象，或者是(shì)單純iframe時(shí)很難直接定位，使用它進行進行元素的(de)精确選擇

• 元素變量創建：當您需要(yào / yāo)使用該元素的(de)屬性作爲(wéi / wèi)變量提供給下一(yī / yì ／yí)個(gè)操作所使用時(shí)，可以(yǐ)使用它

3.2 腳本管理窗口

       1. 當您完成腳本錄制與維護點擊“完成提交後”，或者在(zài)任務用例列表中點擊會進入腳本管理窗口，如下圖所示。

       2. 在(zài)這(zhè)裏您可以(yǐ)使用頂部的(de)功能按鈕比如“頁面調試”、“頁面檢查點”等

       3. 在(zài)這(zhè)裏您還可以(yǐ)對您錄制好的(de)腳本進行操作，它分爲(wéi / wèi)頁面操作和(hé / huò)動作操作，對頁面可以(yǐ)重新“設置”URL等，對頁面動作可以(yǐ)“設置”各種高級操作、以(yǐ)及“修改”填寫内容、動作“上(shàng)移”操作

四、AUI執行軟件-功能簡介

       1. 當您啓動AUI執行軟件後，會在(zài)桌面右下角的(de)系統托盤出(chū)現“A”标簽，雙擊後可使用“自動更新”和(hé / huò)“退出(chū)”功能。自動更新隻對windows用戶有效

       2. AUI執行軟件是(shì)對插件維護調試功能的(de)輔助，以(yǐ)及未來(lái)我們即将提供的(de)“本地(dì / de)測試”功能所用，它會安裝好腳本執行所需要(yào / yāo)的(de)執行環境

Page Multi browser Inspect(PMI)

一(yī / yì ／yí)、PMI簡介

       PMI是(shì)一(yī / yì ／yí)個(gè)能快速幫您進行頁面的(de)多浏覽器檢測的(de)産品，使用非常簡單，隻需要(yào / yāo)您輸入一(yī / yì ／yí)個(gè)URL，我們會做該頁面在(zài)各個(gè)浏覽器下的(de)JS錯誤檢測以(yǐ)及整頁截圖，截圖可進行樣式布局的(de)測試。

1.1 JS錯誤檢測

       檢測頁面初始化時(shí)出(chū)現的(de)JS錯誤；

       支持6種浏覽器，IE8/IE9/IE10/IE11/chrome/Firefox；

       支持JS錯誤一(yī / yì ／yí)鍵驗證，可在(zài)對應浏覽器中查看驗證；

1.2多浏覽器截圖

       多浏覽器截圖，檢測頁面在(zài)不(bù)同浏覽器下的(de)布局差異；

       支持6種浏覽器，IE8/IE9/IE10/IE11/chrome/Firefox；

二、操作流程

       步驟1：點擊“”，添加任務名稱（有默認值）和(hé / huò)url（必填），其中url會做校驗，過濾出(chū)不(bù)合法的(de)url，如下圖所示：

       步驟2：點擊“”，設置定時(shí)運行時(shí)間和(hé / huò)通知郵件接收地(dì / de)址，如下圖所示：

       步驟3：勾選url點擊“立即執行”，運行完成後顯示出(chū)問題數量，如下圖所示：

       步驟4：點擊JS錯誤數2，查看JS錯誤的(de)詳情；點擊“已完成”查看截圖詳情，如下圖所示：

Multi browser Test Environment(MTE)

一(yī / yì ／yí)、MTE簡介

       MTE是(shì)一(yī / yì ／yí)個(gè)在(zài)線的(de)多浏覽器真實測試環境，提供了(le／liǎo)IE6、7、8、9、10、11多個(gè)浏覽器可直接使用，解決您多個(gè)版本IE浏覽器無法同時(shí)安裝的(de)問題

二、MTE操作流程

       進入多浏覽器測試環境，直接點擊浏覽器的(de)圖标即可打開對應浏覽器，如下圖所示；

Page source code Inspect(PI)

一(yī / yì ／yí)、PI簡介

       PMI是(shì)一(yī / yì ／yí)個(gè)能快速幫您進行頁面的(de)壞死鏈檢測并一(yī / yì ／yí)鍵查看的(de)産品，可視化查看壞死鏈位置。

二、PI操作流程

       步驟1：點擊“”，添加任務名稱（有默認值）和(hé / huò)url（必填），其中url會做校驗，過濾出(chū)不(bù)合法的(de)url，如下圖所示：

       步驟2：點擊“”，設置掃描頻率、定時(shí)運行時(shí)間和(hé / huò)通知郵件接收地(dì / de)址，如下圖所示：

       步驟3：勾選url點擊“立即執行”，運行完成後顯示出(chū)問題數量，如下圖所示：

       步驟4：點擊操作中“”，進行可視化錯誤查看，如下圖所示：