Strategies for carrying out testing

先决条件:	熟悉核心 HTML ， CSS 和 JavaScript 语言; 高级跨浏览器测试原则的概念。
目的:	了解跨浏览器测试中涉及的高级概念。

测试全部？

当进行跨浏览器测试时，您需要制定一系列需要测试的浏览器。 没有办法，你可以测试浏览器和设备的每一个组合，您的用户可能会使用，以查看您的网站 - 有太多，并且新的出现所有的时间。

相反，您应该尝试确保您的网站在最重要的目标浏览器和设备上工作，然后进行防御性编码，以便为您的网站提供最广泛的支持。

通过编码防御，我们的意思是尝试建立智能回退，以便如果一个功能或样式不能在浏览器中工作，该网站将能够降级到一些不那么刺激，仍然提供可接受的用户体验 - 核心信息 仍然可访问，例如，即使它看起来不那么漂亮。

目的是建立一个你可以参考的浏览器/设备的图表，你测试。 你可以使它简单或复杂，因为你喜欢 - 例如一个常见的方法是有多个级别的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.

在以下各节中，我们将以此格式构建支持图表。

教育猜测

你可以称之为"假设"或"直觉"。 这不是一个准确的，科学的方法，但作为有网络行业经验的人，你会有一个很好的想法，至少一些浏览器，你应该测试。 这可以形成支持图表的良好基础。

例如，如果你住在西欧或北美，你会知道很多人使用Windows和Mac桌面/笔记本电脑，主要浏览器是Chrome，Firefox，Safari，IE和Edge。 你可能想测试前三个的最新版本，因为这些浏览器会定期更新。 对于Edge和IE，你可能想测试最后几个版本; 这些都应该在A年级。

许多人使用iOS和Android，所以你可能还想测试的最新版本的iOS Safari，旧的Android股票浏览器的最后几个版本，Chrome和Firefox的iOS和Android。 你应该理想地在手机和平板电脑上测试这些，以确保响应式设计工作正常。

你可能还知道一些人仍然使用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

如果您住在其他地方，或正在其他地方(例如某些国家/地区)服务的网站上，那么您可能会有不同的常见浏览器来测试。

浏览器支持统计信息

一个有用的措施，您可以调用以通知您的浏览器测试选择是浏览器支持统计。 有许多网站提供此类统计信息，例如:

• Netmarketshare
• Statcounter

这些都是以北美为中心，而不是特别准确，但他们可以给你一个广泛的趋势的想法。

例如，让我们转到 Netmarketshare 。 您可以看到Opera被列为具有小但可见的使用数字，因此我们应该将其添加到我们的支持图表作为C级。

IE8被列为重要的，但它是旧的，不再能够。 Opera Mini也很重要，但它在运行时运行复杂JavaScript的能力不强等(见 Opera Mini和JavaScript )。 我们也应该把它放到B级。

使用分析

如果您能获得更准确的数据来源，则来自分析应用程序，如 Google Analytics(分析) 。 这是一个应用程序，将提供准确的统计信息，确切地说，人们使用哪些浏览器来浏览您的网站。 当然，这依赖于你已经有一个网站来使用它，所以它不是很好的全新的网站。

但分析历史记录可用于查找支持统计信息以影响公司网站的新版本或您要添加到现有网站的新功能。 如果你有这些可用，它们比全球浏览器的统计数据，如上所述的准确得多。

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.

而已！ 您的网站现在应该可以开始报告分析数据。

Studying analytics data

现在，您应该可以返回 Google Analytics(分析)网络首页，然后开始查看您的数据 收集了关于您的网站(您需要留一点时间一些数据实际收集，当然)。

默认情况下，您应该会看到报告标签，如下所示:

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

您可以使用Google Analytics(分析)查看大量数据 - 不同类别的自定义报告等等 - 我们没有时间讨论这一切。 Google Analytics(分析)入门为初学者提供了一些有用的报告(及更多)指南。

还应该鼓励您查看左侧的不同选项，并查看可以找到哪些类型的数据。 例如，您可以通过选择受众群体> gt>来了解用户正在使用的浏览器和操作系统。 技术> 浏览器& OS 。

其他考虑

还有其他注意事项，你也应该包括。 您应该确保将辅助功能作为A级测试要求(我们将详细介绍您在"处理常见辅助功能问题"文章中应该测试的内容)

此外，您可能还有其他注意事项。 如果您正在创建某种公司内部网以向经理提供销售数据，并且所有经理都提供了Windows手机，您可能希望优先提供移动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.

你要测试什么？

当你有一个新的添加到你的代码库需要测试，在开始测试之前，你应该写出一个测试需求列表，需要通过被接受。 这些要求可以是可视的或功能的 - 两者结合起来以产生可用的网站特征。

