angular 测试_Angular应用的视觉回归测试

素颜马尾好姑娘i 2023-02-22 03:43 168阅读 0赞

angular 测试

I recently planned a major CSS refactoring project to transition a large e-commerce site from an antiquated 1024px design to a more modern, responsive design.

我最近计划了一个大型CSS重构项目，以将大型电子商务站点从过时的1024px设计过渡到更现代的响应式设计。

This situation is of course not unique. Responsive design has officially made it's way from UX blogs to the corner office - the web will henceforth be stretchy.

这种情况当然不是唯一的。 响应式设计已正式成为从UX博客到角落办公室的一种方式-网络将因此变得捉襟见肘。

## 响应式开发的风险 **(**Perils of responsive development**)** ##

As we enter this era of building for multi-device usability it's important to mitigate the common pitfalls of responsive development, which, among others, include:

随着我们进入构建多设备可用性的时代，减轻响应式开发的常见陷阱非常重要，其中包括：

*  **The responsive multiplier effect** If you are one who thought css was quirky before, then you may want to sit down for this: Retrofitting your site with new responsive breakpoints will multiply that mystery by 2, or 3 or more - especially if you are not able to use a battle-tested framework like Bootstrap or foundation etc...
    
    **响应乘数效应**如果您以前认为CSS很古怪，那么您可能需要坐下来：用新的响应断点改造您的网站会使该谜团增加2或3或更多-特别是如果您不能使用经过Bootstrap或Foundation等经过战斗验证的框架...
 *  **Sleeping dragons** Even if you have the luxury of starting your css project from scratch, when developing your css, mistakes often happen in breakpoints you can't see. For example, when tweaking a mobile view, the desktop view may get a regression - and because visual testing requires physically manipulating the size and and scroll position of the browser viewport, it's just not possible for a developer to catch everything.
    
    **沉睡的巨龙**即使您有足够的精力从头开始创建CSS项目，但在开发CSS时，错误通常会在您看不到的断点处发生。 例如，当调整移动视图时，桌面视图可能会回归-并且由于视觉测试需要物理地操纵浏览器视口的大小和滚动位置，因此开发人员无法捕获所有内容。
 *  **Death by a thousands bugs** If you are not automating visual regression testing, A big refactor job can easily overwhelm a QA group with an unnecessarily high count of CSS bugs in a single sprint.
    
    **数以千计的bug**导致的**死亡**如果您不执行视觉回归测试的自动化，那么大量重构工作很容易使QA组不堪重负，并且在一次冲刺中不必要地增加了CSS bug的数量。

## 响应快速发展 **(**Responding to responsive development**)** ##

The responsible thing to do given these exposures is to mitigate visual bugs through automated visual testing - that is in this case, to programmatically compare renderings of responsive content at different viewport sizes to ensure changes made at one screensize won't break a layout at another screen size. Automating this process is key - because your computer never gets tired of comparing the same design over and over. This is critical to reducing bugs going to your QA process, or worse, to production.

考虑到这些风险，要做的事情是通过自动的视觉测试来减轻视觉错误-在这种情况下，以编程方式比较不同视口大小的响应内容的渲染，以确保在一个屏幕尺寸下所做的更改不会破坏另一个屏幕上的布局屏幕尺寸。 自动化此过程非常关键-因为您的计算机永远不会厌倦一遍又一遍地比较相同的设计。 这对于减少进入质量检查流程或更糟糕的生产环境的错误至关重要。

This is where [BackstopJS][] comes in. BackstopJS is a straightforward, config-based tool which makes it easy for a developer to automate visual testing of multiple URLs at multiple screen sizes. Here's the basic idea:

这就是[BackstopJS的][BackstopJS]用武之地。BackstopJS是一个简单的，基于配置的工具，使开发人员可以轻松地以多种屏幕尺寸自动对多个URL进行视觉测试。 这是基本思想：

*  **First, take reference screenshots** Once you have a working CSS implementation, BackstopJS takes a set of *reference* screenshots. These screenshots will be saved for later comparisons.
    
    **首先，获取参考屏幕截图**一旦您具有有效CSS实施，BackstopJS就会获取一组*参考*屏幕截图。 这些屏幕截图将被保存以供以后比较。
 *  **Test your CSS after making changes:** Let's say in step 1 above, you had a perfect desktop view and you then started working on a mobile view. After working on your mobile view, you can run a test to ensure none of your changes on mobile have broken your desktop view.
    
    **进行更改后测试CSS：**假设在上面的步骤1中，您拥有一个完美的桌面视图，然后开始使用移动视图。 在使用移动设备视图之后，可以运行测试以确保在移动设备上所做的任何更改都不会破坏桌面视图。
 *  **Repeat** You can continue repeating the reference/test process to ensure you're always moving forward in all views.
    
    **重复**您可以继续重复参考/测试过程，以确保在所有视图中始终保持前进。

