NPM 包 protractor-cli 使用教程

Protractor-cli 是一个由 Google 推出的基于 Selenium WebDriver 的端到端测试框架,专为 AngularJS 应用量身定做。它有助于测试 AngularJS 应用的完整堆栈,包括前端页面、后端 API 和数据库等。

在本文中,我们将为您介绍如何使用 npm 包 protractor-cli 进行 AngularJS 应用的端到端测试。

开始使用 protractor-cli

安装 protractor-cli

在使用 protractor-cli 前,我们需要先安装它。您可以使用以下命令在命令行中执行安装:

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

配置 protractor.conf.js 文件

接下来,我们需要为 protractor-cli 配置一个配置文件。请创建一个名为 protractor.conf.js 的文件,并将以下内容复制到文件中:

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

在该文件中,我们指定了要使用的测试框架(这里我们使用 Mocha)、Selenium 的地址、要运行的测试规范以及要在哪种浏览器中运行测试。

创建测试规范文件

接下来,我们需要编写一个测试规范文件。请创建一个名为 app.spec.js 的文件,并将以下代码复制到该文件中:

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

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

在该文件中,我们使用了 Chai.js 断言库中的 expect 方法来检查页面的标题是否正确。

运行测试

现在,我们已经准备好运行我们的测试了。请使用以下命令运行测试:

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

如果一切顺利,您应该可以看到浏览器自动启动,在页面加载之后执行测试,并输出测试结果。

深入学习 protractor-cli 的内容

除了上述简单的示例之外,protractor-cli 还具有许多高级功能,可以帮助您在进行端到端测试时更加方便。在本节中,我们将为您介绍一些 protractor-cli 的高级功能,以帮助您更深入地学习 protractor-cli。

使用 Page Objects 模式

Page Objects 模式是一种在 protractor-cli 中构建可重用页面对象的设计模式。它允许您将页面上的元素和功能封装到一个对象中,以便在测试中进行使用。这有助于提高测试运行的可维护性和可重用性。

以下是如何使用 Page Objects 模式在 protractor-cli 中编写测试:

  1. 创建一个名为 page.js 的新文件,并将以下代码复制到该文件中:
----- ---- -
  ------------- -
    ---------- - ----------------------
  -
  
  ------------ -
    ------ --------------------------------------
  -
-

在该文件中,我们定义了一个名为 Page 的类,并在其中定义了几个包含在该页面中的元素。我们还定义了一个 navigateTo 方法,该方法将导航到我们要测试的页面。

  1. 现在,我们可以在 app.spec.js 文件中使用我们的页面对象。请将以下代码复制到该文件中:
----- ---- - ----------------
----- ------ - ------------
----- ---- - ------------------

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

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

在该文件中,我们首先通过 require('./page') 语句将 Page 对象导入到当前文件中。然后,我们创建一个名为 page 的新实例,该实例表示我们在测试中要使用的页面。最后,我们使用 page 对象验证了页面的标题。

使用 ngDriver

ngDriver 是一个 protractor-cli 插件,它可以直接与 AngularJS 的内部进行交互。当您使用 ngDriver 时,您可以在测试中访问应用程序的中间件并执行更高级的操作。

以下是如何使用 ngDriver 进行 protractor-cli 测试的例子:

  1. 在您的项目中安装 ngDriver:
--- ------- -- ---------
  1. 创建一个名为 app.ng.js 的新文件,并将以下代码复制到该文件中:
-------------------- ---- ----- ---------- -
  ---------- ---- - ------- ---------- -
    ---------------------------------------------
    ----------------------------------
    ---------------------------------------------- ------------------------------------------------------------
  ---
---

在该文件中,我们使用了 browser.ngDriver 对象执行了 waitForAngular 和 evaluateScript 操作。这些操作允许我们访问 AngularJS 的内部,并对其进行更高级的操作。

使用 protractor-flake

如果您的测试规范在运行时遇到了任何错误,则 protractor-cli 通常会立即停止。为了解决这个问题,您可以使用 protractor-flake,它是一个 protractor-cli 插件,可帮助您减少测试失败的噪声。

以下是如何在 protractor-cli 中使用 protractor-flake 的例子:

  1. 在您的项目中安装 protractor-flake:
--- ------- -- ----------------
  1. 在 protractor.conf.js 文件中注册 protractor-flake 插件:
-------------- - -
  ---------- --------
  ---------------- -------------------------------
  ------ -----------------
  ------------- -
    ------------ --------
  --

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

在该文件中,我们将 protractor-flake 插件注册为 protractor-cli 的一个插件,并设置 ignoreUncaughtExceptions 选项,以便在测试遇到任何意外的异常时忽略它们。

  1. 运行测试:
---------------- ------------------

如果您的测试规范在测试运行期间失败了,protractor-flake 将自动重试规范,直到测试成功。

总结

在本文中,我们讨论了如何使用 protractor-cli 进行 AngularJS 应用的端到端测试。我们还深入了解了 protractor-cli 的一些高级功能,包括 Page Objects 模式、ngDriver 和 protractor-flake。通过了解这些功能,您可以更好地了解 protractor-cli 并编写更高效的测试规范。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/600668f7d9381d61a3540f1f


