计算机视觉 响应_视觉响应式布局的自动化测试

计算机视觉 响应

Today it's all about testing. In 2015, many developers knows about TDD and I personally think that testing is one of the key for quality products. But what about testing in a Front-end environment? How do you guys write your tests for a responsive page or for a specific layout? How do you know if a layout breaks or not without browser checking?

今天，一切都与测试有关。 2015年，许多开发人员都对TDD有所了解，我个人认为测试是高质量产品的关键之一。 但是在前端环境中进行测试呢？ 你们如何为响应页面或特定布局编写测试？ 您如何知道在没有浏览器检查的情况下布局是否中断？

Nobody's knows. (At least a majority of front-end developers...)

没人知道。 (至少大多数前端开发人员...)

Today I found the answer and it's called Galen Framework. We can write a specification that describe the layout of a given page, and then the framework will run tests based on that specification, awesome isn't it? Let's see together how can we use it.

今天，我找到了答案，它被称为Galen Framework 。 我们可以编写一个描述给定页面布局的规范，然后框架将基于该规范运行测试，这不是吗？ 让我们一起看看如何使用它。

This article is a different view from the great article Visual Test-Driven Development For Responsive Interface Design written by the Galen Framework author, Ivan Shubin. I wanted to share my personal opinion about this framework and how it can be used today in a quick overview.

本文与Galen框架作者Ivan Shubin撰写的伟大文章“ 响应界面设计的可视化测试驱动开发”截然不同。 我想就此框架以及如何在今天快速使用它来分享我的个人看法。

关于Galen框架 (About Galen Framework)

I will not going deeper about how this framework works but Galen was designed in order to test responsiveness in mind.

我不会更深入地介绍该框架的工作原理，但Galen的设计目的是测试响应速度。

It's pretty easy to use it and the main idea is that Galen test objects location relatively between each others.

它很容易使用，其主要思想是Galen测试对象之间的相对位置。

When all tests are complete, Galen provide a clean report with failed and passed tests. The report file can be opened in a browser and Galen provide some screenshots when a test failed.

当所有测试完成后，Galen将提供一份包含失败和通过测试的干净报告。 可以在浏览器中打开报告文件，测试失败时Galen提供一些屏幕截图。

测试理念： (Testing Philosophy:)

I'm not an expert in TDD concept but I have a couple of notions. We should always write our tests before starting coding. A test is like the specification of the product or of a given functionality and that's why we will write our specification test before we write the code.

我不是TDD概念方面的专家，但是我有两个概念。 在开始编码之前，我们应该始终编写测试。 测试就像产品或给定功能的规范一样，这就是为什么我们在编写代码之前会先编写规范测试。

初始化： (Initialization:)

For the example, we will create a quick HTML sample that provides a box with an introduction text and two buttons designed in a mobile-first methodology in mind.

对于该示例，我们将创建一个快速HTML示例，该示例提供了一个框，其中包含一个介绍文字和两个按移动优先方法设计的按钮。

The scenario we'll design is just a quick way to see how Galen works in order to have an overall understanding of this product.

我们将设计的方案只是了解Galen工作原理的一种快速方法，以便对该产品有一个整体的了解。

We will test this sample in two environments: Mobiles & Tablets.

我们将在两个环境中测试此样本：手机和平板电脑。

Preview of the tested scenario.

预览已测试的场景。

1-文件夹结构 (1 - Folder Structure)

Here is the folder structure we need to have:

这是我们需要的文件夹结构：

automated-tests/
|
|--- page/
|      |--- css/
|            |--- normalize.css       /* 1 */
|            |--- main.css            /* 2 */
|      |--- example.html              /* 3 */
|--- galen/
|      |--- reports/                  /* 4 */
|      |--- specs/
|            |--- spec-example.spec   /* 5 */
|      |--- tests/
|            |--- test-example.test   /* 6 */

1. CSS reset, you can grab it from http://necolas.github.io/normalize.css/

   CSS重置，您可以从http://necolas.github.io/normalize.css/获取

