0532-88983785 0532-68613670
青島網(wǎng)站建設(shè)|青島網(wǎng)站優(yōu)化|青島微信開發(fā)|青島網(wǎng)站制作

青島網(wǎng)站建設(shè)之前端測(cè)試服務(wù)

時(shí)間:2016-06-26 16:57 來源:http://m.salamatrade.com 作者:admin 點(diǎn)擊:4036次

  不管是傳統(tǒng)企業(yè)站建設(shè)還是營(yíng)銷型網(wǎng)站建設(shè),我們?cè)诤醯臒o非就是有效流量。而如何提高有效流量最重要的就是降低網(wǎng)站的跳出率。如何降低網(wǎng)站的跳出 率我們會(huì)在后續(xù)的文章中談及?,F(xiàn)在先來解決第一步的問題。現(xiàn)在科技日新月異,終端設(shè)備的瀏覽器環(huán)境很復(fù)雜:瀏覽器內(nèi)核可能不同、瀏覽器應(yīng)用可能不同、分辨率可 能不同、甚至到瀏覽器的關(guān)鍵配置可能不同。但是網(wǎng)站卻只有一個(gè),怎么辦?最傳統(tǒng)的解決方式純粹是靠人工去實(shí)際測(cè)試。比如嘗試在不同的瀏覽器上去訪問網(wǎng)站查 看顯示的效果或者修改電腦的分辨率去測(cè)試不同分辨率下的網(wǎng)站顯示效果;后來一些瀏覽器插件開發(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)注。但就目前來說,兩者還是獨(dú)立的,功能和操作方式都有所不同。


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

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

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

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

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

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

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

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

1.點(diǎn)擊‘死鏈檢測(cè)’鏈接或‘立即使用’按鈕
青島網(wǎng)站建設(shè)之前端測(cè)試服務(wù) help_link_add_1
2.選擇檢測(cè)范圍,輸入所要檢測(cè)的url,點(diǎn)擊‘開始檢測(cè)’按鈕,等待檢測(cè)完成:
所有 – 檢測(cè)站內(nèi)、站外所有連接
僅站內(nèi)鏈接 – 僅檢測(cè)所提供url域名內(nèi)的鏈接
僅站外鏈接 – 不檢測(cè)所提供url域名內(nèi)的鏈接,僅檢測(cè)其他域名的鏈接
青島網(wǎng)站建設(shè)之前端測(cè)試服務(wù) help_link_add_2

青島網(wǎng)站建設(shè)之前端測(cè)試服務(wù) help_link_add_3

青島網(wǎng)站建設(shè)之前端測(cè)試服務(wù) help_link_add_4

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

1.點(diǎn)擊‘多瀏覽器截圖’鏈接或‘立即使用’按鈕
青島網(wǎng)站建設(shè)之前端測(cè)試服務(wù) help_pic_add_1
2.輸入需要進(jìn)行截圖的網(wǎng)頁URL,選擇瀏覽器,點(diǎn)擊‘開始截圖’按鈕,等待任務(wù)執(zhí)行結(jié)束
在任務(wù)執(zhí)行過程中:
點(diǎn)擊某個(gè)瀏覽器縮略圖可查看大圖
點(diǎn)擊某個(gè)瀏覽器縮略圖右上角的刷新按鈕可以重新對(duì)該瀏覽器進(jìn)行截圖
青島網(wǎng)站建設(shè)之前端測(cè)試服務(wù) help_pic_add_2

青島網(wǎng)站建設(shè)之前端測(cè)試服務(wù) help_pic_add_3

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

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

1.點(diǎn)擊‘多瀏覽器環(huán)境’鏈接或‘立即使用’按鈕
青島網(wǎng)站建設(shè)之前端測(cè)試服務(wù) help_env_1
2.點(diǎn)擊需要使用的瀏覽器
青島網(wǎng)站建設(shè)之前端測(cè)試服務(wù) help_env_2
3.在地址欄輸入要訪問的網(wǎng)址即可
青島網(wǎng)站建設(shè)之前端測(cè)試服務(wù) help_env_3

青島網(wǎng)站建設(shè)之前端測(cè)試服務(wù) help_env_4

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

