Strategies for carrying out testing

測(cè)試全部？

當(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í)別，像:

1. A grade: Common/modern browsers — Known to be capable. Test thoroughly and provide full support.
2. B grade: Older/less capable browsers — known not to be capable. Test, and provide a more basic experience that gives full access to core information and services.
3. C grade: Rare/unknown browsers — don't test, but assume they are capable. Serve the full site, which should work, at least with the fallbacks provided by our defensive coding.

在以下各節(jié)中，我們將以此格式構(gòu)建支持圖表。

教育猜測(cè)

你可以稱之為"假設(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í)。

許多人使用iOS和Android，所以你可能還想測(cè)試的最新版本的iOS Safari，舊的Android股票瀏覽器的最后幾個(gè)版本，Chrome和Firefox的iOS和Android。 你應(yīng)該理想地在手機(jī)和平板電腦上測(cè)試這些，以確保響應(yīng)式設(shè)計(jì)工作正常。

你可能還知道一些人仍然使用IE 9.這是舊的和較少的能力，所以讓我們把它放在B級(jí)。

這給我們以下支持圖表到目前為止:

1. A grade: Chrome and Firefox for Windows/Mac, Safari for Mac, Edge and IE for Windows (last two versions of each), iOS Safari for iPhone/iPad, Android stock browser (last two versions) on phone/tablet, Chrome and Firefox for Android (last two versions) on phone tablet
2. B grade: IE 9 for Windows
3. C grade: n/a

如果您住在其他地方，或正在其他地方(例如某些國家/地區(qū))服務(wù)的網(wǎng)站上，那么您可能會(huì)有不同的常見瀏覽器來測(cè)試。

瀏覽器支持統(tǒng)計(jì)信息

一個(gè)有用的措施，您可以調(diào)用以通知您的瀏覽器測(cè)試選擇是瀏覽器支持統(tǒng)計(jì)。 有許多網(wǎng)站提供此類統(tǒng)計(jì)信息，例如:

• Netmarketshare
• Statcounter

這些都是以北美為中心，而不是特別準(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)確得多。

Setting up Google analytics

1. First of all, you'll need a Google account. Use this account to sign into Google Analytics.
2. Choose the Google Analytics (web) option, and click the Sign Up button.
3. Enter your web site/app details into the signup page. This is fairly intuitive to set up; the most important field to get right is the Website URL. This needs to be your site/app's root URL.
4. Once you've finished filling in everything, press the Get Tracking ID button, then accept the terms of service that appear.
5. The next page provides you with some code snippets and other instructions. For a basic website, what you need to do is copy the Website tracking code block and paste it into all the different pages you want to track using Google Analytics on your site. You could below your closing </body> tag, or somewhere else appropriate that keeps it from getting muddled up with your application code.
6. Upload the changes to the development server, or wherever else you need your code.

而已！ 您的網(wǎng)站現(xiàn)在應(yīng)該可以開始報(bào)告分析數(shù)據(jù)。

Studying analytics data

