Protractor 测试教程：自动化工具框架

什么是量角器测试？

量角器 是一种自动化和端到端行为驱动的测试工具，在测试 AngularJS 应用程序，并作为解决方案集成商，结合了以下强大技术： Selenium、Jasmine、Web driver 等。Protractor Testing 的目的不仅是测试 AngularJS 应用程序，还可以为普通 Web 应用程序编写自动回归测试。

为什么我们需要 Protractor 框架？

Java几乎所有 Web 应用程序都使用脚本。随着应用程序的增长， JavaScript 规模和复杂性也会增加。在这种情况下，测试人员针对各种场景测试 Web 应用程序就变得非常困难。

有时使用以下方法很难捕获 AngularJS 应用程序中的 Web 元素 JUnit or Selenium WebDriver。

Protractor 是一个 NodeJS 程序，它用 Java脚本和Node一起运行以识别AngularJS应用程序中的Web元素，并且它还使用WebDriver通过用户操作来控制浏览器。

好的，现在让我们讨论一下什么是 AngularJS 应用程序？

AngularJS 应用程序是使用扩展 HTML 语法来表达 Web 应用程序组件的 Web 应用程序。它主要用于动态 Web 应用程序。与普通 Web 应用程序相比，这些应用程序使用的代码更少且更灵活。

为什么我们无法使用 Normal 找到 Angular JS Web 元素 Selenium 网络驱动程序？

Angular JS 应用程序有一些额外的 HTML 属性，如 ng-repeater、ng-controller、ng-model 等，这些属性未包含在 Selenium 定位器。 Selenium 无法使用以下方式识别这些网络元素 Selenium 代码。所以，量角器在 Selenium 可以在 Web 应用程序中处理和控制这些属性。

Protractor 是一个用于基于 Angular JS 应用程序的端到端测试框架。虽然大多数框架专注于对 Angular JS 应用程序进行单元测试，但 Protractor 专注于测试应用程序的实际功能。

在启动 Protractor 之前，我们需要安装以下内容：

