測試全部？

當(dāng)進(jìn)行跨瀏覽器測試時，您需要制定一系列需要測試的瀏覽器。 沒有辦法，你可以測試瀏覽器和設(shè)備的每一個組合，您的用戶可能會使用，以查看您的網(wǎng)站 - 有太多，并且新的出現(xiàn)所有的時間。

相反，您應(yīng)該嘗試確保您的網(wǎng)站在最重要的目標(biāo)瀏覽器和設(shè)備上工作，然后進(jìn)行防御性編碼，以便為您的網(wǎng)站提供最廣泛的支持。

通過編碼防御，我們的意思是嘗試建立智能回退，以便如果一個功能或樣式不能在瀏覽器中工作，該網(wǎng)站將能夠降級到一些不那么刺激，仍然提供可接受的用戶體驗 - 核心信息 仍然可訪問，例如，即使它看起來不那么漂亮。

目的是建立一個你可以參考的瀏覽器/設(shè)備的圖表，你測試。 你可以使它簡單或復(fù)雜，因為你喜歡 - 例如一個常見的方法是有多個級別的suport級別，像:

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)建支持圖表。

教育猜測

你可以稱之為"假設(shè)"或"直覺"。 這不是一個準(zhǔn)確的，科學(xué)的方法，但作為有網(wǎng)絡(luò)行業(yè)經(jīng)驗的人，你會有一個很好的想法，至少一些瀏覽器，你應(yīng)該測試。 這可以形成支持圖表的良好基礎(chǔ)。

例如，如果你住在西歐或北美，你會知道很多人使用Windows和Mac桌面/筆記本電腦，主要瀏覽器是Chrome，F(xiàn)irefox，Safari，IE和Edge。 你可能想測試前三個的最新版本，因為這些瀏覽器會定期更新。 對于Edge和IE，你可能想測試最后幾個版本; 這些都應(yīng)該在A年級。

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

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

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

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)站上，那么您可能會有不同的常見瀏覽器來測試。

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

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

• Netmarketshare
• Statcounter

這些都是以北美為中心，而不是特別準(zhǔn)確，但他們可以給你一個廣泛的趨勢的想法。

例如，讓我們轉(zhuǎn)到 Netmarketshare 。 您可以看到Opera被列為具有小但可見的使用數(shù)字，因此我們應(yīng)該將其添加到我們的支持圖表作為C級。

IE8被列為重要的，但它是舊的，不再能夠。 Opera Mini也很重要，但它在運行時運行復(fù)雜JavaScript的能力不強(qiáng)等(見 Opera Mini和JavaScript )。 我們也應(yīng)該把它放到B級。

使用分析

如果您能獲得更準(zhǔn)確的數(shù)據(jù)來源，則來自分析應(yīng)用程序，如 Google Analytics(分析) 。 這是一個應(yīng)用程序，將提供準(zhǔn)確的統(tǒng)計信息，確切地說，人們使用哪些瀏覽器來瀏覽您的網(wǎng)站。 當(dāng)然，這依賴于你已經(jīng)有一個網(wǎng)站來使用它，所以它不是很好的全新的網(wǎng)站。

但分析歷史記錄可用于查找支持統(tǒng)計信息以影響公司網(wǎng)站的新版本或您要添加到現(xiàn)有網(wǎng)站的新功能。 如果你有這些可用，它們比全球瀏覽器的統(tǒng)計數(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)該可以開始報告分析數(shù)據(jù)。

Studying analytics data

現(xiàn)在，您應(yīng)該可以返回 Google Analytics(分析)網(wǎng)絡(luò)首頁，然后開始查看您的數(shù)據(jù) 收集了關(guān)于您的網(wǎng)站(您需要留一點時間一些數(shù)據(jù)實際收集，當(dāng)然)。

默認(rèn)情況下，您應(yīng)該會看到報告標(biāo)簽，如下所示:

386px; margin:0px auto; width:700px;">

您可以使用Google Analytics(分析)查看大量數(shù)據(jù) - 不同類別的自定義報告等等 - 我們沒有時間討論這一切。 Google Analytics(分析)入門為初學(xué)者提供了一些有用的報告(及更多)指南。

還應(yīng)該鼓勵您查看左側(cè)的不同選項，并查看可以找到哪些類型的數(shù)據(jù)。 例如，您可以通過選擇受眾群體> gt>來了解用戶正在使用的瀏覽器和操作系統(tǒng)。 技術(shù)> 瀏覽器& OS 。

其他考慮

還有其他注意事項，你也應(yīng)該包括。 您應(yīng)該確保將輔助功能作為A級測試要求(我們將詳細(xì)介紹您在"處理常見輔助功能問題"文章中應(yīng)該測試的內(nèi)容)

此外，您可能還有其他注意事項。 如果您正在創(chuàng)建某種公司內(nèi)部網(wǎng)以向經(jīng)理提供銷售數(shù)據(jù)，并且所有經(jīng)理都提供了Windows手機(jī)，您可能希望優(yōu)先提供移動IE支持。

最終支持圖表

所以，我們的最終支持圖表將會是這樣的:

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.

你要測試什么？

當(dāng)你有一個新的添加到你的代碼庫需要測試，在開始測試之前，你應(yīng)該寫出一個測試需求列表，需要通過被接受。 這些要求可以是可視的或功能的 - 兩者結(jié)合起來以產(chǎn)生可用的網(wǎng)站特征。