2. CSS file used in example.html, empty at this stage.
   example.html中使用CSS文件，此阶段为空。
3. HTML page example. Our scenario and tested page, empty at this stage.
   HTML页面示例。 我们的场景和经过测试的页面，在此阶段为空。
4. Report directory. Galen will generate all the reports here.
   报告目录。 Galen将在此处生成所有报告。
5. Specification file, this is where we write our tests, empty at this stage.
   规范文件，这是我们编写测试的地方，在此阶段为空。
6. Test Suite file, this is where we write what we expect from Galen to test, empty at this stage.
   Test Suite文件，这是我们编写Galen期望的内容的地方，此阶段为空。

2-Galen安装 (2 - Galen Install)

In order to be able to run our tests we'll need Galen 1.6+ installed on our machine. Just follow the instructions on the Galen installation page.

为了能够运行我们的测试，我们需要在计算机上安装Galen 1.6+。 只需按照Galen安装页面上的说明进行操作即可。

测试设置： (Tests Setup:)

First step, we need to write a specification test file. Galen will follow these instructions during the tests.

第一步，我们需要编写一个规范测试文件。 在测试过程中，Galen将遵循这些说明。

So let's fill the spec-example.spec with this bunch of code:

因此，让我们用以下代码填充spec-example.spec ：

==================================================
login-box         css           .login-box
sign-up           css           .buttons .sign-up
sign-in           css           .buttons .sign-in
==================================================
@ mobile
-------------------
login-box
    width: 100 % of screen/width
sign-up
    above: sign-in
@ tablet
-------------------
login-box
    width: 500 px of screen/width
sign-up
    aligned horizontally all: sign-in

代码说明： (Code Explanations:)

The first 3 lines we have declared is the Object Definition, this is where we link our DOM elements to Galen. Then, we declare our test specification following the Galen documentation.

我们声明的前三行是对象定义，这是我们将DOM元素链接到Galen的地方。 然后，我们根据Galen文档声明我们的测试规范。

In a plain english, we have declared:

用简单的英语，我们宣布：

• I want the login box width 100% of the viewport in Mobile case.
  我希望在Mobile情况下登录框的宽度为视口的100％。
• I want the "Sign Up" button located above the "Sign In" button in Mobile case.
  我希望在移动设备保护套中，位于“登录”按钮上方的“注册”按钮。
• I want the login box width 500px of the viewport in Tablet case.
  我希望平板电脑情况下的视口的登录框宽度为500px。
• I want both "Sign Up" and "Sign In" buttons horizontally aligned in Tablet case.
  我希望Tablet外壳中的“注册”和“登录”按钮都水平对齐。

Galen also needs a Test Suite file for running the test we just write. It's like a config set-up before running test. We need to indicate where our working environment is hosted and what "Mobile" and "Tablet" means. This Test Suite file will be invoked from a terminal to run our tests.

Galen还需要一个Test Suite文件来运行我们刚刚编写的测试。 就像运行测试之前的配置设置一样。 我们需要指出托管我们工作环境的位置以及“移动”和“平板电脑”的含义。 该测试套件文件将从终端调用以运行我们的测试。

Here is the Test Suite we should write for the test-example.test file:

这是我们应该为test-example.test文件编写的测试套件：

@@ Set
    page_name       example.html
    page_url        http://localhost/automated-tests/page/${page_name}
    page_spec_url   ../specs/spec-example.spec
@@ Parameterized
    | viewport  | size      |
    | mobile    | 320x480   |
    | tablet    | 768x1024  |
${page_name} ${viewport} viewport ${full_name}
    ${page_url} ${size}
        check ${page_spec_url} --include "${viewport}"

代码说明 (Code Explanations)

• The Test Suite file can be created in a couple of different ways. You can find all the details on the Galen Test Suite Syntax page.

  可以通过两种不同的方式来创建Test Suite文件。 您可以在Galen Test Suite语法页面上找到所有详细信息。