This approach becomes even more effective when making changes to existing projects where you want to ensure adding a new feature to existing designs won't disrupt other areas.

当您要更改现有项目时，如果要确保在现有设计中添加新功能不会干扰其他领域，这种方法将变得更加有效。

## 时间就是一切 **(**Timing is everything**)** ##

The original use-case for BackstopJS was testing multiple static web pages, so initially, it would render a screenshot just after a requested page was loaded. This worked great for big, primarily static server side apps, but what about single page applications and pages which use progressive enhancement? These are cases where we need to explicitly tell BackstopJS when the page is ready of it's "closeup".

BackstopJS的原始用例是测试多个静态网页，因此最初，它将在加载请求的页面后呈现屏幕截图。 这对于大型的，主要是静态服务器端应用程序非常有用，但是单页应用程序和使用渐进增强功能的页面又如何呢？ 在这些情况下，我们需要在页面准备好“特写”时明确告诉BackstopJS。

In it's latest release (0.4.0), BackstopJS addresses this conundrum with two new config options: `readyEvent` and `delay`. The `readyEvent` specifies a string (that is logged to the console by your app) to wait for before taking a screencapture. The `delay` parameter specifies a duration (in milliseconds) to wait for before taking a screencapture. They can also be used together, in which case BackstopJS first waits for the readyEvent *then* waits for the additional duration of the `delay` parameter to take the screenshot.

在最新版本(0.4.0)中， `readyEvent`通过两个新的配置选项解决了这个难题： `readyEvent`和`delay` 。 `readyEvent`指定一个字符串(由您的应用程序记录到控制台)在获取屏幕截图之前要等待。 `delay`参数指定在进行屏幕捕获之前要等待的持续时间(以毫秒为单位)。 它们也可以一起使用，在这种情况下，BackstopJS首先等待readyEvent， *然后*等待`delay`参数的其他持续时间以截取屏幕截图。

## 让我们来看看吧！ **(**Lets see it in action!**)** ##

###  ###

An obvious scenario where you would want to wait before taking a screenshot is when you're waiting for an ajax call to complete and send information to the view. But a more interesting (and possibly more tricky) scenario may be when waiting for an interstitial animation to complete. Lets take a look at that case...

在等待截屏之前需要等待的一个明显情况是，您正在等待ajax调用完成并向视图发送信息。 但是，更有趣的(可能更棘手的)情况可能是在等待插页式动画完成时。 让我们来看看这种情况...

*Please note: this exercise requires Node and NPM to be installed, [more info here][]*

*请注意：此练习需要安装Node和NPM， [更多信息请点击这里][more info here]*

I've prepared a simple AngularJS app for us to test. [Download the myAngularProject.zip file here][] and expand the project somewhere in your dev environment.

我准备了一个简单的AngularJS应用程序供我们测试。 [在此处下载myAngularProject.zip文件，][Download the myAngularProject.zip file here]然后在您的开发环境中的某个位置扩展该项目。

Lets look at the project directory:

![format_png][]

让我们看一下项目目录：

### 安装BackstopJS **(**Install BackstopJS**)** ###

This is the simple AngularJS project we will work on. Next step is to install BackstopJS. In your terminal, `cd` to your `./myAngularProject` location and run

这是我们将要进行的简单AngularJS项目。 下一步是安装BackstopJS。 在终端中， `cd`到您的`./myAngularProject`位置并运行

$ npm install backstopjs

The above command will create the folder structure `./node_modules/backstopjs` within `./myAngularProject` as in the figure below.

上面的命令将在`./myAngularProject`创建文件夹结构`./node_modules/backstopjs` ，如下图所示。

![format_png 1][]

There are three other dependencies for BackstopJS. *They are currently not included in the BackstopJS package.*

BackstopJS还有其他三个依赖项。 *它们当前不包含在BackstopJS包中。*

If you don't already have a current global Gulp instance...

如果您还没有当前的全局Gulp实例...

$ sudo npm install -g gulp

