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

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

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

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

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

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

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

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

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

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

1.點(diǎn)擊‘死鏈檢測(cè)’鏈接或‘立即使用’按鈕

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

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

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

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

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

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

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

2.點(diǎn)擊需要使用的瀏覽器

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

新建自動(dòng)化任務(wù)

1.‘自動(dòng)化’鏈接，在彈出的窗口中輸入要進(jìn)行錄制的頁(yè)面URL，以淘寶主頁(yè)為例，輸入http://www.taobao.com

2.輸入要錄制的頁(yè)面URL后，點(diǎn)擊確定。
被錄制頁(yè)面會(huì)在當(dāng)前頁(yè)面中自動(dòng)打開，同時(shí)ABITE錄制回放窗口會(huì)自動(dòng)被打開，如圖，左邊為ABITE錄制窗口，右邊為要錄制的頁(yè)面

3.開始錄制：
ABITE窗口和被錄制頁(yè)面打開后，鼠標(biāo)移動(dòng)到被錄制頁(yè)面，會(huì)有黃色高亮框跟隨鼠標(biāo)的移動(dòng)，此時(shí)已經(jīng)進(jìn)入錄制狀態(tài)，對(duì)頁(yè)面進(jìn)行的點(diǎn)擊、輸入等操作將會(huì)被ABITE錄制下來(lái)。

4.元素驗(yàn)證：
鼠標(biāo)移到需要驗(yàn)證的元素上方，點(diǎn)擊右鍵，在右鍵菜單中點(diǎn)擊“驗(yàn)證元素

在ABITE窗口中彈出的驗(yàn)證窗口，可選擇文本驗(yàn)證，屬性驗(yàn)證或css驗(yàn)證。在驗(yàn)證窗口點(diǎn)擊“完成”后便會(huì)生成相應(yīng)的驗(yàn)證代碼。

Abite插件安裝

1.簡(jiǎn)介
ABITE是一款基于Chrome的、針對(duì)WEBUI測(cè)試的錄制回放插件，通過(guò)本地錄制并與FTS的多瀏覽器自動(dòng)化功能相配合，努力打造真正無(wú)需編程、維護(hù)簡(jiǎn)單的Web自動(dòng)化測(cè)試。

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

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

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

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

Automated User Interact(AUI)

一、AUI簡(jiǎn)介

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

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

二、AUI安裝說(shuō)明

2.1 AUI腳本錄制插件

???????AUI錄制插件是一個(gè)Chrome插件，若未安裝Chrome瀏覽器，請(qǐng)點(diǎn)我下載安裝Chrome瀏覽器

2.1.1 插件安裝

???????方法一： 點(diǎn)我前往Chrome應(yīng)用商店進(jìn)行在線安裝

???????方法二：若Chrome應(yīng)用商店無(wú)法訪問(wèn)，請(qǐng)點(diǎn)我按照說(shuō)明進(jìn)行手動(dòng)安裝

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

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

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

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

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

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

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

• MAC或Linux操作系統(tǒng)：請(qǐng)點(diǎn)我下載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，查看屬性－> 快捷方式－>目標(biāo)）下，請(qǐng)點(diǎn)擊“Uninstall.exe ”即可完成卸載。

三、AUI錄制插件-功能簡(jiǎn)介

3.1 腳本錄制窗口

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

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

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

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

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

• 自動(dòng)錄制模式：只需要您在頁(yè)面上進(jìn)行操作，會(huì)自動(dòng)錄制您的所有操作；

• 擇錄制模式：需要您先選中目標(biāo)元素，在進(jìn)行錄制操作（適用于更精準(zhǔn)的元素錄制操作）

???????4. 在腳本錄制或者維護(hù)過(guò)程中，您可以在元素上點(diǎn)擊鼠標(biāo)右鍵，可以進(jìn)行該元素的高級(jí)操作錄制，如下圖所示。

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

• 元素檢查點(diǎn)：對(duì)頁(yè)面元素進(jìn)行檢查點(diǎn)設(shè)置

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

• mouseover錄制：mouseover我們會(huì)自動(dòng)進(jìn)行錄制，當(dāng)您需要手動(dòng)錄制時(shí)，請(qǐng)使用它

• 模擬鍵盤輸入：當(dāng)您的輸入框不是標(biāo)準(zhǔn)的input輸入框時(shí)，請(qǐng)使用它

• 模擬左鍵單擊：當(dāng)您的元素不是標(biāo)準(zhǔn)的按鈕或者鏈接時(shí)，請(qǐng)使用它

• 右鍵單擊錄制：當(dāng)您需要錄制鼠標(biāo)右鍵單擊時(shí)，請(qǐng)使用它

• 元素拖拽錄制：當(dāng)您錄制到操作時(shí)對(duì)一個(gè)元素進(jìn)行拖拽時(shí)，請(qǐng)使用它，需要選擇被拖拽元素以及拖拽后釋放的元素

• 日期控件錄制：日期控件建議使用它來(lái)進(jìn)行錄制，可以使用自定義以當(dāng)前日期進(jìn)行推算，適用于訂機(jī)票等場(chǎng)景

• 元素精確選擇：當(dāng)錄制操作的元素是一個(gè)Object對(duì)象，或者是單純iframe時(shí)很難直接定位，使用它進(jìn)行進(jìn)行元素的精確選擇

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

3.2 腳本管理窗口

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

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

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

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

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

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

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

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

Page Multi browser Inspect(PMI)

一、PMI簡(jiǎn)介

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

1.1 JS錯(cuò)誤檢測(cè)

???????檢測(cè)頁(yè)面初始化時(shí)出現(xiàn)的JS錯(cuò)誤；

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

???????支持JS錯(cuò)誤一鍵驗(yàn)證，可在對(duì)應(yīng)瀏覽器中查看驗(yàn)證；

1.2多瀏覽器截圖

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

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

二、操作流程

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

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

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

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

Multi browser Test Environment(MTE)

一、MTE簡(jiǎn)介

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

二、MTE操作流程

???????進(jìn)入多瀏覽器測(cè)試環(huán)境，直接點(diǎn)擊瀏覽器的圖標(biāo)即可打開對(duì)應(yīng)瀏覽器，如下圖所示；

Page source code Inspect(PI)

一、PI簡(jiǎn)介

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

二、PI操作流程

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

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

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

???????步驟4：點(diǎn)擊操作中“”，進(jìn)行可視化錯(cuò)誤查看，如下圖所示：