• First lines are like variables, we define the page name we want to test and the absolute URL where the tested page is hosted. In my personal configuration I have hosted my current directory on a local server so you will need to update the page_url statement. We also provide the URL where the specification file we just created is located.
  第一行就像变量，我们定义了要测试的页面名称以及托管测试页面的绝对URL。 在我的个人配置中，我将当前目录托管在本地服务器上，因此您将需要更新page_url语句。 我们还提供了刚创建的规范文件所在的URL。
• Then we declare our viewports size which is relative to our specification file.
  然后，声明相对于规范文件的视口大小。
• Finally, the last 3 lines of code indicates Galen to run the test. (A loop for each declarated viewport will be invoked).
  最后，最后三行代码指示Galen运行测试。 (将为每个声明的视口调用一个循环)。

代码示例设置 (Code Example Setup)

Since we have our test specification and Galen installed, we will create a simple scenario based on the example we have in the #Initialization part.

由于我们已经安装了测试规范和Galen，因此我们将基于#Initialization部分中的示例创建一个简单的方案。

So let's create the example.html file with a couple of HTML:

因此，让我们用几个HTML创建example.html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <div class="login-box">
        <h1 class="title">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h1>
        <p class="desc">Modi recusandae similique dolor reprehenderit, vel! Recusandae ipsa dolore dignissimos aliquid deserunt exercitationem!</p>
        <div class="buttons">
            <a href="#" class="btn btn-success sign-up" title="Sign up">Sign up</a>
            <a href="#" class="btn btn-success sign-in" title="Sign in">Sign in</a>
        </div>
    </div>
</body>
</html>

...and then adding few CSS (main.css file):

...然后添加一些CSS( main.css文件 )：

/* Main CSS
---------------------------------------*/
html {
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
}
.login-box {
    padding:20px;
    margin-top:50px;
    background-color: #337AB7;
    border-radius: 6px;
}
.login-box .title,
.login-box .desc {
    margin-bottom:8px;
    color:#FFF;
    font-weight:normal;
}
.login-box .title {
    padding-bottom:8px;
    border-bottom:1px solid #92B3DD;
    font-size:20px;
}
.login-box .desc {
    font-size:12px;
}
.login-box .buttons {
    padding-top:10px;
    text-align: center;
}
.login-box .btn {
    display: inline-block;
    margin-bottom: 5px;
    padding: 6px 12px;
    font:normal 14px/1.4 Arial, Verdana, sans-serif;
    text-align: center;
    vertical-align: middle;
    border-radius: 4px;
    border:1px solid transparent;
    text-decoration: none;
}
.login-box .btn-success {
    color: #337AB7;
    background-color: #FFF;
    border-color:#337AB7;
}
/* Medium Breakpoint */
@media all and (min-width:480px){
    .login-box {
        margin:50px auto;
    }
    .login-box .title {
        font-size:24px;
    }
    .login-box .desc {
        font-size:14px;
    }
    .login-box .buttons {
        text-align: left;
    }
    .login-box .btn {
        display:inline-block;
    }
}