Selenium你可以找到 Selenium 安装步骤见以下链接，（https://www.guru99.com/installing-selenium-webdriver.html )
NPM (Node.js)NodeJS 安装，我们需要安装 NodeJS 才能安装 Protractor。您可以在以下链接中找到此安装步骤。( https://www.guru99.com/download-install-node-js.html )

量角器安装

步骤1） 打开命令提示符并输入 “npm install –g 量角器” 然后按Enter.

上述命令将下载必要的文件并在客户端系统上安装 Protractor。

步骤2） 使用以下方法检查安装和版本 “量角器 – 版本设立的区域办事处外，我们在美国也开设了办事处，以便我们为当地客户提供更多的支持。“ 如果成功，它将显示如下图所示的版本。如果不成功，请再次执行步骤 1。

（步骤 3 和 4 是可选的，但为了更好的练习建议这样做）

步骤3） 更新 Web 驱动程序管理器。Web 驱动程序管理器用于在特定浏览器中针对 Angular Web 应用程序运行测试。安装 Protractor 后，需要将 Web 驱动程序管理器更新到最新版本。这可以通过在命令提示符中运行以下命令来完成。

webdriver-manager update

步骤4） 启动 Web 驱动程序管理器。此步骤将在后台运行 Web 驱动程序管理器，并监听通过 Protractor 运行的任何测试。

一旦使用 Protractor 运行任何测试，Web 驱动程序将自动在相关浏览器中加载并运行测试。要启动 Web 驱动程序管理器，需要从命令提示符执行以下命令。

webdriver-manager start

现在，如果你访问以下 URL (http://localhost:4444/wd/hub/static/resource/hub.html) 在您的浏览器中，您实际上会看到 Web 驱动程序管理器在后台运行。

使用 Protractor 进行 AngularJS 应用程序测试示例

Protractor 需要两个文件才能运行，规格文件和配置文件中。

配置文件：此文件帮助量角器找到测试文件的位置（specs.js）并与 Selenium 服务器（Selenium 地址）。Chrome 是 Protractor 的默认浏览器。

规格文件： 该文件包含与应用程序交互的逻辑和定位器.

步骤1） 我们必须登录 https://angularjs.org 并在“在此处输入名称”文本框中输入文本“GURU99”。

步骤2） 在此步骤中，

输入名称“Guru99”
在输出文本中看到“Hello Guru99”。

步骤3） 现在我们必须在输入名称后从网页中捕获文本，并需要与预期文本进行验证.

代码：

我们必须准备配置文件 （conf.js） 和 spec 文件 （spec.js） 正如刚才提到的。

spec.js 的逻辑：

describe('Enter GURU99 Name', function() {
 it('should add a Name as GURU99', function() {
 browser.get('https://angularjs.org');
 element(by.model('yourName')).sendKeys('GURU99');
  var guru= element(by.xpath('html/body/div[2]/div[1]/div[2]/div[2]/div/h1'));
expect(guru.getText()).toEqual('Hello GURU99!');
  });
});

spec.js代码解释：

描述('输入 GURU99 名称', function() 描述语法来自 Jasmine 框架。这里“describe”('输入 GURU99 名称')通常定义应用程序的组件，可以是类或函数等。在名为“输入 GURU99”的代码套件中，它只是一个字符串而不是代码。
it('应添加一个名称为 GURU99', function()
浏览器获取（'https://angularjs.org'）就像 Selenium Webdriver browser.get 将使用提到的 URL 打开一个新的浏览器实例。
element（通过.model（'你的名字'））。发送密钥('GURU99') 在这里我们使用模型名称“yourName”来查找 Web 元素，这是网页上“ng-model”的值。查看下面的屏幕截图 -

var guru= element(by.xpath('html/body/div[2]/div[1]/div[2]/div[2]/div/h1')) 在这里我们使用 XPath的并将其值存储在变量“guru”中.
期望（guru.getText（））。等于('Hello GURU99!')最后，我们验证从网页上获取的文本（使用 gettext() ）是否与预期文本一致。

conf.js的逻辑：

exports.config = {
  seleniumAddress: 'http://localhost:4444/wd/hub',
  specs: ['spec.js']
};

conf.js代码解释

seleniumAddress: 'http://localhost:4444/wd/hub'配置文件告诉 Protractor 的位置 Selenium 交谈地址 Selenium WebDriver。
specs: ['spec.js']这一行告诉 Protractor 测试文件 spec.js 的位置

守则的执行

首先，我们将更改目录路径或导航到系统中放置 confi.js 和 spec.js 的文件夹.

请按照以下步骤操作。

步骤1） 打开命令提示符。

步骤2） 确保 selenium web driver manager 已启动并正在运行。为此，请输入命令“webdriver-manager start”，然后按 Enter.

（如果 selenium web 驱动程序未启动并运行，我们就无法继续测试，因为 Protractor 无法找到 web 驱动程序来处理 web 应用程序）

步骤3） 打开一个新的命令提示符并输入命令 “量角器conf.js” 运行配置文件。

说明：

这里 Protractor 将执行包含给定规范文件的配置文件。
我们可以看到 selenium 服务器正在运行“http://localhost:4444/wd/hub”我们在conf.js文件中给出了这个信息。
另外，这里可以看到结果，有多少通过了，有多少失败了，如上面的截图所示.

好的，我们已经验证了结果是否通过或符合预期。现在让我们看看失败的结果。

步骤1） 打开并将 spec.js 中的预期结果更改为“'Hello change GURU99”，如下所示。

spec.js 中更改之后 :

describe('Enter GURU99 Name', function() {
 it('should add a Name as GURU99', function() {
 browser.get('https://angularjs.org');
 element(by.model('yourName')).sendKeys('GURU99');
  var guru= element(by.xpath('html/body/div[2]/div[1]/div[2]/div[2]/div/h1'));
expect(guru.getText()).toEqual('Hello change GURU99!');
  });
});

步骤2） 保存 spec.js 文件并重复上述“代码执行”部分的步骤

现在，执行上述步骤。

结果：

我们可以在屏幕截图中看到结果失败，标记为“F”，原因如下 “预期‘Hello GURU99!’等于‘Hello change GURU99!’。 此外，它还显示执行代码时遇到了多少次失败。

我们可以用 Selenium 网络驱动程序？

有时我们可以使用 XPath 或 CSS 选择器来识别 AngularJS 应用程序的 Web 元素 Selenium web 驱动程序。但在 AngularJS 应用程序中，元素将动态生成和更改。因此 Protractor 是与 AngularJS 应用程序配合使用的更好的做法。

使用 Jasmine Reporters 生成报告

Protractor 支持 Jasmine 报告器生成测试报告。在本节中，我们将使用 JunitXMLReporter 自动生成 XML 格式的测试执行报告。

按照以下步骤生成 XML 格式的报告。

Jasmine Reporter 的安装

有两种方法可以实现此目的：本地或全局

打开命令提示符执行以下命令进行本地安装

npm install --save-dev jasmine-reporters@^2.0.0

上述命令将在本地安装 jasmine 报告节点模块，即从我们在命令提示符中运行命令的目录中安装。

打开命令提示符执行以下命令进行全局安装

npm install –g jasmine-reporters@^2.0.0

在本教程中，我们将在本地安装 jasmine 报告器.

步骤1） 执行命令。

npm install --save-dev jasmine-reporters@^2.0.0

从下面的命令提示符中。

步骤2） 检查目录中的安装文件夹. 如果成功安装，则“Node_modules”应该可用，如下面的快照所示。

步骤3） 在现有的conf.js文件中添加以下彩色代码

exports.config = {
      seleniumAddress: 'http://localhost:4444/wd/hub',
      capabilities: {
          'browserName': 'firefox'
      },
      specs: ['spec.js'],
     framework: 'jasmine2' ,
      onPrepare: function() {
          var jasmineReporters = require('C:/Users/RE041943/Desktop/guru/node_modules/jasmine-reporters');
          jasmine.getEnv().addReporter(new jasmineReporters.JUnitXmlReporter(null, true, true)
          );
     }
   };

代码说明：

在代码中，我们正在生成报告“JUnitXML 报告器”并提供存储报告的路径。

步骤4） 打开命令提示符并执行命令 量角器conf.js。

步骤5） 当您执行上述代码时，将在所提及的路径中生成 junitresults.xml。

步骤6） 打开 XML 并验证结果。失败消息在结果文件中显示为我们的测试用例失败。测试用例失败，因为“spec.js”的预期结果与网页的实际结果不匹配

步骤7） 使用 junitresult.xml 文件作为证据或结果文件。

总结

虽然 Selenium 可以完成 Protractor 所做的一些事情，Protractor 是测试 AngularJS 应用程序的行业标准和最佳实践。Protractor 还可以管理其中的多种功能，并使用以下方式处理 Web 元素的动态变化 ng模型、ng-click..等等（这是selenium做不到的）。

你可能会喜欢：