1.‘自動(dòng)化’鏈接,在彈出的窗口中輸入要進(jìn)行錄制的頁面URL,以淘寶主頁為例,輸入http://www.taobao.com
青島網(wǎng)站建設(shè)之前端測(cè)試服務(wù) help_auto_add_1
2.輸入要錄制的頁面URL后,點(diǎn)擊確定。
被錄制頁面會(huì)在當(dāng)前頁面中自動(dòng)打開,同時(shí)ABITE錄制回放窗口會(huì)自動(dòng)被打開,如圖,左邊為ABITE錄制窗口,右邊為要錄制的頁面
青島網(wǎng)站建設(shè)之前端測(cè)試服務(wù) help_auto_add_2
3.開始錄制:
ABITE窗口和被錄制頁面打開后,鼠標(biāo)移動(dòng)到被錄制頁面,會(huì)有黃色高亮框跟隨鼠標(biāo)的移動(dòng),此時(shí)已經(jīng)進(jìn)入錄制狀態(tài),對(duì)頁面進(jìn)行的點(diǎn)擊、輸入等操作將會(huì)被ABITE錄制下來。
青島網(wǎng)站建設(shè)之前端測(cè)試服務(wù) help_auto_add_3
4.元素驗(yàn)證:
鼠標(biāo)移到需要驗(yàn)證的元素上方,點(diǎn)擊右鍵,在右鍵菜單中點(diǎn)擊“驗(yàn)證元素
青島網(wǎng)站建設(shè)之前端測(cè)試服務(wù) help_auto_add_4
在ABITE窗口中彈出的驗(yàn)證窗口,可選擇文本驗(yàn)證,屬性驗(yàn)證或css驗(yàn)證。在驗(yàn)證窗口點(diǎn)擊“完成”后便會(huì)生成相應(yīng)的驗(yàn)證代碼。
青島網(wǎng)站建設(shè)之前端測(cè)試服務(wù) help_auto_add_5

青島網(wǎng)站建設(shè)之前端測(cè)試服務(wù) help_auto_add_6

Abite插件安裝

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

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

2.插件安裝:
點(diǎn)擊
Abite安裝連接,點(diǎn)擊”添加到Chrome”按鈕。
青島網(wǎng)站建設(shè)之前端測(cè)試服務(wù) help_auto_install_1
若chrome商店無法打開,則點(diǎn)擊Abite下載連接下載插件zip包,解壓后,打開chrome://extensions/,勾選”開發(fā)者模式”后將解壓后的ABITE文件夾拖到該頁面完成安裝。
青島網(wǎng)站建設(shè)之前端測(cè)試服務(wù) help_auto_install_2

愛測(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頁面上在線可視化使用。

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

二、AUI安裝說明

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)用商店無法訪問,請(qǐng)點(diǎn)我按照說明進(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)錄制模式:只需要您在頁面上進(jìn)行操作,會(huì)自動(dòng)錄制您的所有操作;

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

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


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


  • 元素檢查點(diǎn):對(duì)頁面元素進(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)使用它,需要選擇被拖拽元素以及拖拽后釋放的元素

  • 日期控件錄制:日期控件建議使用它來進(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. 在這里您可以使用頂部的功能按鈕比如“頁面調(diào)試”、“頁面檢查點(diǎn)”等

???????3. 在這里您還可以對(duì)您錄制好的腳本進(jìn)行操作,它分為頁面操作和動(dòng)作操作,對(duì)頁面可以重新“設(shè)置”URL等,對(duì)頁面動(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)試功能的輔助,以及未來我們即將提供的“本地測(cè)試”功能所用,它會(huì)安裝好腳本執(zhí)行所需要的執(zhí)行環(huán)境

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

Page Multi browser Inspect(PMI)

一、PMI簡(jiǎn)介

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


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

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

???????支持6種瀏覽器,IE8/IE9/IE10/IE11/chrome/Firefox;

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


1.2多瀏覽器截圖

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

???????支持6種瀏覽器,IE8/IE9/IE10/IE11/chrome/Firefox;


二、操作流程

青島網(wǎng)站建設(shè)之前端測(cè)試服務(wù) Image

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

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

???????步驟3:勾選url點(diǎn)擊“立即執(zhí)行”,運(yù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瀏覽器無法同時(shí)安裝的問題

二、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)行頁面的壞死鏈檢測(cè)并一鍵查看的產(chǎn)品,可視化查看壞死鏈位置。

二、PI操作流程

青島網(wǎng)站建設(shè)之前端測(cè)試服務(wù) Image

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



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



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



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




  迅優(yōu)網(wǎng)絡(luò)是一家專注于網(wǎng)站建設(shè)、網(wǎng)站優(yōu)化網(wǎng)站設(shè)計(jì)、網(wǎng)站制作網(wǎng)站托管代運(yùn)營(yíng)、微信開發(fā)、小程序開發(fā)的互聯(lián)網(wǎng)科技公司。我們有完備的建站流程和專業(yè)的開發(fā)、設(shè)計(jì)人員,與客戶深度合作并針對(duì)不同的客戶提供專屬的網(wǎng)站策劃方案。
(責(zé)任編輯:admin)
網(wǎng)站建設(shè)定制

0532-88983785 / 0532-68613670

我要定制網(wǎng)站