跳到主要内容

前端测试介绍

对许多开发人员来说,测试前端代码仍然是一个令人困惑的做法。但是,随着前端开发变得越来越复杂,并且开发人员对前所未有的稳定性和一致性负责,前端测试必须被视为代码库中的平等公民。我们分解您的不同测试选项并解释它们最适合使用的情况。

前端测试是一个涵盖各种自动化测试策略的总称。其中一些,如单元和集成测试,多年来一直是后端开发社区公认的最佳实践。其他策略更新,源于现在使用的后端和前端开发的变化。

在本文结束时,您应该放心地评估哪种测试策略最适合您的团队和代码库。以下代码示例将使用Jasmine框架编写,但规则和过程在大多数测试框架中都是类似的。

01.单元测试

单元测试是测试老手之一,处于所有测试类型的最低级别。其目的是确保代码的最小位(称为单位)按预期独立运行。

想象一下,你有一个房子的乐高。在开始构建之前,您需要确保考虑每个单独的部分(五个红色正方形,三个黄色矩形)。单元测试确保在构建更大的功能之前,各组代码(如输入验证和计算等)按预期工作。

它有助于考虑单元测试与“做一件好事”的口头禅。如果您有一条单一责任的代码,您可能希望为它编写单元测试。

让我们看看下面的代码片段,其中我们正在编写一个简单计算器的单元测试:

describe(“计算器操作”,函数(){it(“应添加两个数字”,function(){Calculator.init(); var result = Calculator.addNumbers(7,3); expect(result).toBe(10 );}};});

在我们的计算器应用程序,我们希望确保计算始终以我们期望的方式独立运行。在示例中,我们希望确保始终可以准确地将两个数字相加。

我们要做的第一件事是描述我们将使用Jasmine运行的一系列测试描述。这将创建一个测试套件 - 一组与应用程序的特定区域相关的测试。对于我们的计算器,我们将每个计算测试分组到自己的套件中。

套件不仅适用于代码组织,而且因为它们可以让您自己运行套件。如果您正在为应用程序开发新功能,则不希望在活动开发期间运行每个测试,因为这将非常耗时。单独的测试套件可让您更快地开发。

接下来,我们编写实际测试。使用功能,我们编写我们正在测试的功能或功能。我们的示例测试了添加功能,因此我们将运行确认其正常工作的方案。

然后我们编写测试断言,这是我们测试代码是否按预期运行的地方。我们初始化我们的计算器,并运行我们的的addNumbers功能与我们希望添加的两个数字。我们将数字存储为结果,然后声明它等于我们期望的数字(在我们的例子中,10)。

如果的addNumbers未能返回正确的数字,我们的测试将失败。我们会为其他计算编写类似的测试 - 减法,乘法等。

02.验收测试

如果单元测试就像检查每个乐高积木一样,验收测试正在检查是否可以完成每个建筑阶段。仅因为所有部分都被考虑在内并不意味着指令可以正确执行,并且允许您构建最终模型。

验收测试通过您正在运行的应用程序进行,并确保指定的操作,用户输入和用户流程可以完成并正常运行。

只是因为我们的应用程序的addNumbers函数返回正确的数字,并不意味着计算器接口肯定会按预期运行,以给出正确的结果。如果我们的按钮被禁用,或者计算结果没有显示怎么办?验收测试帮助我们回答这些问题。

