Strategies for carrying out testing

本文提供了跨浏览器测试的概述,回答了诸如"什么是跨浏览器测试?","您将经常遇到的问题?"和"方法"之类的问题.测试,识别和修复错误的关键是什么?"

先决条件: 精通HTMLCSSJavaScript语言 ; 对跨浏览器测试理论有所了解.
目标: 了解跨浏览器测试的高级理论.

Có nên kiểm thử tất tần tật?

测试跨浏览器时,需要列出要测试的浏览器列表. 您将无法测试用户使用的每种浏览器和设备-因为浏览器和设备的类型众多,并且不断发布新版本和设备.

相反,您应该尝试确保您的网站可以在目标浏览器和设备上运行,并防御性地编写代码以使您的网站具有最理想的兼容性.

"防御性编码"是指构建智能后备,以便在该浏览器上无法使用任何功能或样式时,该网站可能会使用低级方法或属性来实现人工体验.可接受的用法-尽管界面可能看起来不太好,但是仍然可以访问诸如核心信息之类的信息.

我们的目的是在测试时绘制浏览器/设备之间的兼容性图表. 您可以根据需要将其设置为复杂或简单-例如,可以设置不同级别的支持,如下所示:

  1. 等级A:现代/流行的浏览器-有能力. 测试了所有功能并提供了完整功能.
  2. 级别B:旧的/旧的浏览器-不足. 测试并提供基本经验,包括访问核心信息和服务.
  3. C级:稀有/未知浏览器-未测试,但应该可行. 运行整个页面,至少在防御性地编写源代码的同时至少安装了回退解决方案.

在下一部分中,我们将基于此模板构建兼容性图表.

注意 :雅虎是第一个以" 分级浏览器支持"方法而闻名的单位.

Phán đoán có cơ sở

它可以被称为"假设"或"预感". 这不是一种精确的科学方法,但是作为一个在Web应用程序行业中有经验的人,您将知道一些要测试的浏览器. 这可以为兼容性图表奠定良好的基础.

例如,如果您居住在西欧或北美,您将知道很多人使用运行Windows或Mac的台式机(台式机)和便携式计算机(笔记本电脑),主要浏览器是Chrome,Firefox,Safari. ,IE和Edge. 您应该在前三个浏览器的最新版本上进行测试,因为它们经常不断更新. 使用Edge和IE,您应该测试一些最新版本. 收集以上所有内容以获得A级.

注意 :您只能在每台计算机上安装IE或Edge的一个版本,因此必须使用虚拟机,或在需要时应用其他测试策略. 下一个虚拟机部分将详细解释.

大量的iOS和Android用户,因此您还需要测试最新版本的iOS Safari,Android上一些最新版本的常规浏览器以及适用于iOS和Android的Chrome和Firefox. 如果可能,请在手机和平​​板电脑上进行测试,以确保响应式设计正常运行.

您还应该知道IE 9用户很多,该浏览器较旧且较弱,因此请使用B级.

从这里我们构建兼容性图表,如下所示:

  1. 级别A:适用于Windows / Mac的Chrome和Firefox,适用于Mac的Safari,适用于Windows的Edge和IE(每种版本的两个最新版本),适用于iPhone / iPad的iOS Safari,适用于Android手机/平板电脑的通用浏览器(最新的两个版本)在手机/平板电脑上; Chrome和Firefox(用于Android的手机/平板电脑)(两个最新版本)
  2. B级:Windows的IE 9
  3. C级:不适用

如果您居住在另一个地区,或者正在建立一个服务于其他地区(例如其他地区)的网站,那么流行的测试浏览器将有所不同.

注意 :"我公司的首席执行官使用Blackberry,因此我们必须使网络在其上平稳运行"也是一个令人信服的想法.

Chỉ số tương thích trình duyệt

测试浏览器选项可以考虑的标准之一是浏览器兼容性指数. 有许多网站提供此指标,例如:

这两个站点都在北美中部采集数据,虽然并不完全准确,但是它们可以告诉您一些有关当前趋势的信息.

例如,转到Netmarketshare . 如您所见,Opera排在一个很小的列表中,但是仍然有用户,我们应该在上面的兼容性图表中将其排在C级.

IE8也分为几类,但是它很旧并且不能运行太多. Opera Mini相同,但仍能够在运行时等执行复杂的JavaScript源代码(有关更多详细信息,请参见Opera Mini和JavaScript ). 我们也应该将其排在B级.

Phân tích

如果可以的话,更准确的数据源通常来自Google Analytics(分析)之类的分析应用程序. 这是一个应用程序,可为您提供用户用来访问您的网站的浏览器类型的准确索引. 当然,仅当您已经有一个活动的网站时,此方法才有效,因此此方法不适用于全新的网站.