If you don't already have a current global PhantomJS install...

如果您还没有当前的全局PhantomJS安装...

$ sudo npm install -g phantomjs

If you don't already have a current global CasperJS install…

如果您还没有当前的全球CasperJS安装…

$ sudo npm install -g casperjs

### 查看我们的项目文件 **(**Review our project files**)** ###

Lets look at the page we will test. Open up `./simple.html`.

让我们看一下我们要测试的页面。 打开`./simple.html` 。

This is the file we will use for our test demonstration. It consists of a heading and two grey boxes of content. Simple enough...

这是我们将用于测试演示的文件。 它由标题和内容的两个灰色框组成。 很简单...

![format_png 2][]

Now lets look at the backstopjs config file. Open up `./backstop.json`

现在，让我们看一下backstopjs配置文件。 打开`./backstop.json`

This is the config file which BackstopJS looks for when running tests on your project. The first node: `viewports` takes a list of viewport objects consisting of a name and the dimensions of the viewport we are simulating - in this case we are setting three sizes. The second node: `scenarios` is a list of scenarios for the test where we specify the `testName`, `url`, DOM `selectors` we want to test and optional `readyEvent` and `delay` parameters.

这是在项目上运行测试时BackstopJS查找的配置文件。 第一个节点： `viewports`获取视口对象的列表，该对象由名称和我们要模拟的视口的尺寸组成-在这种情况下，我们将设置三个大小。 第二个节点： `scenarios`是测试的情境列表，其中我们指定要测试的`testName` ， `url` ，DOM `selectors`以及可选的`readyEvent`和`delay`参数。

Please take note: the URL parameter works like anchor tag `href` property. If you begin the file path string with `http://` you will pull a page at a specified internet domain. If you simply enter `test/simple.html` you will be making a relative file request which is relative to the `./node_modules/backstopjs/` directory, e.g., `../../simple.html` refers to the file at the root of `myAngularProject`.

请注意：URL参数的作用类似于锚标签`href`属性。 如果以`http://`开头文件路径字符串，则将在指定的Internet域上拉一个页面。 如果仅输入`test/simple.html`您将提出相对于`./node_modules/backstopjs/`目录的相对文件请求，例如`../../simple.html`引用`myAngularProject`根目录下的文件。

![format_png 3][]

So, with our project in place and BackstopJS loaded, Lets get to it.

因此，在我们的项目就位并加载BackstopJS之后，让我们开始吧。

### 第一次运行我们的测试 **(**Run our tests for the first time**)** ###

First, make sure you working directory is `./myAngularProject/node_modules/backstopjs`

首先，确保您的工作目录为`./myAngularProject/node_modules/backstopjs`

Next, Create reference files for the project...

接下来，为项目创建参考文件...

$ gulp reference

...and immediately run a test:

...并立即运行测试：

$ gulp test

When the test sequence ends BackstopJS should open up the results in Chrome. Since we didn't make any changes between our reference screens and our test screens everything should pass...

测试序列结束后，BackstopJS应该在Chrome中打开结果。 由于我们没有在参考屏幕和测试屏幕之间进行任何更改，因此所有内容都应通过...

![format_png 4][]

### 进行更改并再次测试 **(**Make changes and test again**)** ###

Now let's make a change. Open up `simple.html` again and uncomment lines 30 through 38. This will add a dazzling animation to our simple app.

现在让我们进行更改。 再次打开`simple.html`并取消注释第30至38行。这将为我们的简单应用程序添加令人眼花animation乱的动画。

![format_png 5][]

And you should see...

![aHR0cHM6Ly9kYXZpZHdhbHNoLm5hbWUvZGVtby9hbmd1bGFyLXJlZ3Jlc3Npb24taW1hZ2VzL3JlbG9hZEFuaW1Mb29wLmdpZg][]

你应该看到...

I know. Dazzling right?

我知道。 耀眼吧？

So lets test *this*. We should get a very different result...

因此，让我们测试*一下* 。 我们应该得到截然不同的结果...

$ gulp test

![format_png 6][]

So don't panic - this is completely expected. Those elements are missing because our screenshot was taken just as the page finished loading. But we need to wait a little bit until our animation is complete to take our screenshots.

所以不要惊慌-这是完全可以预期的。 这些元素丢失了，因为我们的截图是在页面加载完成时拍摄的。 但是，我们需要稍等片刻，直到完成动画以截取屏幕截图。

### 增强应用程序的交流技巧 **(**Enhance your app's communication skills**)** ###

