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

为什么我们需要 Protractor 框架？

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

有时使用JUnit或Selenium WebDriver 难以捕获 AngularJS 应用程序中的 Web 元素。

Protractor 是一个基于 JavaScript 的 NodeJS 程序，它通过 Node 运行，用于识别 AngularJS 应用程序中的 Web 元素，同时它也使用 WebDriver 通过用户操作来控制浏览器。

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

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

为什么我们无法使用普通的 Selenium WebDriver 找到 AngularJS Web 元素？

AngularJS 应用程序有一些额外的 HTML 属性，如 ng-repeater、ng-controller、ng-model 等，这些属性不包含在 Selenium 定位器中。Selenium 无法使用 Selenium 代码识别这些 Web 元素。因此，作为 Selenium 之上的 Protractor 可以处理和控制 Web 应用程序中的这些属性。

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

在开始 Protractor 之前，我们需要安装以下软件

1. Selenium您可以在以下链接中找到 Selenium 安装步骤（https://guru99.com.cn/installing-selenium-webdriver.html ）
2. NPM (Node.js)NodeJS 安装，我们需要安装 NodeJS 来安装 Protractor。您可以在以下链接中找到安装步骤。（ https://guru99.com.cn/download-install-node-js.html ）

Protractor 安装

步骤 1）打开命令提示符，输入“npm install –g protractor”，然后按 Enter 键。

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

步骤 2）使用“Protractor –version”检查安装和版本。如果成功，它将显示版本，如下图所示。如果不成功，请再次执行步骤 1。

（步骤 3 和 4 是可选的，但建议这样做以提高实践水平）

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

webdriver-manager update

步骤 4）启动 WebDriver 管理器。此步骤将在后台运行 WebDriver 管理器，并侦听通过 protractor 运行的任何测试。

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

webdriver-manager start

现在，如果您在浏览器中访问以下 URL（https://:4444/wd/hub/static/resource/hub.html），您将实际看到 WebDriver 管理器在后台运行。

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

Protractor 需要两个文件才能运行：一个spec文件和一个configuration文件。

1. 配置文件：此文件帮助 Protractor 知道测试文件（specs.js）的位置，并与 Selenium 服务器（Selenium Address）进行通信。Chrome 是 Protractor 的默认浏览器。

2. Spec 文件：此文件包含与应用程序交互的逻辑和定位器。

步骤 1）我们必须登录 https://angularjs.org 并在“Enter a name here”文本框中输入文本“GURU99”。

步骤 2) 在此步骤中，

1. 输入的名称为“Guru99”
2. 输出文本为“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 的代码解释

1. describe(‘Enter GURU99 Name’, function() Jasmine 框架的 describe 语法。这里，“describe”（‘Enter GURU99 Name’）通常定义应用程序的组件，它可以是类或函数等。在代码套件中，它只是一个字符串而不是代码。
2. it(‘should add a Name as GURU99’, function()
3. browser.get(‘https://angularjs.org’) 类似于 Selenium WebDriver 中的 browser.get，它将打开一个带有指定 URL 的新浏览器实例。
4. element(by.model(‘yourName’)).sendKeys(‘GURU99’) 在这里，我们使用模型名称“yourName”来查找 Web 元素，这是网页上“ng-model”的值。请查看下图-

5. var guru= element(by.xpath(‘html/body/div[2]/div[1]/div[2]/div[2]/div/h1’)) 在这里，我们使用XPath 查找 Web 元素，并将其值存储在名为“guru”的变量中。
6. expect(guru.getText()).toEqual(‘Hello GURU99!’) 最后，我们使用 getText() 从网页获取文本，并将其与预期文本进行验证。

conf.js 的逻辑

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

conf.js 的代码解释

1. seleniumAddress: ‘https://:4444/wd/hub’ 配置文件告诉 Protractor Selenium Address 的位置，以便与 Selenium WebDriver 通信。
2. specs: [‘spec.js’]此行告诉 Protractor 测试文件 spec.js 的位置。

代码执行

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

请遵循以下步骤。

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

步骤 2）确保 Selenium WebDriver 管理器已启动并正在运行。为此，请输入命令“webdriver-manager start”并按 Enter 键。

（如果 Selenium WebDriver 未启动并运行，我们就无法继续测试，因为 Protractor 找不到用于处理 Web 应用程序的 WebDriver）

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

解释

• 在这里，Protractor 将执行配置文件中指定的 spec 文件。
• 我们可以在 conf.js 文件中看到的“https://:4444/wd/hub”处看到 Selenium 服务器正在运行。
• 此外，在这里可以看到结果，例如上面的屏幕截图，有多少通过和失败。

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

步骤 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”表示失败，原因为“Expected ‘Hello GURU99!’ to equal ‘Hello change GURU99!’”。它还显示了执行代码时遇到的失败次数。

我们能用 Selenium WebDriver 实现同样的目标吗？

有时我们可以使用 Selenium WebDriver 的 XPath 或 CSS 选择器来识别 AngularJS 应用程序的 Web 元素。但是，在 AngularJS 应用程序中，元素是由用户动态生成和更改的。因此，Protractor 是处理 AngularJS 应用程序的最佳实践。

使用 Jasmine Reporters 生成报告

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

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

安装 Jasmine Reporter

您可以通过两种方式进行：本地安装或全局安装。

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

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

上述命令将本地安装 jasmine reports node-modules，即从我们在命令提示符中运行命令的目录进行安装。

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

npm install –g jasmine-reporters@^2.0.0

在本教程中，我们将本地安装 jasmine reporters。

步骤 1）执行命令。

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

从命令提示符中，如下所示。

步骤 2）检查目录中的安装文件夹。如果成功安装，应该会出现“Node_modules”，如下图所示。

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

exports.config = {
      seleniumAddress: 'https://: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)
          );
     }
   };

代码解释

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

步骤 4）打开命令提示符，执行命令protractor conf.js。

步骤 5）执行上述代码后，将在指定的路径生成 junitresults.xml。

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

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

摘要

虽然 Selenium 可以做一些 Protractor 能做的事情，但 Protractor 是测试 AngularJS 应用程序的行业标准和最佳实践。Protractor 还可以管理其中的多个功能，并通过 ng-model、ng-click 等来处理 Web 元素的动态变化（Selenium 做不到）。