現(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 。

其他考慮

還有其他注意事項(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ì)是這樣的:

1. A grade: Chrome and Firefox for Windows/Mac, Safari for Mac, Edge and IE for Windows (last two versions of each), iOS Safari for iPhone/iPad, Android stock browser (last two versions) on phone/tablet, Chrome and Firefox for Android (last two versions) on phone tablet. Accessibility passing common tests.
2. B grade: IE 8 and 9 for Windows, Opera Mini.
3. C grade: Opera, other niche modern browsers.

你要測(cè)試什么？

當(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í):

• Button should be activatable by the user's primary control mechanism, whatever it is — this should include mouse, keyboard, and touch.
• Toggling the button should make the information box appear/disappear.
• The text should be readable.
• Visually impaired users using screenreaders should be able to access the text.

一個(gè)品級(jí):

• The information box should animate smoothly as it appears/disappears.
• The gradient and text shadow should appear to enhance the look of the box.

您可能會(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)?

• They give you a set of steps to follow when you are performing tests.
• They can be easily turned into sets of instructions for user groups to follow when carrying out tests (e.g. "try to active the button using your mouse, and then the keyboard...") — see User testing, below.
• They can also provide a basis for writing automated tests. It is easier to write such tests if you know exactly what you want to test, and what the success conditions are (see Using an automation tool to automate browser testing, later in the series).

放在一起的測(cè)試實(shí)驗(yàn)室

執(zhí)行瀏覽器測(cè)試的一個(gè)選項(xiàng)是自己進(jìn)行測(cè)試。 為此，您可能使用實(shí)際物理設(shè)備和仿真環(huán)境(使用仿真器或虛擬機(jī))的組合。

物理設(shè)備

通常最好有一個(gè)真正的設(shè)備運(yùn)行您想要測(cè)試的瀏覽器 - 這在行為和整體用戶體驗(yàn)方面提供了最大的準(zhǔn)確性。 對(duì)于一個(gè)合理的低級(jí)設(shè)備實(shí)驗(yàn)室，你可能需要一些類似的東西:

• A Mac, with the browsers installed that you need to test — this can include Firefox, Chrome, Opera, and Safari.
• A Windows PC, with the browsers installed that you need to test — this can include Edge (or IE), Chrome, Firefox, and Opera.
• A higher spec Android phone and tablet with browser installed that you need to test — this can include Chrome, Firefox, and Opera Mini for Android, as well as the original Android stock browser.
• A higher spec iOS phone and tablet with the browsers installed that you need to test — this can include iOS Safari, and Chrome, Firefox, and Opera Mini for iOS.

以下也是很好的選擇，如果你可以得到他們:

• A Linux PC available, in case you need to test bugs specific to Linux versions of browsers. Linux users comonly use Firefox, Opera, and Chrome. If you only have one machine available, you could consider creating a dual boot machine running Linux and Windows on separate partitions. Ubuntu's installer makes this quite easy to set up; see WindowsDualBoot for help with this.
• A couple of lower spec mobile devices, so you can test performance of features like?animations on lower powered processors.

您的主要工作機(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)。

仿真器

仿真器基本上是在您的計(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è)備/瀏覽器如下:

• The official Android Studio IDE for developing Android apps is a bit heavy weight for just testing websites on Google Chrome or the old Stock Android browser, but it does come with a Robust emulator. If you want something a bit more lightweight, LeapDroid is a good option for Windows, and Andy is a reasonable option that runs on both Windows and Mac.
• Apple provides an app called Simulator that runs on top of the XCode development environment, and emulates iPad/iPhone/Apple Watch/Apple TV. This includes the native iOS Safari browser. This unfortunately only runs on a Mac.

您經(jīng)常可以找到其他移動(dòng)設(shè)備環(huán)境的模擬器，例如:

• Blackberry (emulator available for Windows, Mac OSX and Linux).
• You can emulate Opera Mini on its own if you want to test it.
• There are emulators available for Windows Mobile OSes: see Windows Phone Emulator for Windows Phone 8 and Test with the Microsoft Emulator for Windows 10 Mobile (these only run on Windows).

虛擬機(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)的。

要使用Virtualbox，您需要:

1. Get hold of an installer disk or image (e.g. ISO file) for the operating system you want to emulate. Virtual Box is unable to provide these; most, like Windows OSes, are commercial products that can't be freely distributed.
2. Download the appropriate installer for your operating system and install it.
3. Open the app; you'll be presented with a view like the following:
4. To create a new virtual machine, press the New button in the top left hand corner.
5. Follow the instructions and fill in the following dialog boxes as appropriate. You'll:
   1. Provide a name for the new virtual machine
   2. Choose with operating system and version you are installing on it
   3. Set how much RAM should be allocated (we'd recommend something like 2048MB, or 2GB)
   4. Create a virtual hard disk (choose the default options across the three dialog boxes containing Create a virtual hard disk now, VDI (virtual disk image), and Dynamically allocated).
   5. Choose the file location and size for the virtual hard disk (choose a sensible name and location to keep it, and for the size specify around 50GB, or as much as you are comfortable with specifying).

現(xiàn)在，新的虛擬框應(yīng)該出現(xiàn)在主虛擬框UI窗口的左側(cè)菜單中。 此時(shí)，您可以雙擊它打開虛擬框 - 它將開始啟動(dòng)虛擬機(jī)，但它還沒有安裝操作系統(tǒng)。 此時(shí)，您需要將對(duì)話框指向安裝程序映像/磁盤，它將運(yùn)行通過步驟將其安裝在虛擬機(jī)上，就像是真正的計(jì)算機(jī)。

過程完成后，您應(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è)試，例如:

• Windows 10 with Edge 14
• Windows 10 with Edge 13
• Windows 8.1 with IE11
• Windows 8 with IE10
• Windows 7 with IE9
• Windows XP with IE8
• Windows XP with IE7
• Windows XP with IE6

自動(dòng)化和商業(yè)應(yīng)用程序

如上一章所述，您可以通過使用某種自動(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è)試。

我們將在后面的模塊中討論如何使用這些工具。

用戶測(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ì)為有視力的用戶工作:

• Click the question mark button using the mouse on your desktop computer a few times. Refresh the browser window.
• Select and activate the question mark button using the keyboard on your desktop computer a few times.
• Tap the question mark button a few times on your touch screen device.
• Toggling the button should make the information box appear/disappear. Does it do this, in each of the above three cases?
• Is the text readable?
• Does the information box animate smoothly as it appears/disappears?

當(dāng)運(yùn)行測(cè)試時(shí)，它也可以是一個(gè)好主意:

• Set up a separate browser profile where possible, with browser extensions and other such things disabled, and run your tests in that profile (see Use the Profile Manager to create and remove Firefox profiles and?Share Chrome with others or add personas, for example).
• Use browser's private mode functionality when running tests, where available (e.g. Private Browsing in Firefox, Incognito Mode in Chrome) so things like cookies and temp files are not saved.

這些步驟旨在確保您正在測(cè)試的瀏覽器是盡可能"純"，即沒有安裝任何可能影響測(cè)試的結(jié)果。

概要

閱讀本文后，您現(xiàn)在應(yīng)該知道如何識(shí)別目標(biāo)受眾/目標(biāo)瀏覽器列表，然后有效地對(duì)該列表進(jìn)行跨瀏覽器測(cè)試。

接下來，我們將關(guān)注您的測(cè)試可能發(fā)現(xiàn)的實(shí)際代碼問題，從HTML和CSS開始。