猜你喜欢

  • npm 包 react-multiselect-checkboxes 使用教程

    介绍 react-multiselect-checkboxes 是一个基于 React 的多选框组件,主要应用于表单筛选等场景。它是一个 npm 包,通过 npm 安装后,可以快速构建一个带多选框的筛...

    3 年前
  • npm 包 wechat-remote-redux-devtools 使用教程

    概述 wechat-remote-redux-devtools 是一款可以让你在微信小程序中使用远程 Redux 开发工具的 npm 包。它可以让你方便地开发和调试你的小程序,使你的开发过程更加高效和...

    3 年前
  • npm 包 fofx 使用教程

    什么是 fofx fofx 是一个轻量级的前端框架,旨在提高开发效率。它是基于现代前端技术构建的,支持纯函数、异步函数和 Promise,辅以类型检查和模式匹配等功能,使编写可维护、可扩展和易于测试的...

    3 年前
  • npm 包 finest 使用教程

    在前端开发中,我们经常需要对数据进行处理和筛选,找到其中最优的结果。而 finest 这个 npm 包就可以帮助我们解决这个问题。本文将详细介绍 finest 包的使用方法,以及一些细节和注意事项。

    3 年前
  • npm 包 anti-captcha-romisiffied 使用教程

    在前端开发中,我们经常会遇到需要破解验证码的情况。这时候,我们可以使用一些工具帮助我们自动识别验证码,其中一个比较好用的工具是 anti-captcha-romisiffied,它是一个开源的 npm...

    3 年前
  • npm 包 react-native-checkbox-heaven 使用教程

    在 React Native 应用开发过程中,很多时候需要使用到多选框(checkbox)组件,但是 React Native 本身并没有提供这种组件。为了解决这个问题,我们可以使用适配 React ...

    3 年前
  • npm 包 use-field 使用教程

    在前端开发中,表单是一个不可避免的部分。这时候,我们通常需要使用一些表单相关的组件和库来加速开发。其中,use-field 是一个非常实用的 npm 包。它可以让你更加高效地处理表单,同时部分解决了传...

    3 年前
  • npm 包 inject-fullstory 使用教程

    什么是 inject-fullstory inject-fullstory 是一款用于集成 FullStory 的 JavaScript 库,该库可以使用 npm 包管理器进行安装和部署,使得使用 F...

    3 年前
  • npm 包 @tongdun/react-ui-exception 使用教程

    介绍 @tongdun/react-ui-exception 是一个基于 React 的错误信息展示组件,通过可定制化的 UI 和 API 提供了良好的用户体验和错误信息的收集与上报。

    3 年前
  • npm 包 @tongdun/react-ui-form 使用教程

    介绍 @tongdun/react-ui-form 是一个 React UI 组件库,提供了一些常用的 UI 组件,帮助开发者快速构建前端应用。 包含的组件有 Input、Checkbox、Radio...

    3 年前
  • npm 包 @tongdun/utils-url 使用教程

    在前端开发中,URL 的操作和处理是非常关键的一部分。@tongdun/utils-url 是一个专为 URL 处理而设计的 npm 包,它提供了一系列的工具函数,方便开发者对 URL 进行操作和处理...

    3 年前
  • npm 包 ngx-simple-webcam 使用教程

    ngx-simple-webcam 是一个方便易用的前端 JavaScript 库,它为 web 应用程序提供了 WebRTC 支持,使其能够在浏览器中访问摄像头和麦克风。

    3 年前
  • npm 包 @daniel.husar/focus-trap 使用教程

    在开发网页应用中,需要为一些元素设置聚焦限制,因为当用户通过 Tab 键或鼠标点击界面时,焦点可能会跑到意料之外的位置上。这时候,@daniel.husar/focus-trap 就能派上用场了。

    3 年前
  • npm 包 webnudge 使用教程

    在前端开发中,我们常常需要与用户进行交互来实现某些功能。其中,让用户做出选择并进行操作是非常常见的一种交互方式。而 webnudge 就是一个可以帮助我们在网页中添加微小的提示框或标签的 npm 包。

    3 年前
  • npm 包 @tongdun/utils-http 使用教程

    前言 @tongdun/utils-http 是一个由同盾科技公司开发的 npm 包,它提供了一些常用的 HTTP 操作方法,如 GET、POST、PUT、DELETE 等,以方便前端开发者在项目中进...

    3 年前
  • npm 包 @tongdun/utils-log4j 使用教程

    介绍 在前端开发中,日志管理是非常重要的一环。@tongdun/utils-log4j 是一个基于 log4j 实现的日志工具库,提供了灵活的日志输出和自定义配置。

    3 年前
  • npm 包 page-communication 使用教程

    前端开发人员经常需要在不同页面或不同应用程序之间共享信息或通信。在这种情况下,npm 包 page-communication 是非常有用的工具,它提供了一种简单的方法来进行页面间通信。

    3 年前
  • npm 包 google-pay 使用教程

    Google Pay 是一种流行的数字支付方式,它解决了在 Android 平台上的支付问题。而在 Web 端我们也可以使用 Google Pay 插件进行支付,这里我们将介绍如何使用 npm 包 g...

    3 年前
  • Npm 包 Callbag-HTML 使用教程

    介绍 Callbag-HTML 是一个 npm 包,它让使用 callbag 与 HTML 变得非常简单。callbag 是一种小巧、快速并且具有组合能力的数据流工具库,而 HTML 则是前端开发中最...

    3 年前
  • npm 包 ng2-signalr-971 使用教程

    介绍 ng2-signalr-971 是一个 Angular2 框架的信号R客户端库。该库使用了 signalR/SignalR 并且可以与服务器进行双向通信。ng2-signalr-971 是一个便...

    3 年前

相关推荐

    暂无文章