让我们运行测试： (Let's Run the Tests:)

Everything is ready so we should start our tests now. Open a terminal and move to /automated-tests/galen/tests directory using cd.

一切准备就绪，所以我们现在就应该开始测试。 打开终端，然后使用cd移至/ automated-tests / galen / tests目录。

Then, just hit the following command:

然后，只需点击以下命令：

galen test test-example.test --htmlreport ../reports

Galen will run the tests in Firefox using Selenium so you need to have Firefox Browser installed.

Galen将使用Selenium在Firefox中运行测试，因此您需要安装Firefox浏览器。

(n.b.: Galen can also execute these tests on different browser but Firefox is the default. This test has also been tested on a Mac, for windows users you may have a different setup).

(nb：Galen也可以在不同的浏览器上执行这些测试，但是Firefox是默认设置。该测试也已经在Mac上进行了测试，对于Windows用户，您可能具有不同的设置)。

When the test is complete, a report is created in the  reports directory. Just open the report.html file, and here is what you should have:

测试完成后，将在“报告”目录中创建一个报告。 只需打开report.html文件，这是您应该拥有的：

After reading the report, we can see that all tests are not passed. If you click on page links, you will open a more detailed version of each viewport test.

阅读报告后，我们可以看到所有测试均未通过。 如果单击页面链接，则将打开每个视口测试的更详细的版本。

Here is what you can see if you click on "example.html tablet viewport":

如果您点击“ example.html平板电脑视口”，就会看到以下内容：

What's wrong here? 2 tests failed: Galen says that our buttons are not above each others in mobile viewport and our "login-box" width isn't 500px in tablets viewport.

怎么了 2个测试失败：Galen表示在移动视口中我们的按钮没有位于彼此上方，并且在平板电脑视口中我们的“登录框”宽度不是500px。

Galen provides good explanations using Object Definition names in reports when a test failed or passed. You can also have a nice screenshot in a popup after clicking on the failed test. It will show you what's wrong at a glance.

当测试失败或通过时，Galen在报告中使用对象定义名称提供了很好的解释。 单击失败的测试后，您还可以在弹出窗口中获得漂亮的屏幕截图。 它将一目了然地向您显示出什么问题。

Now let's fix the last test by updating our main.css file:

现在，通过更新main.css文件来修复上一个测试：

.login-box .btn {
    /* display: inline-block; */
    display: block;
}
/* Medium Breakpoint */
@media all and (min-width:480px){
    .login-box {
        max-width: 500px;
        margin:50px auto;
    }
}

(We just updated our previous CSS with these new properties).

(我们刚刚使用这些新属性更新了以前CSS)。

As soon as our issues may be fixed, we have to run our test again to verify using the previous command:

解决问题后，我们必须再次运行测试以使用上一条命令进行验证：

galen test test-example.test --htmlreport ../reports

Galen will now run the same test as before but our CSS is now updated. A new created report will override the previous one.

Galen现在将运行与以前相同的测试，但是我们CSS现在已更新。 新创建的报告将覆盖前一个报告。

Now, all of our tests passed:

现在，我们所有的测试都通过了：

At this stage, only Firefox has been tested but Galen can be started in different browsers using Selenium. It can also be runned with BrowserStack which is a great news to run your tests on real devices.

在此阶段，仅对Firefox进行了测试，但可以使用Selenium在不同的浏览器中启动Galen。 它也可以用BrowserStack运行，这对于在真实设备上运行测试是个好消息。

结论： (Conclusion:)

Running automated tests in a Front-end environment should be a new habit and after trying Galen, I really enjoyed it. But be sure not to write too much detail on your specification file. It can be very handy at a first glance to write tests but it can very easily become a nightmare to maintain.

在前端环境中运行自动化测试应该是一种新习惯，尝试了Galen之后，我真的很喜欢它。 但是请确保不要在规范文件中写太多细节。 乍看之下编写测试可能非常方便，但是很容易成为维护的噩梦。

In my personal opinion, I would use it for the main lines of a project like the global layout of a given page or when a feature really needs a particular layout.

以我个人的观点，我会将其用于项目的主线，例如给定页面的全局布局或某个功能确实需要特定布局时。

I would recommend using Galen aside your daily tests, it's just another security before going in production. But don't forget to test by yourself.

我建议您在日常测试中使用Galen，但这只是生产前的另一项安全措施。 但是不要忘记自己进行测试。

This article was a really quick example on what you can achieve today using automated tests for visual responsive layouts. Coupled to an automation tasks runner like Grunt, you can build a test environment easier to maintain.

本文是一个非常简单的示例，说明了如何使用针对视觉响应式布局的自动化测试今天可以实现的目标。 与诸如Grunt之类的自动化任务运行程序耦合，您可以构建易于维护的测试环境。

For an advanced visual testing scenario using Grunt, I have hosted a directory called visual-responsive-testing on GitHub. All the source files are available and follow the main lines of this article.

对于使用Grunt的高级视觉测试场景，我在GitHub上托管了一个名为visual-active-testing的目录。 所有源文件均可用，并遵循本文的主要内容。

翻译自: https://davidwalsh.name/automated-tests-visual-responsive-layouts

计算机视觉 响应