先決條件: | 熟悉核心 HTML , CSS 和 JavaScript 語言; 高級(jí)跨瀏覽器測(cè)試原則的概念。 |
---|---|
目的: | 了解跨瀏覽器測(cè)試中涉及的高級(jí)概念。 |
當(dāng)進(jìn)行跨瀏覽器測(cè)試時(shí),您需要制定一系列需要測(cè)試的瀏覽器。 沒有辦法,你可以測(cè)試瀏覽器和設(shè)備的每一個(gè)組合,您的用戶可能會(huì)使用,以查看您的網(wǎng)站 - 有太多,并且新的出現(xiàn)所有的時(shí)間。
相反,您應(yīng)該嘗試確保您的網(wǎng)站在最重要的目標(biāo)瀏覽器和設(shè)備上工作,然后進(jìn)行防御性編碼,以便為您的網(wǎng)站提供最廣泛的支持。
通過編碼防御,我們的意思是嘗試建立智能回退,以便如果一個(gè)功能或樣式不能在瀏覽器中工作,該網(wǎng)站將能夠降級(jí)到一些不那么刺激,仍然提供可接受的用戶體驗(yàn) - 核心信息 仍然可訪問,例如,即使它看起來不那么漂亮。
目的是建立一個(gè)你可以參考的瀏覽器/設(shè)備的圖表,你測(cè)試。 你可以使它簡(jiǎn)單或復(fù)雜,因?yàn)槟阆矚g - 例如一個(gè)常見的方法是有多個(gè)級(jí)別的suport級(jí)別,像:
在以下各節(jié)中,我們將以此格式構(gòu)建支持圖表。
注意:Yahoo首先使用這種方法,使用他們的分級(jí) 瀏覽器支持方法。
你可以稱之為"假設(shè)"或"直覺"。 這不是一個(gè)準(zhǔn)確的,科學(xué)的方法,但作為有網(wǎng)絡(luò)行業(yè)經(jīng)驗(yàn)的人,你會(huì)有一個(gè)很好的想法,至少一些瀏覽器,你應(yīng)該測(cè)試。 這可以形成支持圖表的良好基礎(chǔ)。
例如,如果你住在西歐或北美,你會(huì)知道很多人使用Windows和Mac桌面/筆記本電腦,主要瀏覽器是Chrome,F(xiàn)irefox,Safari,IE和Edge。 你可能想測(cè)試前三個(gè)的最新版本,因?yàn)檫@些瀏覽器會(huì)定期更新。 對(duì)于Edge和IE,你可能想測(cè)試最后幾個(gè)版本; 這些都應(yīng)該在A年級(jí)。
注意:您只能在計(jì)算機(jī)上同時(shí)安裝一個(gè)版本的IE或Edge,因此您可能必須使用虛擬機(jī)或其他策略來執(zhí)行所需的測(cè)試。 稍后再查看虛擬機(jī)。
許多人使用iOS和Android,所以你可能還想測(cè)試的最新版本的iOS Safari,舊的Android股票瀏覽器的最后幾個(gè)版本,Chrome和Firefox的iOS和Android。 你應(yīng)該理想地在手機(jī)和平板電腦上測(cè)試這些,以確保響應(yīng)式設(shè)計(jì)工作正常。
你可能還知道一些人仍然使用IE 9.這是舊的和較少的能力,所以讓我們把它放在B級(jí)。
這給我們以下支持圖表到目前為止:
如果您住在其他地方,或正在其他地方(例如某些國(guó)家/地區(qū))服務(wù)的網(wǎng)站上,那么您可能會(huì)有不同的常見瀏覽器來測(cè)試。
注意:"我公司的CEO使用黑莓,所以我們最好確保它看起來不錯(cuò)"也可以是一個(gè)有說服力的論點(diǎn)。
一個(gè)有用的措施,您可以調(diào)用以通知您的瀏覽器測(cè)試選擇是瀏覽器支持統(tǒng)計(jì)。 有許多網(wǎng)站提供此類統(tǒng)計(jì)信息,例如:
這些都是以北美為中心,而不是特別準(zhǔn)確,但他們可以給你一個(gè)廣泛的趨勢(shì)的想法。
例如,讓我們轉(zhuǎn)到 Netmarketshare 。 您可以看到Opera被列為具有小但可見的使用數(shù)字,因此我們應(yīng)該將其添加到我們的支持圖表作為C級(jí)。
IE8被列為重要的,但它是舊的,不再能夠。 Opera Mini也很重要,但它在運(yùn)行時(shí)運(yùn)行復(fù)雜JavaScript的能力不強(qiáng)等(見 Opera Mini和JavaScript )。 我們也應(yīng)該把它放到B級(jí)。
如果您能獲得更準(zhǔn)確的數(shù)據(jù)來源,則來自分析應(yīng)用程序,如 Google Analytics(分析) 。 這是一個(gè)應(yīng)用程序,將提供準(zhǔn)確的統(tǒng)計(jì)信息,確切地說,人們使用哪些瀏覽器來瀏覽您的網(wǎng)站。 當(dāng)然,這依賴于你已經(jīng)有一個(gè)網(wǎng)站來使用它,所以它不是很好的全新的網(wǎng)站。
但分析歷史記錄可用于查找支持統(tǒng)計(jì)信息以影響公司網(wǎng)站的新版本或您要添加到現(xiàn)有網(wǎng)站的新功能。 如果你有這些可用,它們比全球?yàn)g覽器的統(tǒng)計(jì)數(shù)據(jù),如上所述的準(zhǔn)確得多。
</body>
tag, or somewhere else appropriate that keeps it from getting muddled up with your application code.而已! 您的網(wǎng)站現(xiàn)在應(yīng)該可以開始報(bào)告分析數(shù)據(jù)。
現(xiàn)在,您應(yīng)該可以返回 Google Analytics(分析)網(wǎng)絡(luò)首頁,然后開始查看您的數(shù)據(jù) 收集了關(guān)于您的網(wǎng)站(您需要留一點(diǎn)時(shí)間一些數(shù)據(jù)實(shí)際收集,當(dāng)然)。
默認(rèn)情況下,您應(yīng)該會(huì)看到報(bào)告標(biāo)簽,如下所示:
386px; margin:0px auto; width:700px;">
您可以使用Google Analytics(分析)查看大量數(shù)據(jù) - 不同類別的自定義報(bào)告等等 - 我們沒有時(shí)間討論這一切。 Google Analytics(分析)入門為初學(xué)者提供了一些有用的報(bào)告(及更多)指南。
還應(yīng)該鼓勵(lì)您查看左側(cè)的不同選項(xiàng),并查看可以找到哪些類型的數(shù)據(jù)。 例如,您可以通過選擇受眾群體> gt>來了解用戶正在使用的瀏覽器和操作系統(tǒng)。 技術(shù)> 瀏覽器& OS 。
注意:使用Google Analytics(分析)時(shí),您需要注意誤導(dǎo)性的偏差,例如 "我們沒有Firefox Mobile用戶"可能會(huì)導(dǎo)致你不去打擾Firefox移動(dòng)。 但是你不會(huì)有任何Firefox移動(dòng)用戶,如果該網(wǎng)站被打破了Firefox移動(dòng)的第一位。
還有其他注意事項(xiàng),你也應(yīng)該包括。 您應(yīng)該確保將輔助功能作為A級(jí)測(cè)試要求(我們將詳細(xì)介紹您在"處理常見輔助功能問題"文章中應(yīng)該測(cè)試的內(nèi)容)
此外,您可能還有其他注意事項(xiàng)。 如果您正在創(chuàng)建某種公司內(nèi)部網(wǎng)以向經(jīng)理提供銷售數(shù)據(jù),并且所有經(jīng)理都提供了Windows手機(jī),您可能希望優(yōu)先提供移動(dòng)IE支持。
所以,我們的最終支持圖表將會(huì)是這樣的:
當(dāng)你有一個(gè)新的添加到你的代碼庫需要測(cè)試,在開始測(cè)試之前,你應(yīng)該寫出一個(gè)測(cè)試需求列表,需要通過被接受。 這些要求可以是可視的或功能的 - 兩者結(jié)合起來以產(chǎn)生可用的網(wǎng)站特征。
請(qǐng)考慮以下示例(請(qǐng)參閱 class ="external">源代碼,以及 -panel.html"class ="external">示例正在運(yùn)行):
height:455px; margin:0px auto; width:700px;">
此功能的測(cè)試標(biāo)準(zhǔn)可以這樣寫:
A和B級(jí):
一個(gè)品級(jí):
您可能會(huì)注意到,在示例中的文本它將不工作在IE8 - 這是一個(gè)問題,根據(jù)我們的支持圖表,你必須處理,也許通過使用功能檢測(cè)庫實(shí)現(xiàn)功能在 不同的方式,如果瀏覽器不支持CSS轉(zhuǎn)換(請(qǐng)參閱實(shí)現(xiàn)功能檢測(cè),稍后在課程中)。
您可能還會(huì)注意到,僅使用鍵盤不能使用此按鈕 - 這也需要修復(fù)。 也許我們可以使用一些JavaScript來實(shí)現(xiàn)一個(gè)鍵盤控制切換,或使用一些其他方法完全?
這些測(cè)試標(biāo)準(zhǔn)很有用,因?yàn)?
執(zhí)行瀏覽器測(cè)試的一個(gè)選項(xiàng)是自己進(jìn)行測(cè)試。 為此,您可能使用實(shí)際物理設(shè)備和仿真環(huán)境(使用仿真器或虛擬機(jī))的組合。
通常最好有一個(gè)真正的設(shè)備運(yùn)行您想要測(cè)試的瀏覽器 - 這在行為和整體用戶體驗(yàn)方面提供了最大的準(zhǔn)確性。 對(duì)于一個(gè)合理的低級(jí)設(shè)備實(shí)驗(yàn)室,你可能需要一些類似的東西:
以下也是很好的選擇,如果你可以得到他們:
您的主要工作機(jī)器也可以是為特定目的安裝其他工具的地方,例如輔助功能審核工具,屏幕閱讀器和仿真器/虛擬機(jī)。
一些較大的公司有設(shè)備實(shí)驗(yàn)室,存儲(chǔ)了大量不同的設(shè)備,使開發(fā)人員能夠搜索非常特定的瀏覽器/設(shè)備組合上的錯(cuò)誤。 較小的公司和個(gè)人通常不能負(fù)擔(dān)這樣復(fù)雜的實(shí)驗(yàn)室,因此傾向于使用較小的實(shí)驗(yàn)室,仿真器,虛擬機(jī)和商業(yè)測(cè)試應(yīng)用程序。
我們將涵蓋以下每個(gè)其他選項(xiàng)。
注意:已做出一些努力來創(chuàng)建可公開訪問的設(shè)備實(shí)驗(yàn)室 - 請(qǐng)參見打開設(shè)備實(shí)驗(yàn)室。
注意:我們還需要考慮輔助功能 - 您可以在自己的計(jì)算機(jī)上安裝一些有用的工具來促進(jìn)輔助功能測(cè)試,但我們將介紹"處理常見輔助功能問題"文章中的內(nèi)容, 課程。
仿真器基本上是在您的計(jì)算機(jī)內(nèi)部運(yùn)行的程序,并模擬某種設(shè)備或特定設(shè)備條件,允許您更方便地做一些測(cè)試,比找到一個(gè)特定組合的硬件/軟件來測(cè)試。
仿真器可能與測(cè)試設(shè)備條件一樣簡(jiǎn)單。 例如,如果您想對(duì)您的寬度/高度媒體查詢進(jìn)行一些快速和臟的測(cè)試,您可以使用Firefox的 / Responsive_Design_Mode">響應(yīng)設(shè)計(jì)模式。 Safari也有類似的模式,可以通過轉(zhuǎn)到 Safari> 首選項(xiàng),并選中顯示開發(fā)菜單,然后選擇開發(fā)> 進(jìn)入響應(yīng)設(shè)計(jì)模式。 Chrome也有類似的功能:設(shè)備模式(請(qǐng)參見使用設(shè)備模式模擬移動(dòng)設(shè)備 )。
更多的時(shí)候,你必須安裝某種模擬器。 您想要測(cè)試的最常見的設(shè)備/瀏覽器如下:
您經(jīng)常可以找到其他移動(dòng)設(shè)備環(huán)境的模擬器,例如:
注意:許多模擬器實(shí)際上需要使用虛擬機(jī)(見下文); 當(dāng)這是這種情況時(shí),通常提供指令,和/或?qū)⑻摂M機(jī)的使用并入仿真器的安裝程序中。
虛擬機(jī)是在桌面計(jì)算機(jī)上運(yùn)行的應(yīng)用程序,允許您運(yùn)行整個(gè)操作系統(tǒng)的模擬,每個(gè)模塊劃分在自己的虛擬硬盤驅(qū)動(dòng)器中(通常由主機(jī)硬盤驅(qū)動(dòng)器上的單個(gè)大文件表示)。 Ther是許多常見的虛擬機(jī)應(yīng)用程序,例如 Parallels , "external"> VMWare 和 Virtual Box ; 我們個(gè)人喜歡后者,因?yàn)樗敲赓M(fèi)的。
注意:您需要大量可用硬盤空間來運(yùn)行虛擬機(jī)模擬; 每個(gè)操作系統(tǒng)你模擬可以占用很多內(nèi)存。 你傾向于選擇每個(gè)安裝所需的硬盤空間; 你可能會(huì)得到大概10GB,但一些來源建議高達(dá)50GB或更多,所以操作系統(tǒng)將可靠運(yùn)行。 大多數(shù)虛擬機(jī)應(yīng)用程序提供的一個(gè)很好的選擇是創(chuàng)建一個(gè)動(dòng)態(tài)分配的硬盤驅(qū)動(dòng)器,隨著需要增長(zhǎng)和縮小。
要使用Virtualbox,您需要:
現(xiàn)在,新的虛擬框應(yīng)該出現(xiàn)在主虛擬框UI窗口的左側(cè)菜單中。 此時(shí),您可以雙擊它打開虛擬框 - 它將開始啟動(dòng)虛擬機(jī),但它還沒有安裝操作系統(tǒng)。 此時(shí),您需要將對(duì)話框指向安裝程序映像/磁盤,它將運(yùn)行通過步驟將其安裝在虛擬機(jī)上,就像是真正的計(jì)算機(jī)。
重要:您需要確保在此時(shí)可用的虛擬機(jī)上安裝操作系統(tǒng)映像,然后立即安裝。 如果您在此時(shí)取消該進(jìn)程,它可能會(huì)使虛擬機(jī)無法使用,因此您需要?jiǎng)h除它并再次創(chuàng)建它。 這不是致命的,但它是惱人。
過程完成后,您應(yīng)該有一個(gè)虛擬機(jī)在您的主機(jī)計(jì)算機(jī)的窗口中運(yùn)行操作系統(tǒng)。
您需要像對(duì)待任何真正的安裝一樣對(duì)待這個(gè)虛擬操作系統(tǒng)安裝 - 例如,以及安裝您想要測(cè)試的瀏覽器,安裝一個(gè)防病毒程序來防止病毒。
擁有多個(gè)虛擬機(jī)非常有用,特別是對(duì)于Windows IE / Edge測(cè)試 - 在Windows上,您不能并排安裝多個(gè)版本的默認(rèn)瀏覽器,因此您可能希望構(gòu)建一個(gè)虛擬機(jī)庫來處理 根據(jù)需要進(jìn)行不同的測(cè)試,例如:
注意:虛擬機(jī)的另一個(gè)好處是虛擬磁盤映像是相當(dāng)自包含的。 如果您在團(tuán)隊(duì)中工作,您可以創(chuàng)建一個(gè)虛擬磁盤映像,然后將其復(fù)制并傳遞。 只要確保你有必要的許可證來運(yùn)行所有這些副本的Windows或任何正在運(yùn)行的,如果它是一個(gè)許可的產(chǎn)品。
如上一章所述,您可以通過使用某種自動(dòng)化系統(tǒng)來消除瀏覽器測(cè)試的痛苦。 您可以設(shè)置自己的測(cè)試自動(dòng)化系統(tǒng)( Selenium 是受歡迎的應(yīng)用程序),它需要一些設(shè)置 ,但可以是非常有益的,當(dāng)你得到它制定出來。
還有一些商業(yè)工具,例如 Sauce Labs 和 瀏覽器堆棧為你做這樣的事情,而不必?fù)?dān)心設(shè)置,如果你想投資一些錢在你的測(cè)試。
我們將在后面的模塊中討論如何使用這些工具。
在我們繼續(xù)之前,我們將通過談一談?dòng)脩魷y(cè)試來完成這篇文章 - 如果有一個(gè)愿意的用戶組測(cè)試您的新功能,這可能是一個(gè)很好的選擇。 請(qǐng)記住,這可以是如果或盡可能復(fù)雜的你喜歡的 - 你的用戶組可以是一群朋友,一群同事,或一組無酬或付費(fèi)志愿者,這取決于你有否花錢 測(cè)試。
通常,您可以讓用戶查看包含某種開發(fā)服務(wù)器上的新功能的頁面或視圖,因此您不會(huì)將最終站點(diǎn)或更改直到完成為止。 你應(yīng)該讓他們按照一些步驟,并報(bào)告他們得到的結(jié)果。 提供一組步驟(有時(shí)稱為腳本)是有用的,這樣您可以獲得更可靠的結(jié)果,這些結(jié)果與您嘗試測(cè)試的結(jié)果有關(guān)。 我們?cè)?a href="#What_are_you_going_to_test">您要測(cè)試的內(nèi)容部分中提到了這一點(diǎn) - 很容易將詳細(xì)的測(cè)試標(biāo)準(zhǔn)轉(zhuǎn)換為要遵循的步驟。 例如,以下會(huì)為有視力的用戶工作:
當(dāng)運(yùn)行測(cè)試時(shí),它也可以是一個(gè)好主意:
這些步驟旨在確保您正在測(cè)試的瀏覽器是盡可能"純",即沒有安裝任何可能影響測(cè)試的結(jié)果。
注意:如果您有硬件可用,另一個(gè)有用的低fi選項(xiàng)是測(cè)試您的網(wǎng)站在低端手機(jī)/其他設(shè)備上 - 隨著網(wǎng)站變大,功能更多的效果,網(wǎng)站 減速,所以你需要開始給予性能更多的考慮。 嘗試讓您的功能在低端設(shè)備上工作將更有可能在高端設(shè)備上體驗(yàn)更好。
注意:某些服務(wù)器端開發(fā)環(huán)境提供了有用的機(jī)制,用于將網(wǎng)站更改推廣到僅一部分用戶,從而為獲取由用戶子集測(cè)試的功能提供了有用的機(jī)制,而無需單獨(dú) 開發(fā)服務(wù)器。 例如 Django Waffle Flags 。
閱讀本文后,您現(xiàn)在應(yīng)該知道如何識(shí)別目標(biāo)受眾/目標(biāo)瀏覽器列表,然后有效地對(duì)該列表進(jìn)行跨瀏覽器測(cè)試。
接下來,我們將關(guān)注您的測(cè)試可能發(fā)現(xiàn)的實(shí)際代碼問題,從HTML和CSS開始。
更多建議: