【Angular】如何进行E2E测试

[deepthan]

angular E2E 框架 Protractor 简介

• 官网
• gihub
• API
• 内容目录

Protractor[prəˈtræktə(r)]是Angular和AngularJS应用程序的端到端测试框架,其对运行在真实浏览器中的应用进行测试，并像用户那样与之交互。

1. 特点

• 像用户一样测试
  Protractor基于WebDriverJS，使用原生事件和特定于浏览器的驱动程序来像用户一样与应用交互。

• 目标为angular应用
  Protractor支持angular特定的定位策略，它允许您测试特定angular的元素，而不需要您进行任何设置工作。

• 自动等待
  您不再需要在测试中添加等待和睡眠。Protractor会在网页完成挂起的任务后再自动执行测试的下一步，这样您就不必担心等待测试和网页同步了。

2. 使用步骤

2.1 angular cli 生成的项目中使用

angular cli生成的项目已自动集成protractor,可以直接使用。

2.2 自建项目使用

• 全局安装protractor

  npm install -g protractor

  这将安装protractor和webdriver-manager。

• 然后运行protractor --version，检查是否下载成功。

• 使用它下载需要的文件

• webdriver-manager update

  webdriver-manager是一个辅助工具，可以轻松地让Selenium服务器实例运行。

• 启动一个服务

  webdriver-manager start

  这将启动一个Selenium服务器并输出一组信息日志。您的 Protractor测试将向此服务器发送请求以控制本地浏览器。您可以通过http://localhost:4444/wd/hub查看服务器的状态信息。

额外说明

在早期版本的Angular（1.x）中，可以通过在Angular控制器上绑定和建模值来检查元素，如下所示：

// Find an element with a certain ng-model.
by.model('name')

// Find an element bound to the given variable.
by.binding('bindingname')

然而截至本文撰写时，这种方法在Angular 2及更高版本并不支持。目前，我们必须使用by.css()、by.tagName()。这并不方便，使得E2E测试与我们的HTML结构联系在一起，可能会导致在HTML更改时测试中断。