但是,分析历史记录对于查找全新站点或即将添加到现有站点的功能的兼容性指标也很有用. 这些数据比上面两页的全局汇总指标更准确.

另外,您也可以使用开源数据分析平台,例如Open Web AnalyticsMatomo . 要使用它们,您必须构建自己的服务器(自我托管).

Thiết lập Google analytics

  1. 首先,您需要一个Google帐户. 使用此帐户登录到Google Analytics(分析) .
  2. 选择Google Analytics(分析)网络选项,然后单击" 注册"按钮.
  3. 在注册页面上输入您的网站/应用程序详细信息. 这里的输入表单非常直观; 要输入的最重要的信息字段是网站的URL. 请确保获得正确的原始URL.
  4. 输入所有内容后,请按" 获取跟踪ID"按钮,然后选择接受服务条款.
  5. 下一页为您提供一些带有注释的代码段. 对于简单的网站,您只需要复制网站跟踪源代码并将其粘贴到要使用Google Analytics(分析)跟踪的每个页面的源代码中. 您可以将其放在</body>标记下,或与应用程序中的源代码分开的位置.
  6. 将更改上传到您的开发源存储库或您喜欢的任何位置.

完成了! 您的网站现在可以报告分析数据了.

Nghiên cứu dữ liệu phân tích

现在返回到Analytics Web的主页,并开始跟踪您刚刚在网站上收集的数据(当然,您需要花费一些时间来收集数据.)

默认情况下,您将看到一个报告选项卡,如下所示:

如您所见,使用Google Analytics(分析)时,会有大量数据-按标题的自定义通知等-而且我们没有太多时间来讨论它们. Analytics(分析)入门为新手与这些报告进行交互提供了一些有用的提示.

您还应该考虑左侧的不同选项,并过滤掉要使用的数据. 例如,通过从左侧菜单中选择" 受众">"技术">"浏览器和操作系统",可以找到用户使用的浏览器和操作系统 .

注意 :使用Google Analytics(分析)时,您需要谨慎对待意外的预测,例如"我们在Firefox Mobile上没有用户",这经常会阻止您再支持Firefox Mobile. 但是,如果您的网站从一开始就无法正常工作,那么您将在Firefox Mobile上没有任何用户.

Một vài đề xuất khác

您还应该考虑其他一些方面. 您应该将可访问性作为A级测试请求(我们将在"常见访问问题排查"中详细介绍您需要尝试的内容)

此外,您还需要考虑更多的环境因素. 如果您正在为公司Intranet编写应用程序,以创建用于管理的零售销售统计图表,并且所有管理都已分发到具有Windows操作系统的电话,则现在您必须将IE放在最重要的支持列表上.

Biểu đồ tương thích bản cuối

毕竟,我们的兼容性图表如下所示:

  1. 级别A:适用于Windows / Mac的Chrome和Firefox,适用于Mac的Safari,适用于Windows的Edge和IE(每个都有两个最新版本),适用于iPhone / iPad的iOS Safari,适用于Android的浏览器(两个最新版本)适用于手机/平板电脑,适用于手机/平板电脑的Chrome和Firefox Android(两个最新版本). 通过了正常的可访问性测试.
  2. Cấp B: IE 8 và 9 cho Windows, Opera Mini.
  3. C级:Opera和其他一些较不流行的现代浏览器.

Bạn định kiểm thử cái gì?

当您要测试新添加的源代码时,在开始之前,应列出必须通过的测试要求才能被接受. 这些要求可以是功能上的,也可以是美学上的-将两者结合在一起将使您的站点可以使用一种功能.

考虑以下示例(请参阅源代码实时版本 ):

此示例的测试项目如下所示:

A级和B级:

  • 按钮应由用户的主要控制机制激活-包括鼠标,键盘和触摸.
  • 切换按钮应隐藏/显示信息对话框.
  • 文字应可读.
  • Người dùng khiếm thị khi dùng trình đọc màn hình (screenreader) nên tiếp cận được văn bản.

A级:

  • 文本框应隐藏/显示流畅.
  • 应该有渐变(渐变)和文本阴影(阴影)以增强块的外观.

如果您注意到,您将看到示例中的文本在IE8上不起作用-我们的兼容性表中已经列出了此问题,您必须遵循该兼容性表,也许您必须使用标识库功能以重新安装它以适合不支持CSS过渡的浏览器(请参阅以下文章中的实现功能标识符).

您可能已经注意到,该按钮不仅仅适用于键盘-这是一个重新考虑. 也许我们应该使用一些JavaScript来允许键盘控制反转按钮的动作,或者改用其他方法?

这些测试参数非常有用,因为:

  • 他们提供了一组测试您的应用程序的步骤.
  • 它们也可以很容易地转换为一组命令,供一组用户测试(例如,"尝试使用鼠标打开按钮,然后尝试使用键盘...")-请参阅下面的用户测试 .
  • 他们还可以提供用于自动编写测试的平台. 如果您知道要测试的内容,则编写测试用例以及掌握成功的测试条件将变得更加容易(请阅读以下文章中的自动化测试).