So how long should we wait? With web development, in practice, most of the time we don't know. There usually are all kinds of asynchronous things going on in most web apps and it's really best if the app can determine when all dependent activity (e.g. ajax calls, animations, font loading etc.) is complete - then send a signal.

那我们要等多久？ 实际上，通过Web开发，大多数时候我们都不知道。 通常，大多数Web应用程序中会发生各种异步事件，如果应用程序可以确定何时完成所有依赖的活动(例如ajax调用，动画，字体加载等)，然后发送信号，则是最好的选择。

In our case it's already been done. Our Angular app is listening to the `animationEnd` event of the second content block and logging the text `backstop.ready` to the console.

在我们的情况下，它已经完成了。 我们的Angular应用程序正在监听第二个内容块的`animationEnd`事件，并将文本`backstop.ready`记录到控制台。

Let's take advantage of this and update our `backstop.json` config to let BackstopJS know when the app is *really* ready to be evaluated.

让我们利用这一点并更新我们的`backstop.json`配置，以使BackstopJS知道何时*真正*准备好对该应用程序进行评估。

Open up `./backstop.json` again and change the `readyEvent` parameter to `"backstop.ready"`

再次打开`./backstop.json`并将`readyEvent`参数更改为“ `readyEvent` `"backstop.ready"`

![format_png 7][]

Now let's try it again.

现在让我们再试一次。

First, *"bless"* our config change... (see note below on `gulp bless`\*)

首先， *“祝福”*我们的配置更改...(请参阅以下有关`gulp bless` \*的注释)

$ gulp bless

And second, re-run our new and improved test...

其次，重新运行我们经过改进的新测试...

$ gulp test

And Viola! (And by "Viola" I mean, the tests should have all passed.)

还有中提琴！ (我的意思是“中提琴”，所有测试都应该通过了。)

We could have used the delay property instead -- go ahead and set the readyEvent to null and change the delay value to 2000. See what happens.

我们本来可以使用delay属性-继续，将readyEvent设置为null并将delay值更改为2000。看看会发生什么。

In the end, you may prefer the event method or the delay method or both. it's up to you to decide which is the best method for you to use.

最后，您可能更喜欢事件方法或延迟方法，或两者兼而有之。 由您决定哪种方法最适合您。

### 总结一下 **(**Summing it up**)** ###

At this point, some of you may be thinking, *hey Garris, BackstopJS is a cool tool and all, but you didn't show how it finds responsive bugs*. The reason for that is there are already demos out there illustrating that subject. With this demo I wanted to highlight the special (and maybe non-obvious) considerations around visual testing for client-side apps (as opposed to server-side apps).

此时，您可能有些人在想， *嘿，加里斯，BackstopJS以及所有工具都很酷，但是您并未展示它如何找到响应性错误* 。 原因是那里已经有演示该主题的演示。 在此演示中，我想重点介绍针对客户端应用程序(与服务器端应用程序)进行视觉测试的特殊(也许不是显而易见的)注意事项。

This technique can be used in all kinds of SPAs, progressive enhancement scenarios and 3rd party widgets (e.g. Twitter, Facebook, stocks, weather, hero image sliders, etc.)

该技术可用于各种SPA，渐进增强方案和第三方小部件(例如Twitter，Facebook，股票，天气，英雄图像滑块等)。

As with most testing methods it really helps to have data stubs to make sure that you're comparing apples to apples every time. That said, for cases where that isn't possible, BackstopJS also accepts a blacklist of DOM selectors, so you can choose to ignore things like banners or other dynamic content - [more info in the documentation][].

与大多数测试方法一样，使用数据存根确实可以确保每次都比较一个苹果。 也就是说，在不可能的情况下，BackstopJS也接受DOM选择器黑名单，因此您可以选择忽略横幅或其他动态内容之类的东西- [文档中的更多信息][more info in the documentation] 。

