Protractor-cli 是一个由 Google 推出的基于 Selenium WebDriver 的端到端测试框架，专为 AngularJS 应用量身定做。它有助于测试 AngularJS 应用的完整堆栈，包括前端页面、后端 API 和数据库等。
在本文中，我们将为您介绍如何使用 npm 包 protractor-cli 进行 AngularJS 应用的端到端测试。
开始使用 protractor-cli
安装 protractor-cli
在使用 protractor-cli 前，我们需要先安装它。您可以使用以下命令在命令行中执行安装：
npm install -g protractor-cli
配置 protractor.conf.js 文件
接下来，我们需要为 protractor-cli 配置一个配置文件。请创建一个名为 protractor.conf.js 的文件，并将以下内容复制到文件中：
exports.config = {
framework: 'mocha',
seleniumAddress: 'http://localhost:4444/wd/hub',
specs: ['**/*.spec.js'],
capabilities: {
browserName: 'chrome'
}
};在该文件中，我们指定了要使用的测试框架（这里我们使用 Mocha）、Selenium 的地址、要运行的测试规范以及要在哪种浏览器中运行测试。
创建测试规范文件
接下来，我们需要编写一个测试规范文件。请创建一个名为 app.spec.js 的文件，并将以下代码复制到该文件中：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------ - ------------
-------------------- ---- ----- ---------- -
---------- ---- - ------- ---------- -
--------------------------------------
--------------------------------------------------------- - ----------- ---------- --- ------------
---
---在该文件中，我们使用了 Chai.js 断言库中的 expect 方法来检查页面的标题是否正确。
运行测试
现在，我们已经准备好运行我们的测试了。请使用以下命令运行测试：
protractor protractor.conf.js
如果一切顺利，您应该可以看到浏览器自动启动，在页面加载之后执行测试，并输出测试结果。
深入学习 protractor-cli 的内容
除了上述简单的示例之外，protractor-cli 还具有许多高级功能，可以帮助您在进行端到端测试时更加方便。在本节中，我们将为您介绍一些 protractor-cli 的高级功能，以帮助您更深入地学习 protractor-cli。
使用 Page Objects 模式
Page Objects 模式是一种在 protractor-cli 中构建可重用页面对象的设计模式。它允许您将页面上的元素和功能封装到一个对象中，以便在测试中进行使用。这有助于提高测试运行的可维护性和可重用性。
以下是如何使用 Page Objects 模式在 protractor-cli 中编写测试：
- 创建一个名为 page.js 的新文件，并将以下代码复制到该文件中：
-- -------------------- ---- -------
----- ---- -
------------- -
---------- - ----------------------
-
------------ -
------ --------------------------------------
-
-在该文件中，我们定义了一个名为 Page 的类，并在其中定义了几个包含在该页面中的元素。我们还定义了一个 navigateTo 方法，该方法将导航到我们要测试的页面。
- 现在，我们可以在 app.spec.js 文件中使用我们的页面对象。请将以下代码复制到该文件中：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------ - ------------
----- ---- - ------------------
-------------------- ---- ----- ---------- -
----- ---- - --- -------
---------- ---- - ------- ---------- -
------------------
----------------------------------------------------------- - ----------- ---------- --- ------------
---
---在该文件中，我们首先通过 require('./page') 语句将 Page 对象导入到当前文件中。然后，我们创建一个名为 page 的新实例，该实例表示我们在测试中要使用的页面。最后，我们使用 page 对象验证了页面的标题。
使用 ngDriver
ngDriver 是一个 protractor-cli 插件，它可以直接与 AngularJS 的内部进行交互。当您使用 ngDriver 时，您可以在测试中访问应用程序的中间件并执行更高级的操作。
以下是如何使用 ngDriver 进行 protractor-cli 测试的例子：
- 在您的项目中安装 ngDriver：
npm install -g ng-driver
- 创建一个名为 app.ng.js 的新文件，并将以下代码复制到该文件中：
describe('Protractor Demo App', function() {
it('should have a title', function() {
browser.driver.get('https://angularjs.org/');
browser.ngDriver.waitForAngular();
expect(browser.ngDriver.evaluateScript("return window.angular.version.full")).to.eventually.equal('1.7.9');
});
});在该文件中，我们使用了 browser.ngDriver 对象执行了 waitForAngular 和 evaluateScript 操作。这些操作允许我们访问 AngularJS 的内部，并对其进行更高级的操作。
使用 protractor-flake
如果您的测试规范在运行时遇到了任何错误，则 protractor-cli 通常会立即停止。为了解决这个问题，您可以使用 protractor-flake，它是一个 protractor-cli 插件，可帮助您减少测试失败的噪声。
以下是如何在 protractor-cli 中使用 protractor-flake 的例子：
- 在您的项目中安装 protractor-flake：
npm install -g protractor-flake
- 在 protractor.conf.js 文件中注册 protractor-flake 插件：
-- -------------------- ---- -------
-------------- - -
---------- --------
---------------- -------------------------------
------ -----------------
------------- -
------------ --------
--
-------- --
-------- -------------------
------------------------- ----
--
--在该文件中，我们将 protractor-flake 插件注册为 protractor-cli 的一个插件，并设置 ignoreUncaughtExceptions 选项，以便在测试遇到任何意外的异常时忽略它们。
- 运行测试：
protractor-flake protractor.conf.js
如果您的测试规范在测试运行期间失败了，protractor-flake 将自动重试规范，直到测试成功。
总结
在本文中，我们讨论了如何使用 protractor-cli 进行 AngularJS 应用的端到端测试。我们还深入了解了 protractor-cli 的一些高级功能，包括 Page Objects 模式、ngDriver 和 protractor-flake。通过了解这些功能，您可以更好地了解 protractor-cli 并编写更高效的测试规范。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668f7d9381d61a3540f1f