Xây dựng phòng thí nghiệm kiểm thử

测试方法之一是手动测试. 为此,您将必须在一些实际的物理设备和虚拟化环境(同时使用仿真器和虚拟机)上组合测试.

Thiết bị vật lý

在运行浏览器的真实设备上进行的测试通常比以往任何时候都更好,它可以提供最准确的结果,满足用户的行为和体验. 要为小型实验室服务,您需要满足以下条件:

  • Mac计算机(包括要测试的浏览器)可能包括Firefox,Chrome,Opera和Safari.
  • 运行Windows(包括要测试的浏览器)的个人计算机可能包括Edge(或IE),Chrome,Firefox和Opera.
  • 运行带有浏览器进行测试的Android的高端手机或平板电脑-可能包括适用于Android的Chrome,Firefox和Opera Mini,以及专门用于Android的内置浏览器.
  • 运行带有浏览器进行测试的iOS的高端手机或平板电脑-可能包括iOS Safari,Chrome,Firefox和适用于iOS的Opera Mini.

如果可能,您应该投资更多:

  • 如果您需要测试Linux上每个浏览器版本的错误,则个人计算机正在运行Linux. Linux用户经常使用Firefox,Opera和Chrome. 如果只有一台计算机,则可以尝试在两个单独的分区上并行安装Linux和Windows. 如果朝这个方向发展,则应该安装Ubuntu; 阅读WindowsDualBoot以获取更多详细信息.
  • 一些低端移动设备测试了在较弱的处理器上运行图形的能力.

您的主计算机也可以用作安装某些专用工具的位置,例如可访问性审核工具,屏幕阅读器和虚拟机/仿真器.

对于大型公司而言,他们的实验室配备了各种型号不同的设备,从而使开发人员可以查找和修复专用浏览器和设备上的错误. 小型公司和个人通常没有足够的资金来竞争,因此他们经常使用虚拟机,仿真器和商业测试应用程序.

我们将在下面介绍所有这些选项.

Ghichú :已做出一些努力来创建可公开访问的设备实验室-请参阅" 开放设备实验室" .

注意 :我们还必须考虑可访问性-您可以在计算机上安装许多有用的工具来进行可访问性测试,但是我们将在本文中讨论它们.在本系列中,写"常见的可访问性故障排除".

Giả lập

模拟器是在计算机上运行并模拟设备的软件,使您可以自由测试,而不必查找确切的硬件/软件.

仿真器通常用于测试设备的状态. 例如,如果您想快速检查设备的长度和宽度是否适合您的灵活设计(响应设计),则可以使用Firefox的响应设计模式 . Safari也具有类似的模式,您可以通过以下方法使用它:转到Safari>首选项 ,然后选择显示开发菜单 ,然后选择开发>输入响应设计模式 . Chrome也具有类似的模式:设备模式(请参阅使用设备模式模拟移动设备 ).

您将必须安装几个模拟器. 您经常要测试的浏览器/设备如下:

  • Android应用程序编程平台Android Studio IDE对于测试运行在Google Chrome或Stock Android浏览器上的网站有点繁重,但它具有相对强大的模拟器 . 如果您想使用更轻的东西, LeapDroid是Windows的不错选择,而Andy适用于Windows和Mac.
  • 苹果还生产了一个名为Simulator的应用程序该应用程序可在XCode开发环境运行,并模拟iPad / iPhone / Apple Watch / Apple TV. 模拟器包括iOS Safari浏览器. 但是,此应用程序仅在Mac上运行.

您还可以将模拟器用于其他移动设备环境,例如:

注意 :某些仿真器要求虚拟机才能运行(请参见下文). 通常会有关于如何设置和使用虚拟机进行仿真的教程.

Máy ảo

虚拟机是在个人计算机上运行的应用程序,可让您运行整个操作系统的仿真,每个虚拟机都在其自己的虚拟硬盘驱动器(通常表示为驱动器上的大文件)中分开.真实机器的硬盘). 有很多流行的运行虚拟机的应用程序,例如ParallelsVMWareVirtual Box . 就个人而言,我更喜欢Virtual Box,因为它是免费的.

注意 :您需要大量的硬盘空间来运行虚拟机. 您模拟的每个操作系统都会占用大量内存. 当然,您可以选择虚拟机的硬盘驱动器设置数量. 可能仅限于10GB,但某些操作系统需要至少50GB才能正常工作. 对于大多数虚拟机应用程序来说,最好的选择之一是创建一个动态分配的硬盘驱动器,该硬盘驱动器会根据需要自动增加/减少容量.

