不管是傳統(tǒng)企業(yè)站建設(shè)還是營銷型網(wǎng)站建設(shè)，我們在乎的無非就是有效流量。而如何提高有效流量最重要的就是降低網(wǎng)站的跳出率。如何降低網(wǎng)站的跳出 率我們會在后續(xù)的文章中談及。現(xiàn)在先來解決第一步的問題?，F(xiàn)在科技日新月異，終端設(shè)備的瀏覽器環(huán)境很復雜：瀏覽器內(nèi)核可能不同、瀏覽器應用可能不同、分辨率可 能不同、甚至到瀏覽器的關(guān)鍵配置可能不同。但是網(wǎng)站卻只有一個，怎么辦？最傳統(tǒng)的解決方式純粹是靠人工去實際測試。比如嘗試在不同的瀏覽器上去訪問網(wǎng)站查 看顯示的效果或者修改電腦的分辨率去測試不同分辨率下的網(wǎng)站顯示效果；后來一些瀏覽器插件開發(fā)者開發(fā)了可以模擬不同瀏覽器以及分辨率的插件，使得人工成本 又降低了一些，測試人員不再需要不停的切換工作環(huán)境；但是不管哪種方式，都離不開人的參與，然而在軟件開發(fā)領(lǐng)域，測試成本一直占據(jù)很高的成本。在敏捷開發(fā) 中，測試和開發(fā)的迭代效率和軟件的開發(fā)成本掛鉤的。所以，如果有高效、智能的測試環(huán)境，一定會極大的提高開發(fā)效率和網(wǎng)站的水平。

　　目前市面上國內(nèi)外的前端測試環(huán)境有很多，國內(nèi)比較出名的就是阿里云的前端測試服務(wù)（http://fts.aliyun.com）以及iTest愛測試前端測試服務(wù)平臺（http://itest.aliyun.com/）。大家看兩個測試網(wǎng)站的域名就能發(fā)現(xiàn)，兩個平臺都是aliyun.com的二級域名，后續(xù)是否會被阿里巴巴收編值得我們關(guān)注。但就目前來說，兩者還是獨立的，功能和操作方式都有所不同。

提供的網(wǎng)站前端測試服務(wù)

兩者都提供一站式UI兼容性測試整體解決方案，致力于提升前端頁面開發(fā)測試效率。提供的測試服務(wù)包括：死鏈檢測，多瀏覽器截圖，多瀏覽器環(huán)境，自動化。從這點上看，兩者還是比較同質(zhì)化的。下面我們分別來看兩個平臺的實操情況。

阿里云前端測試服務(wù)

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

• 多瀏覽器截圖：根據(jù)用戶提供的url，自動在多個瀏覽器上截圖并展示。幫助用戶查看頁面在多個瀏覽器下的展示效果。

• 多瀏覽器環(huán)境：提供Web-Based真實瀏覽器操作環(huán)境，一鍵打開，方便用戶快速選用特定的瀏覽器對頁面進行查看

• 自動化：多瀏覽器自動化功能為UI測試同學提供了云端機器分布式執(zhí)行腳本，并返回多瀏覽器運行結(jié)果的功能，測試同學無需準備和維護執(zhí)行環(huán)境。操作簡單，通過Abite工具在Chrome瀏覽器錄制自動化腳本，上傳至FTS運行即可。

新建死鏈檢測任務(wù)

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

2.選擇檢測范圍，輸入所要檢測的url，點擊‘開始檢測’按鈕，等待檢測完成：
所有 – 檢測站內(nèi)、站外所有連接
僅站內(nèi)鏈接 – 僅檢測所提供url域名內(nèi)的鏈接
僅站外鏈接 – 不檢測所提供url域名內(nèi)的鏈接，僅檢測其他域名的鏈接

新建多瀏覽器截圖任務(wù)

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

2.輸入需要進行截圖的網(wǎng)頁URL，選擇瀏覽器，點擊‘開始截圖’按鈕，等待任務(wù)執(zhí)行結(jié)束
在任務(wù)執(zhí)行過程中：
點擊某個瀏覽器縮略圖可查看大圖
點擊某個瀏覽器縮略圖右上角的刷新按鈕可以重新對該瀏覽器進行截圖

多瀏覽器環(huán)境使用方法

使用限制說明：每次使用最長時間為15分鐘，新的環(huán)境申請需要與上一次申請間隔至少5分鐘，每天最多申請20次。用戶同時只能使用一個環(huán)境。

