AngularJS Protractor E2E 测试中的页面对象答案

【问题标题】：Page Objects in AngularJS Protractor E2E TestingAngularJS Protractor E2E 测试中的页面对象
【发布时间】：2013-12-30 08:42:03
【问题描述】：

在为 AngularJS 编写 Protractor E2E 测试时，处理页面对象模型的正确方法是什么？我觉得我应该将它们写在单独的文件中（如 homepage.js、page2.js 等），然后根据需要以某种方式将它们包含到模块等规范中。但是，我不知道如何注入它们。将不胜感激任何建议。谢谢！

【问题讨论】：

标签： javascript angularjs protractor angularjs-e2e

【解决方案1】：

你试过星盘吗？它是 Protractor 之上的 PageObject 实现，可以指导您的结构：https://github.com/stuplum/astrolabe

您可以看到推荐的结构是每个文件一个页面对象。

例如：singInPage.js

var Page = require('astrolabe').Page;

module.exports = Page.create({

   url: { value: 'http://<somesite>.com/signin' },

   username: { get: function() { return this.findElement(this.by.input('username')); } }, // finds an input element with the name 'username'
   submit:   { get: function() { return this.findElement(this.by.id('submit')); } }       // finds an element with the id 'submit'
});

它使测试用例甚至页面对象的编写非常紧凑和可读。

【讨论】：

【解决方案2】：

恐怕在使用页面对象进行测试时没有通用标准。您可以在 protractor 的问题中找到几个建议：https://github.com/angular/protractor/issues/401 和 https://github.com/angular/protractor/issues/78

出于我的需要，我在我的开源项目中创建了非常简单的页面对象，请参阅：https://github.com/9ci/angle-grinder/pull/124

您还可以在 https://github.com/juliemr/ng-page-e2e/tree/master/test 中找到非常有趣的实现

【讨论】：

【解决方案3】：

将它们保存在单独的文件中，并使用 Node 的 require 来拉入您需要的任何帮助程序或页面对象。看看这个超级简单的例子：https://github.com/juliemr/ng-page-e2e/blob/master/test/angularsite_test.js#L2

【讨论】：

【解决方案4】：

您应该将它们保存在单独的文件中，是的。

在你的量角器referenceConf.js（用于启动量角器的配置）中你应该写：

specs: ['<your_path>/test/pages/*Test.js']

在这种情况下*Test.js (loginPageTest.js, homePageTest.js)

【讨论】：

不幸的是，我还不知道如何在不更改配置中的“规格”的情况下在单个文件中启动测试。另外，如果您想在 IDE 中调试测试，这篇文章可能会有所帮助：How to debug protractor's tests in Webstorm
昨晚我在尝试实现这一点时发现，您不能在这样的规范中包含页面对象。每个文件都独立于其他文件运行。我最终围绕节点的需求构建了一个系统。
@wlingke 我这里有一个类似的问题。你能告诉我你做了什么来解决这个问题吗？
@shimu 我最终设置它的方式是使用 require()。 Jmr 发布的示例很棒。我还遇到了您可以使用的这个项目github.com/stuplum/astrolabe。不过，我最终创建了自己的模型——这并不难。