要使用Virtual Box,您需要:

  1. 搜索包含要模拟的操作系统的安装程序或映像(即ISO文件). Virtual Box不会自动提供这些文件. 大多数操作系统(例如Windows)在市场上都可以买到,并且不能自由分发.
  2. 在实际计算机上为操作系统下载适当的安装程序 ,然后进行安装.
  3. 打开应用程序; 界面如下图所示:
  4. 要创建新的虚拟机,请单击左上角的" 新建"按钮.
  5. 按照说明进行操作,并在对话框中填写以下信息:
    1. 新虚拟机的名称
    2. 选择要安装的操作系统和版本
    3. 设置RAM限制(我们建议2048MB或2GB)
    4. 创建一个虚拟硬盘驱动器(在包含立即创建一个虚拟硬盘VDI(虚拟磁盘映像)动态分配的对话框中保留默认选项).
    5. 选择文件的路径和虚拟硬盘驱动器的大小(选择易于记忆的名称和位置,容器应具有足够的内存空间以满足要求,至少50GB).

此时,虚拟框将出现在"虚拟框"界面的左侧工具栏上. 现在,您可以双击虚拟框-它会启动虚拟机,但是它还没有操作系统. 您必须选择操作系统的映像/安装程序,虚拟框将逐步在虚拟机安装上运行,就像它是在真实计算机上安装一样.

注意 :您需要此时指定要在虚拟机上安装的操作系统. 如果此时取消该过程,它将使虚拟机无法使用,并且您将必须删除该虚拟机并创建一个新的虚拟机. 这不会引起任何严重但令人讨厌的影响.

该过程完成后,您将在虚拟机上运行虚拟机.

像使用真实操作系统一样使用虚拟操作系统-例如,安装要测试的浏览器,安装防病毒软件以对其进行保护.

同时拥有多个虚拟机非常方便,例如,如果要测试Windows IE / Edge-在Windows上,您无法同时安装该浏览器的多个版本,因此必须构建一个虚拟机来在不同的版本上测试每个功能,例如:

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

注意 :虚拟机的另一个优点是虚拟硬盘驱动器非常独立. 如果您在团队中工作,则可以创建一个虚拟硬盘驱动器,然后将其复制到任何地方. 如果虚拟机上安装的操作系统是许可产品,则必须确保为每个虚拟机提供完整许可证.

Ứng dụng tự động và thương mại hoá

如上一章所述,您将不必担心使用某些自动化系统来测试浏览器. 您可以自己设置它们(最著名的之一是Selenium ),虽然有些工作,但是结果值得.

此外,如果您愿意投资进行测试,则可以使用Sauce LabsBrowser StackLambdaTest等商业应用程序进行设置.

我们将在相应的文章中详细介绍如何使用这些工具.

Kiểm thử phía người dùng

在转到下一篇文章之前,我们将简要介绍用户测试-如果您有一群愿意测试您的新功能的用户,这可能是一个不错的选择. 选择参加测试的用户完全取决于您-是一群朋友,同事还是一组志愿者,无论是付费的还是免费的,取决于您负担得起的费用.

通常,您将在开发服务器上向用户显示包含新功能的页面或段落,因此更改不会影响您的主应用程序版本. 您应该强迫他们测试每个步骤并报告他们收到的结果. 如果您有一组步骤(有时称为脚本)来使测试结果更接近于要测试的内容,则将更加方便. 我们刚刚在上面的"您要测试什么"部分中提到了这一点. 例如,以下步骤适用于视觉用户:

  • 单击您的个人计算机屏幕上的问号按钮几次. 重新加载页面.
  • 使用个人计算机上的键盘多次选择并激活问号按钮.
  • 在触摸屏设备上多次触摸问号按钮.
  • 切换按钮将使信息对话框隐藏/显示. 该按钮有效吗?
  • 文字可读吗?
  • 信息对话框看起来是否更流畅?

在测试期间,建议执行以下操作(如果条件允许):

上述步骤的执行是为了确保浏览器的"纯净",即不会影响测试结果的任何内容.

注意 :如果有硬件条件,则应尝试在低端移动设备上运行应用程序-因为随着应用程序的增长,功能和效果越多越好.这些设备上的应用程序性能越高,您需要考虑的性能就越高. 此外,如果您的功能在低端设备上运行良好,那么在高端设备上的用户体验肯定会更好.

注意 :某些服务器端开发环境为给定的一组用户提供了更改设置机制,以确保该组用户可以测试新功能而不会影响其他服务器. 如Django Waffle Flags .

Tóm lại

阅读本文之后,您现在已经掌握了识别目标客户列表/目标浏览器并对该列表进行有效交叉测试的想法.

接下来,我们将注意力转向您的测试可能发现的实际代码问题,从HTML和CSS开始.

Trong loạt bài viết này