1.點擊‘多瀏覽器環(huán)境’鏈接或‘立即使用’按鈕

2.點擊需要使用的瀏覽器

3.在地址欄輸入要訪問的網(wǎng)址即可

新建自動化任務(wù)

1.‘自動化’鏈接，在彈出的窗口中輸入要進行錄制的頁面URL，以淘寶主頁為例，輸入http://www.taobao.com

2.輸入要錄制的頁面URL后，點擊確定。
被錄制頁面會在當前頁面中自動打開，同時ABITE錄制回放窗口會自動被打開，如圖，左邊為ABITE錄制窗口，右邊為要錄制的頁面

3.開始錄制：
ABITE窗口和被錄制頁面打開后，鼠標移動到被錄制頁面，會有黃色高亮框跟隨鼠標的移動，此時已經(jīng)進入錄制狀態(tài)，對頁面進行的點擊、輸入等操作將會被ABITE錄制下來。

4.元素驗證：
鼠標移到需要驗證的元素上方，點擊右鍵，在右鍵菜單中點擊“驗證元素

在ABITE窗口中彈出的驗證窗口，可選擇文本驗證，屬性驗證或css驗證。在驗證窗口點擊“完成”后便會生成相應的驗證代碼。

Abite插件安裝

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

Web自動化測試最大的問題是，由于頁面變化比較頻繁，小小的改動就可能導致以前的腳本失敗，維護成本太高。ABITE錄制回放，全力解決這一問題，希望有效降低Web測試的負擔，讓我們的測試工程師輕輕松松做自動化。其中ABITE有如下亮點:
（1）本地回放：頁面操作錄制為純javascript腳本，無需編寫代碼，不依賴任何開發(fā)環(huán)境（例如java/selenium），可直接在chrome瀏覽器中錄制和回放。
（2）FTS云端回放：錄制腳本上傳到FTS后可在FTS的云端多瀏覽器（IE8、IE9、IE10，F(xiàn)irefox、Chrome）環(huán)境上回放，并通過FTS提供的運行視頻、日志、截圖等方便快速的跟蹤腳本運行情況。
（3）快速更新：元素發(fā)生改變，導致回放失敗，可重新選擇元素，真正做到一鍵更新。

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

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

愛測試前端測試服務(wù)

Automated User Interact(AUI)

一、AUI簡介

???????AUI是一款創(chuàng)新革命性的WEB-UI自動化測試產(chǎn)品，相比其他WEB-UI自動化測試框架，AUI自動化測試腳本的創(chuàng)建和維護都不需要您接觸腳本代碼，所有交互都是在WEB頁面上在線可視化使用。

???????它提供了在線的腳本錄制、腳本調(diào)試與維護等功能，您的腳本可以在本機回放進行功能測試，我們還提供云端腳本執(zhí)行服務(wù)，可以定時在后臺回放腳本進行項目的持續(xù)集成、業(yè)務(wù)功能的回歸以及線上功能的監(jiān)控等。

二、AUI安裝說明

2.1 AUI腳本錄制插件

???????AUI錄制插件是一個Chrome插件，若未安裝Chrome瀏覽器，請點我下載安裝Chrome瀏覽器

2.1.1 插件安裝

???????方法一： 點我前往Chrome應用商店進行在線安裝

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

2.1.1 插件關(guān)閉與卸載

???????在Chrome瀏覽器地址欄中輸入chrome://extensions，找到“AUI錄制工具”后，即可進行關(guān)閉和卸載操作。

2.2 AUI腳本執(zhí)行軟件

???????為了達到您的腳本回放調(diào)試的最優(yōu)體驗，建議您安裝一個腳本執(zhí)行軟件。

2.2.1 執(zhí)行軟件安裝（點我查看操作系統(tǒng)）

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

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

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

2.2.1 執(zhí)行軟件卸載

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

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

3.1 腳本錄制窗口

???????1. 任務(wù)用例列表中點擊會直接進入錄制窗口，在地址欄或者輸入框中輸入被測網(wǎng)站的URL即可開始錄制。

????????任務(wù)用例列表中點擊會先進入腳本管理窗口，點擊“維護調(diào)試”按鈕后會進入錄制窗口。

???????2. 錄制窗口有“精簡模式”和“詳情模式”，您可以自由進行切換，“詳情模式”擁有更多功能，詳見下圖

??????????????????

???????3. 上圖所示錄制窗口中您可以選擇“自動錄制”模式和“選擇錄制”模式