请考虑以下示例(请参阅 class ="external">源代码，以及 -panel.html"class ="external">示例正在运行):

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

此功能的测试标准可以这样写:

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 - 这是一个问题，根据我们的支持图表，你必须处理，也许通过使用功能检测库实现功能在 不同的方式，如果浏览器不支持CSS转换(请参阅实现功能检测，稍后在课程中)。

您可能还会注意到，仅使用键盘不能使用此按钮 - 这也需要修复。 也许我们可以使用一些JavaScript来实现一个键盘控制切换，或使用一些其他方法完全？

这些测试标准很有用，因为:

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

放在一起的测试实验室

执行浏览器测试的一个选项是自己进行测试。 为此，您可能使用实际物理设备和仿真环境(使用仿真器或虚拟机)的组合。

物理设备

通常最好有一个真正的设备运行您想要测试的浏览器 - 这在行为和整体用户体验方面提供了最大的准确性。 对于一个合理的低级设备实验室，你可能需要一些类似的东西:

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

您的主要工作机器也可以是为特定目的安装其他工具的地方，例如辅助功能审核工具，屏幕阅读器和仿真器/虚拟机。

一些较大的公司有设备实验室，存储了大量不同的设备，使开发人员能够搜索非常特定的浏览器/设备组合上的错误。 较小的公司和个人通常不能负担这样复杂的实验室，因此倾向于使用较小的实验室，仿真器，虚拟机和商业测试应用程序。

我们将涵盖以下每个其他选项。

仿真器

仿真器基本上是在您的计算机内部运行的程序，并模拟某种设备或特定设备条件，允许您更方便地做一些测试，比找到一个特定组合的硬件/软件来测试。

仿真器可能与测试设备条件一样简单。 例如，如果您想对您的宽度/高度媒体查询进行一些快速和脏的测试，您可以使用Firefox的 / Responsive_Design_Mode">响应设计模式。 Safari也有类似的模式，可以通过转到 Safari> 首选项，并选中显示开发菜单，然后选择开发> 进入响应设计模式。 Chrome也有类似的功能:设备模式(请参见使用设备模式模拟移动设备 )。

更多的时候，你必须安装某种模拟器。 您想要测试的最常见的设备/浏览器如下:

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

您经常可以找到其他移动设备环境的模拟器，例如:

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

虚拟机

虚拟机是在桌面计算机上运行的应用程序，允许您运行整个操作系统的模拟，每个模块划分在自己的虚拟硬盘驱动器中(通常由主机硬盘驱动器上的单个大文件表示)。 Ther是许多常见的虚拟机应用程序，例如 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).

现在，新的虚拟框应该出现在主虚拟框UI窗口的左侧菜单中。 此时，您可以双击它打开虚拟框 - 它将开始启动虚拟机，但它还没有安装操作系统。 此时，您需要将对话框指向安装程序映像/磁盘，它将运行通过步骤将其安装在虚拟机上，就像是真正的计算机。

过程完成后，您应该有一个虚拟机在您的主机计算机的窗口中运行操作系统。

您需要像对待任何真正的安装一样对待这个虚拟操作系统安装 - 例如，以及安装您想要测试的浏览器，安装一个防病毒程序来防止病毒。

拥有多个虚拟机非常有用，特别是对于Windows IE / Edge测试 - 在Windows上，您不能并排安装多个版本的默认浏览器，因此您可能希望构建一个虚拟机库来处理 根据需要进行不同的测试，例如:

• 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

自动化和商业应用程序

如上一章所述，您可以通过使用某种自动化系统来消除浏览器测试的痛苦。 您可以设置自己的测试自动化系统( Selenium 是受欢迎的应用程序)，它需要一些设置 ，但可以是非常有益的，当你得到它制定出来。

还有一些商业工具，例如 Sauce Labs 和 浏览器堆栈为你做这样的事情，而不必担心设置，如果你想投资一些钱在你的测试。

我们将在后面的模块中讨论如何使用这些工具。

用户测试

在我们继续之前，我们将通过谈一谈用户测试来完成这篇文章 - 如果有一个愿意的用户组测试您的新功能，这可能是一个很好的选择。 请记住，这可以是如果或尽可能复杂的你喜欢的 - 你的用户组可以是一群朋友，一群同事，或一组无酬或付费志愿者，这取决于你有否花钱 测试。

通常，您可以让用户查看包含某种开发服务器上的新功能的页面或视图，因此您不会将最终站点或更改直到完成为止。 你应该让他们按照一些步骤，并报告他们得到的结果。 提供一组步骤(有时称为脚本)是有用的，这样您可以获得更可靠的结果，这些结果与您尝试测试的结果有关。 我们在您要测试的内容部分中提到了这一点 - 很容易将详细的测试标准转换为要遵循的步骤。 例如，以下会为有视力的用户工作:

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

当运行测试时，它也可以是一个好主意:

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

这些步骤旨在确保您正在测试的浏览器是尽可能"纯"，即没有安装任何可能影响测试的结果。

概要

阅读本文后，您现在应该知道如何识别目标受众/目标浏览器列表，然后有效地对该列表进行跨浏览器测试。

接下来，我们将关注您的测试可能发现的实际代码问题，从HTML和CSS开始。