BackstopJS is optimized for testing a large number of pages (or URL states if it's an SPA). As opposed to going for deep interactions BackstopJS is meant more as a sanity check you can actively use during CSS development.

BackstopJS已针对测试大量页面进行了优化(如果是SPA，则为URL状态)。 与进行深层交互相反，BackstopJS的含义更多是可以在CSS开发期间积极使用的健全性检查。

For more deeper visual app testing, (including intermediate states and micro interactions) I recommend trying PhantomCSS or writing your own CasperJS scripts. If you've followed this tutorial then you already have many of tools you need loaded on your machine.

为了进行更深入的视觉应用测试(包括中间状态和微交互)，我建议尝试PhantomCSS或编写自己的CasperJS脚本。 如果您已按照本教程进行操作，则您已经在计算机上加载了许多需要加载的工具。

I've found that once I got used to automating visual testing it's hard to start a new large project without it.

我发现一旦习惯了自动化视觉测试，没有它就很难启动一个新的大型项目。

I'd love to hear from you if you are using BackstopJS in your development group. Drop a line to let me know! [@garris][garris]

如果您在开发小组中使用BackstopJS，我很想听听您的意见。 下一行让我知道！ [@加里斯][garris]

--------------------

*\* In most cases you would want to re-run `gulp reference` when updating a config file. For this demo here we are overriding that behavior. We do this with `gulp bless` as shown above.*

*\*在大多数情况下，更新配置文件时，您需要重新运行`gulp reference` 。* *对于此演示，我们将覆盖该行为。* *如上所示，我们用大`gulp bless`做到这一点。*

> 翻译自: [https://davidwalsh.name/visual-regression-testing-angular-applications][https_davidwalsh.name_visual-regression-testing-angular-applications]

angular 测试

[BackstopJS]: http://backstopjs.org/
[more info here]: http://www.google.com/url?q=http%3A%2F%2Fnodejs.org%2Fdownload%2F&sa=D&sntz=1&usg=AFQjCNErftanxWbo4R_AZgS65LexggajWQ
[Download the myAngularProject.zip file here]: https://davidwalsh.name/demo/sample-myAngularProject.zip
[format_png]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly9kYXZpZHdhbHNoLm5hbWUvZGVtby9hbmd1bGFyLXJlZ3Jlc3Npb24taW1hZ2VzL2ltYWdlMDAucG5n?x-oss-process=image/format,png
[format_png 1]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly9kYXZpZHdhbHNoLm5hbWUvZGVtby9hbmd1bGFyLXJlZ3Jlc3Npb24taW1hZ2VzL2ltYWdlMDEucG5n?x-oss-process=image/format,png
[format_png 2]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly9kYXZpZHdhbHNoLm5hbWUvZGVtby9hbmd1bGFyLXJlZ3Jlc3Npb24taW1hZ2VzL2ltYWdlMDMucG5n?x-oss-process=image/format,png
[format_png 3]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly9kYXZpZHdhbHNoLm5hbWUvZGVtby9hbmd1bGFyLXJlZ3Jlc3Npb24taW1hZ2VzL2ltYWdlMDIucG5n?x-oss-process=image/format,png
[format_png 4]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly9kYXZpZHdhbHNoLm5hbWUvZGVtby9hbmd1bGFyLXJlZ3Jlc3Npb24taW1hZ2VzL2ltYWdlMDQucG5n?x-oss-process=image/format,png
[format_png 5]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly9kYXZpZHdhbHNoLm5hbWUvZGVtby9hbmd1bGFyLXJlZ3Jlc3Npb24taW1hZ2VzL2ltYWdlMDUucG5n?x-oss-process=image/format,png
[aHR0cHM6Ly9kYXZpZHdhbHNoLm5hbWUvZGVtby9hbmd1bGFyLXJlZ3Jlc3Npb24taW1hZ2VzL3JlbG9hZEFuaW1Mb29wLmdpZg]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly9kYXZpZHdhbHNoLm5hbWUvZGVtby9hbmd1bGFyLXJlZ3Jlc3Npb24taW1hZ2VzL3JlbG9hZEFuaW1Mb29wLmdpZg
[format_png 6]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly9kYXZpZHdhbHNoLm5hbWUvZGVtby9hbmd1bGFyLXJlZ3Jlc3Npb24taW1hZ2VzL2ltYWdlMDYucG5n?x-oss-process=image/format,png
[format_png 7]: http://imgconvert.csdnimg.cn/aHR0cHM6Ly9kYXZpZHdhbHNoLm5hbWUvZGVtby9hbmd1bGFyLXJlZ3Jlc3Npb24taW1hZ2VzL2ltYWdlMDcucG5n?x-oss-process=image/format,png
[more info in the documentation]: https://github.com/garris/BackstopJS
[garris]: https://twitter.com/garris
[https_davidwalsh.name_visual-regression-testing-angular-applications]: https://davidwalsh.name/visual-regression-testing-angular-applications