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 包 @blinkmobile/bm-uploader 使用教程

    介绍 npm 是世界上最大的软件包管理系统之一,而 @blinkmobile/bm-uploader 是 npm 上一个实现简单易用的前端上传组件。它可以帮助开发者在前端轻松地实现文件上传功能,也提供...

    3 年前
  • npm包:@blinkmobile/camera 使用教程

    前言 在前端开发中,我们有时需要使用摄像头进行相关操作,比如拍照等。而在JavaScript中,我们可以使用npm包@blinkmobile/camera来实现这些操作。

    3 年前
  • npm 包 node-ledger-client 使用教程

    介绍 node-ledger-client 是一个用于连接 Hyperledger Fabric 的 Node.js 客户端。它支持用户与 Fabric 网络上的链码进行交互,包括查询和执行事务。

    3 年前
  • npm 包 @blinkmobile/canvas-manipulation 使用教程

    介绍 在现代 Web 应用中,Canvas API 是用来绘制和操作图形的一种强大的 HTML5 标准。许多前端开发者使用 Canvas API 来存储和操作图像。

    3 年前
  • npm 包 @jewella/hsl-to-hex 使用教程

    简介 在 Web 开发中,有时我们需要将 HSL(Hue, Saturation, Lightness)颜色格式转换为 HEX(Hexadecimal)格式。npm 上有许多现成的包可以实现这一功能,...

    3 年前
  • npm 包 antfin-sofa-node-antvip 使用教程

    在前端的开发过程中,我们经常需要使用 npm 包来提高我们的开发效率和代码质量。在这篇文章中,我们将会详细介绍 antfin-sofa-node-antvip 这个 npm 包的使用教程,帮助大家更好...

    3 年前
  • npm 包 mysql-mongodb-migrate 使用教程

    随着互联网技术的不断发展,前后端分离架构已成为主流。其中,前端负责 UI 界面、交互逻辑等,后端主要负责数据存储、业务逻辑等。数据存储是许多后端开发者必备的技能,而 mysql-mongodb-mig...

    3 年前
  • npm包 escape-unicode 使用教程

    前置知识 在学习本文之前,需要具备以下知识: Node.js 和 npm 的使用 基本的 JavaScript 知识 背景介绍 在前端开发中,我们经常需要处理 Unicode 字符串。

    3 年前
  • npm 包 nrpl 使用教程

    简介 nrpl 是一个基于 Node.js 实现的简单的日志处理工具,可以将日志输出到标准输出流或者文件流中,同时支持自定义日志级别和输出格式等功能。 其中,nrpl 对于前端开发者来说,是一个非常实...

    3 年前
  • NPM 包 create-accessor 使用教程

    在前端开发中,经常需要对于对象的属性进行读写。直接对属性进行访问虽然方便,但不具备数据合法性检查和副作用控制。而手写 getter 和 setter 又很容易造成代码重复和操作过于繁琐。

    3 年前
  • npm 包 like-to-regexp 使用教程

    在前端开发中,匹配字符串非常重要。而使用正则表达式是一种高效且强大的方式。然而,正则表达式看起来很复杂,学习曲线陡峭,因此,许多开发者在编写正则表达式时遇到了困难。

    3 年前
  • npm 包 @gfi-centre-ouest/docker-compose-spec-typescript 使用教程

    前言 随着时代的发展,前端技术也在不断地发展和进步。其中,npm 包作为前端技术开发的重要组成部分,具有非常重要的作用。而在众多的 npm 包中,@gfi-centre-ouest/docker-co...

    3 年前
  • npm 包 @up24/guid 使用教程

    简介 npm 是 Node.js 的包管理工具,可以通过 npm 快速查找并安装第三方包。@up24/guid 是一个可以生成唯一标识符的 npm 包。在前端开发中,唯一标识符经常被用于指定 DOM ...

    3 年前
  • npm 包 consent-swarm 使用教程

    简介 consent-swarm 是一款基于 P2P 网络的用户数据共享工具。它可以在不泄露用户信息的情况下实现跨平台、跨应用的数据共享和交换,并为用户提供更加个性化的服务。

    3 年前
  • npm 包 angular-whenscrolled 使用教程

    前言 在前端开发中,无限滚动是经常遇到的需求。为了更加高效和方便地实现无限滚动,我们可以使用一些现成的工具包。本文介绍了一个常用的 npm 包:angular-whenscrolled。

    3 年前
  • NPM 包 Gatsby-plugin-freshchat 使用教程

    在 Web 开发中,与用户之间的交互非常重要。而 Freshchat 是一款无缝集成于网站或应用程序的实时聊天软件,为用户提供即时支持。Gatsby-plugin-freshchat 是一个 Gats...

    3 年前
  • npm 包 ember-is-visible 使用教程

    1. 什么是 ember-is-visible? ember-is-visible 是一个轻量级的 Ember.js 库,用于检测 HTML 元素是否在用户的浏览器视窗内可见。

    3 年前
  • npm 包 empty-standby-list 使用教程

    当我们的电脑长时间运行时,可能会出现内存占用过高的情况。这时候,如果我们不愿意重启电脑,就需要使用 empty-standby-list 这个 npm 工具包来清空系统内存。

    3 年前
  • npm 包 jsttd-uniq 使用教程

    前言 在前端开发中,我们常常需要去重数组或者对象数组,以便后续的业务操作。JavaScript 中提供了 Set 数据结构,可以方便地对基本类型数组去重,但对于对象数组需要进行一些处理才能去重。

    3 年前
  • npm 包 class-loop 使用教程

    在前端开发中,经常需要在 DOM 元素上应用某种样式或操作。如果 DOM 元素较多,手动为每一个元素添加样式或操作会变得非常麻烦和繁琐。为了简化这个过程,我们可以使用 npm 包 class-loop...

    3 年前

相关推荐

    暂无文章