• 自動錄制模式：只需要您在頁面上進行操作，會自動錄制您的所有操作；

• 擇錄制模式：需要您先選中目標元素，在進行錄制操作（適用于更精準的元素錄制操作）

???????4. 在腳本錄制或者維護過程中，您可以在元素上點擊鼠標右鍵，可以進行該元素的高級操作錄制，如下圖所示。

??????????????

• 元素檢查點：對頁面元素進行檢查點設(shè)置

• 變量使用：當元素是輸入框時，可以使用之前創(chuàng)建的變量進行輸入

• mouseover錄制：mouseover我們會自動進行錄制，當您需要手動錄制時，請使用它

• 模擬鍵盤輸入：當您的輸入框不是標準的input輸入框時，請使用它

• 模擬左鍵單擊：當您的元素不是標準的按鈕或者鏈接時，請使用它

• 右鍵單擊錄制：當您需要錄制鼠標右鍵單擊時，請使用它

• 元素拖拽錄制：當您錄制到操作時對一個元素進行拖拽時，請使用它，需要選擇被拖拽元素以及拖拽后釋放的元素

• 日期控件錄制：日期控件建議使用它來進行錄制，可以使用自定義以當前日期進行推算，適用于訂機票等場景

• 元素精確選擇：當錄制操作的元素是一個Object對象，或者是單純iframe時很難直接定位，使用它進行進行元素的精確選擇

• 元素變量創(chuàng)建：當您需要使用該元素的屬性作為變量提供給下一個操作所使用時，可以使用它

3.2 腳本管理窗口

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

??????????????

???????2. 在這里您可以使用頂部的功能按鈕比如“頁面調(diào)試”、“頁面檢查點”等

???????3. 在這里您還可以對您錄制好的腳本進行操作，它分為頁面操作和動作操作，對頁面可以重新“設(shè)置”URL等，對頁面動作可以“設(shè)置”各種高級操作、以及“修改”填寫內(nèi)容、動作“上移”操作

四、AUI執(zhí)行軟件-功能簡介

???????1. 當您啟動AUI執(zhí)行軟件后，會在桌面右下角的系統(tǒng)托盤出現(xiàn)“A”標簽，雙擊后可使用“自動更新”和“退出”功能。自動更新只對windows用戶有效

???????2. AUI執(zhí)行軟件是對插件維護調(diào)試功能的輔助，以及未來我們即將提供的“本地測試”功能所用，它會安裝好腳本執(zhí)行所需要的執(zhí)行環(huán)境

??????????????

Page Multi browser Inspect(PMI)

一、PMI簡介

???????PMI是一個能快速幫您進行頁面的多瀏覽器檢測的產(chǎn)品，使用非常簡單，只需要您輸入一個URL，我們會做該頁面在各個瀏覽器下的JS錯誤檢測以及整頁截圖，截圖可進行樣式布局的測試。

1.1 JS錯誤檢測

???????檢測頁面初始化時出現(xiàn)的JS錯誤；

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

???????支持JS錯誤一鍵驗證，可在對應瀏覽器中查看驗證；

1.2多瀏覽器截圖

???????多瀏覽器截圖，檢測頁面在不同瀏覽器下的布局差異；

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

二、操作流程

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

???????步驟2：點擊“”，設(shè)置定時運行時間和通知郵件接收地址，如下圖所示：

???????步驟3：勾選url點擊“立即執(zhí)行”，運行完成后顯示出問題數(shù)量，如下圖所示：

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

Multi browser Test Environment(MTE)

一、MTE簡介

???????MTE是一個在線的多瀏覽器真實測試環(huán)境，提供了IE6、7、8、9、10、11多個瀏覽器可直接使用，解決您多個版本IE瀏覽器無法同時安裝的問題

二、MTE操作流程

???????進入多瀏覽器測試環(huán)境，直接點擊瀏覽器的圖標即可打開對應瀏覽器，如下圖所示；

Page source code Inspect(PI)

一、PI簡介

???????PMI是一個能快速幫您進行頁面的壞死鏈檢測并一鍵查看的產(chǎn)品，可視化查看壞死鏈位置。

二、PI操作流程

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

???????步驟2：點擊“”，設(shè)置掃描頻率、定時運行時間和通知郵件接收地址，如下圖所示：

???????步驟3：勾選url點擊“立即執(zhí)行”，運行完成后顯示出問題數(shù)量，如下圖所示：

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