請考慮以下示例(請參閱 class ="external">源代碼，以及 -panel.html"class ="external">示例正在運行):

height:455px; margin:0px auto; width:700px;">

此功能的測試標(biāo)準(zhǔn)可以這樣寫:

A和B級:

• 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.

一個品級:

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

您可能會注意到，在示例中的文本它將不工作在IE8 - 這是一個問題，根據(jù)我們的支持圖表，你必須處理，也許通過使用功能檢測庫實現(xiàn)功能在 不同的方式，如果瀏覽器不支持CSS轉(zhuǎn)換(請參閱實現(xiàn)功能檢測，稍后在課程中)。

您可能還會注意到，僅使用鍵盤不能使用此按鈕 - 這也需要修復(fù)。 也許我們可以使用一些JavaScript來實現(xiàn)一個鍵盤控制切換，或使用一些其他方法完全？

這些測試標(biāo)準(zhǔ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).

放在一起的測試實驗室

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

物理設(shè)備

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

• 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è)備，使開發(fā)人員能夠搜索非常特定的瀏覽器/設(shè)備組合上的錯誤。 較小的公司和個人通常不能負(fù)擔(dān)這樣復(fù)雜的實驗室，因此傾向于使用較小的實驗室，仿真器，虛擬機(jī)和商業(yè)測試應(yīng)用程序。

我們將涵蓋以下每個其他選項。

仿真器

仿真器基本上是在您的計算機(jī)內(nèi)部運行的程序，并模擬某種設(shè)備或特定設(shè)備條件，允許您更方便地做一些測試，比找到一個特定組合的硬件/軟件來測試。

仿真器可能與測試設(shè)備條件一樣簡單。 例如，如果您想對您的寬度/高度媒體查詢進(jìn)行一些快速和臟的測試，您可以使用Firefox的 / Responsive_Design_Mode">響應(yīng)設(shè)計模式。 Safari也有類似的模式，可以通過轉(zhuǎn)到 Safari> 首選項，并選中顯示開發(fā)菜單，然后選擇開發(fā)> 進(jìn)入響應(yīng)設(shè)計模式。 Chrome也有類似的功能:設(shè)備模式(請參見使用設(shè)備模式模擬移動設(shè)備 )。

更多的時候，你必須安裝某種模擬器。 您想要測試的最常見的設(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)?？梢哉业狡渌苿釉O(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ī)上運行的應(yīng)用程序，允許您運行整個操作系統(tǒng)的模擬，每個模塊劃分在自己的虛擬硬盤驅(qū)動器中(通常由主機(jī)硬盤驅(qū)動器上的單個大文件表示)。 Ther是許多常見的虛擬機(jī)應(yīng)用程序，例如 Parallels ， "external"> VMWare 和 Virtual Box ; 我們個人喜歡后者，因為它是免費的。

要使用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è)菜單中。 此時，您可以雙擊它打開虛擬框 - 它將開始啟動虛擬機(jī)，但它還沒有安裝操作系統(tǒng)。 此時，您需要將對話框指向安裝程序映像/磁盤，它將運行通過步驟將其安裝在虛擬機(jī)上，就像是真正的計算機(jī)。

過程完成后，您應(yīng)該有一個虛擬機(jī)在您的主機(jī)計算機(jī)的窗口中運行操作系統(tǒng)。

您需要像對待任何真正的安裝一樣對待這個虛擬操作系統(tǒng)安裝 - 例如，以及安裝您想要測試的瀏覽器，安裝一個防病毒程序來防止病毒。

擁有多個虛擬機(jī)非常有用，特別是對于Windows IE / Edge測試 - 在Windows上，您不能并排安裝多個版本的默認(rèn)瀏覽器，因此您可能希望構(gòu)建一個虛擬機(jī)庫來處理 根據(jù)需要進(jìn)行不同的測試，例如:

• 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

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

如上一章所述，您可以通過使用某種自動化系統(tǒng)來消除瀏覽器測試的痛苦。 您可以設(shè)置自己的測試自動化系統(tǒng)( Selenium 是受歡迎的應(yīng)用程序)，它需要一些設(shè)置 ，但可以是非常有益的，當(dāng)你得到它制定出來。

還有一些商業(yè)工具，例如 Sauce Labs 和 瀏覽器堆棧為你做這樣的事情，而不必?fù)?dān)心設(shè)置，如果你想投資一些錢在你的測試。

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

用戶測試

在我們繼續(xù)之前，我們將通過談一談用戶測試來完成這篇文章 - 如果有一個愿意的用戶組測試您的新功能，這可能是一個很好的選擇。 請記住，這可以是如果或盡可能復(fù)雜的你喜歡的 - 你的用戶組可以是一群朋友，一群同事，或一組無酬或付費志愿者，這取決于你有否花錢 測試。

通常，您可以讓用戶查看包含某種開發(fā)服務(wù)器上的新功能的頁面或視圖，因此您不會將最終站點或更改直到完成為止。 你應(yīng)該讓他們按照一些步驟，并報告他們得到的結(jié)果。 提供一組步驟(有時稱為腳本)是有用的，這樣您可以獲得更可靠的結(jié)果，這些結(jié)果與您嘗試測試的結(jié)果有關(guān)。 我們在您要測試的內(nèi)容部分中提到了這一點 - 很容易將詳細(xì)的測試標(biāo)準(zhǔn)轉(zhuǎn)換為要遵循的步驟。 例如，以下會為有視力的用戶工作:

• 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)運行測試時，它也可以是一個好主意:

• 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.

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

概要

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

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