describe(“注册失败状态”,function(){it(“不允许注册无效信息”),function(){var page = visit(“/ home”); page.fill_in(“input [name = 'email']“,”不是电子邮件“); page.click(”button [type = submit]“); page.click(”button [type = submit]“); expect(page.find(”#signupError“ “)。hasClass(”hidden“))。toBeFalsy();});});

该结构看起来非常类似于我们的单元测试:我们定义了一个套件描述,然后写我们的测试函数,然后执行一些代码并检查其结果。

然而,在这里我们测试的是,当我们填写一些不良信息时,我们正在测试特定工作流程(注册流程)是否按预期运行。此处发生了更多分钟操作,例如可以进行单元测试的表单验证,以及显示我们的错误状态的任何处理,由具有ID的元素演示SignupError

验收测试是确保关键体验流始终正常工作的好方法。在边缘情况下添加测试也很容易,并帮助您的QA团队在您的应用程序中找到它们。

在考虑为什么编写验收测试时,您的用户故事是一个很好的起点。您的用户如何与您的网站互动,以及该互动的预期结果是什么?它与单元测试不同,单元测试可以更好地匹配功能需求,例如围绕验证字段的要求。

03.视觉回归测试

正如介绍中所提到的,某些类型的测试对于前端世界来说是独一无二的。第一个是视觉回归测试。这不会测试您的代码,而是将代码的渲染结果(您的界面)与生产,登台或预先更改的本地环境中的应用程序的呈现版本进行比较。

这通常通过比较无头浏览器(在服务器上运行的浏览器)中截取的屏幕截图来完成。然后,图像比较工具检测两次拍摄之间的任何差异。

使用PhantomCSS等工具,您的测试会指定测试运行器应导航到的位置,截取屏幕截图,框架会显示这些视图中出现的差异。

casper.start(“/ home”)。then(function(){//形式的初始状态phantomcss.screenshot(“#signUpForm”,“注册表单”); //点击注册按钮(应触发错误) casper.click(“button#signUp”); //获取UI组件的屏幕截图phantomcss.screenshot(“#signUpForm”,“注册表单错误”); //按名称属性填写表单并提交casper.fill (“#signUpForm”,{name:“Alicia Sedlock”,电子邮件:“alicia@example.com”},true); //获取成功状态phantomcss.screenshot的第二个屏幕截图(“#signUpForm”,“注册表单成功“);});

This visual regression framework illustrates decision trees in your application, exposing complexity to those outside of development

这个可视化回归框架说明了应用程序中的决策树,暴露了开发之外的复杂性

与验收和单元测试不同,如果您正在构建新的东西,那么视觉回归测试很难从中受益。由于您的UI将在整个活动开发过程中看到快速而剧烈的变化,因此您可能会在视觉上完成界面的各个部分时保存这些测试。因此,视觉回归测试是您应该编写的最后一个测试。

目前,许多视觉回归工具需要一些手动工作。您可能必须在分支上开始开发之前运行屏幕截图捕获,或者在更改界面时手动更新基线屏幕截图。

这仅仅是因为发展的本质 - 改变了UI可能是有意的,但测试只知道'是,这是相同的'或'不,这是不同的'。但是,如果视觉回归是您应用程序中的一个难点,那么与不断修复回归相比,这种方法可以为您的团队节省整体时间和精力。

04.可访问性和性能测试

随着围绕前端测试的文化和意识的增强,我们测试生态系统各个方面的能力也在增长。鉴于人们越来越关注无障碍在我们的技术文化中表现,将其整合到您的测试套件中有助于确保这些概念仍然是优先事项。

如果您遇到执行性能预算或可访问性标准的问题,这是将这些要求放在人们头脑中的一种方法。

这两项检查都可以使用Grunt和Gulp等构建工具集成到您的工作流程中,也可以在终端内半手动进行。对于性能预算,像grunt-perfbudget这样的工具使您能够在指定任务中自动通过WebPageTest运行站点。

但是,如果您没有使用任务运行器,您还可以将perfbudget作为独立的NPM模块获取并手动运行测试。

以下是通过终端运行它的样子:

perfbudget --url http://www.aliciability.com --key [WebPageTest API Key] --SpeedIndex 2000 --render 400同样,通过Grunt设置:perfbudget:{default:{options:{url:'http ://aliciability.com',key:'WebPageTest API Key',预算:{SpeedIndex:'2000',渲染:'400'}}}} [...] grunt.registerTask('default',['jshint ','perfbudget']);

可访问性测试也有相同的选项。所以对于Pa11y,你可以运行Pa11y在浏览器中输出命令以输出或设置任务以自动执行此步骤。在终端:

pa11y aliciability.com //作为NPM安装后的JavaScript命令var pa11y = require('pa11y'); //需要pa11y var test = pa11y(); //让pa11y准备好设置test.run('aliciability.com',函数(错误,结果){//记录我们解析你的结果});

这些类别中的大多数工具都是即插即用的,但您也可以选择自定义测试的运行方式 - 例如,您可以将它们设置为忽略某些WCAG标准。

Resemble.js is a popular image comparison library, and gives you a lot of control over what triggers a visual differentiation

Resemble.js是一个流行的图像比较库,可以让您对引发视觉差异的因素进行大量控制

下一页:如何将测试引入您的工作流程



翻译字数超限