量角器 – 量角器风格指南

---

在本章中，让我们详细了解量角器的样式指南。

介绍

风格指南由两位软件工程师创建，分别是 ING 的前端工程师Carmen Popoviciu和谷歌的软件工程师Andres Dominguez。因此，这个风格指南也被称为 Carmen Popoviciu 和 Google 的量角器风格指南。

这个风格指南可以分为以下五个关键点 –

• 通用规则
• 项目结构
• 定位器策略
• 页面对象
• 测试套件

通用规则

以下是使用量角器进行测试时必须注意的一些通用规则 –

不要端到端测试已经过单元测试的内容

这是 Carmen 和 Andres 给出的第一个通用规则。他们建议我们一定不要对已经过单元测试的代码进行 e2e 测试。其背后的主要原因是单元测试比 e2e 测试快得多。另一个原因是我们必须避免重复测试（不要同时执行单元和 e2e 测试）以节省我们的时间。

只使用一个配置文件

另一个重要的建议是我们必须只使用一个配置文件。不要为您正在测试的每个环境创建配置文件。您可以使用grunt-protractor-coverage来设置不同的环境。

避免在测试中使用逻辑

我们必须避免在我们的测试用例中使用 IF 语句或 FOR 循环，因为如果我们这样做，那么测试可能会通过而不测试任何东西，或者它可能会运行得很慢。

使测试在文件级别独立

启用共享后，Protractor 可以并行运行测试。当这些文件可用时，它们会在不同的浏览器上执行。Carmen 和 Andres 建议至少在文件级别使测试独立，因为量角器运行它们的顺序是不确定的，而且单独运行测试很容易。

项目结构

Protractor 风格指南的另一个重要要点是项目的结构。以下是关于项目结构的建议 –

在合理的结构中摸索 e2e 测试

Carmen 和 Andres 建议我们必须将 e2e 测试分组到一个对您的项目结构有意义的结构中。此建议背后的原因是文件的查找将变得容易并且文件夹结构将更具可读性。此步骤还将 e2e 测试与单元测试分开。他们建议应避免以下类型的结构 –

|-- project-folder
   |-- app
      |-- css
      |-- img
      |-- partials
         home.html
         profile.html
         contacts.html
      |-- js
         |-- controllers
         |-- directives
         |-- services
         app.js
         ...
      index.html
   |-- test
      |-- unit
      |-- e2e
         home-page.js
         home-spec.js
         profile-page.js
         profile-spec.js
         contacts-page.js
         contacts-spec.js

另一方面，他们推荐了以下类型的结构 –

|-- project-folder
   |-- app
      |-- css
      |-- img
      |-- partials
         home.html
         profile.html
         contacts.html
      |-- js
         |-- controllers
         |-- directives
         |-- services
         app.js
         ...
      index.html
   |-- test
      |-- unit
      |-- e2e
         |-- page-objects
            home-page.js
            profile-page.js
            contacts-page.js
         home-spec.js
         profile-spec.js
         contacts-spec.js

定位器策略

以下是使用量角器进行测试时必须注意的一些定位器策略 –

从不使用 XPATH

这是量角器样式指南中推荐的第一个定位器策略。其背后的原因是 XPath 需要大量维护，因为标记很容易更改。此外，XPath 表达式是最慢的并且很难调试。

总是喜欢特定于量角器的定位器，例如 by.model 和 by.binding

特定于量角器的定位符，例如 by.model 和 by.binding，简短、具体且易于阅读。在他们的帮助下，编写我们的定位器也很容易。

例子

看法

<ul class = "red">
   <li>{{color.name}}</li>
   <li>{{color.shade}}</li>
   <li>{{color.code}}</li>
</ul>

<div class = "details">
   <div class = "personal">
      <input ng-model = "person.name">
   </div>
</div>

对于上述代码，建议避免以下情况 –

var nameElement = element.all(by.css('.red li')).get(0);
var personName = element(by.css('.details .personal input'));

另一方面，建议使用以下内容 –

var nameElement = element.all(by.css('.red li')).get(0);
var personName = element(by.css('.details .personal input'));

var nameElement = element(by.binding('color.name'));
var personName = element(by.model('person.name'));

当没有可用的量角器定位器时，建议首选 by.id 和 by.css。

始终避免使用文本定位器频繁更改文本

我们必须避免使用基于文本的定位器，例如 by.linkText、by.buttonText 和 by.cssContaningText，因为按钮、链接和标签的文本会随着时间的推移而频繁变化。

页面对象

如前所述，页面对象封装了有关我们应用程序页面上元素的信息，因此有助于我们编写更清晰的测试用例。页面对象的一个​​非常有用的优点是它们可以在多个测试中重用，如果我们的应用程序的模板发生了变化，我们只需要更新页面对象。以下是使用量角器进行测试时必须注意的页面对象的一些建议 –

要与被测页面交互，请使用页面对象

推荐使用页面对象与被测页面交互，因为它们可以封装被测页面上元素的信息，也可以重复使用。

始终为每个文件声明一页对象

我们应该在自己的文件中定义每个页面对象，因为这样可以保持代码干净并且查找内容变得容易。

在页面目标文件的末尾总是使用单个 module.exports

建议每个页面对象都声明一个类，这样我们只需要导出一个类。例如，应避免以下使用目标文件 –

var UserProfilePage = function() {};
var UserSettingsPage = function() {};
module.exports = UserPropertiesPage;
module.exports = UserSettingsPage;

但另一方面，建议使用以下方法 –

/** @constructor */
var UserPropertiesPage = function() {};

module.exports = UserPropertiesPage;

在顶部声明所有必需的模块

我们应该在页面对象的顶部声明所有必需的模块，因为它使模块依赖关系清晰且易于查找。

在测试套件开始时实例化所有页面对象

建议在测试套件开始时实例化所有页面对象，因为这会将依赖项与测试代码分开，并使依赖项可用于套件的所有规范。

不要在页面对象中使用 expect()

我们不应该在页面对象中使用 expect() ，即我们不应该在我们的页面对象中做任何断言，因为所有的断言都必须在测试用例中完成。

另一个原因是测试的读者应该能够通过阅读测试用例来理解应用程序的行为。