angular e2e测试之paotractor

一、 端到端集成测试技术特点及实施                                                                               

        功能特点: E2E测试是一种模拟用户行为的测试。使用e2e的JavaScript API代替我们在浏览器上做的手工操作，并且我们可以看到这个过程。

二、安装protractor

以下操作步骤是在linux操作系统中的实践结果。windows系统可能会有差异。

1. 环境配置 ： 安装最新版本angular脚手架angular/cli，命令如下：

npm install -g angular-cli@latest

2. 安装protractor插件：

npm install -g protractor

        安装后，node_modules\protractor\bin目录含有两个命令行工具protractor和webdriver-manager，其中webdriver-manager负责管理驱动、启停Selenium Server。

        查看protractor安装状态：

protractor

成功如图：

查看protractor安装版本：

protractor --version

 成功安装后版本显示如下：

3. 更新浏览器驱动： 

        在/usr/local/lib/node_modules/protractor/node_modules 路径下执行命令:

webdriver-manager update

4. 启动angualr本地服务

ng serve --host 本地IP --port 指定端口

5. 安装JDK:  

    点击参考博客安装JDK

6. Selenium Server配置：

webdriver-manager update
webdriver-manager start

 start后，浏览器会自动打开如下图：

点击上图中create session。创建一个chrome session。用于chrome的自动化测试。也可以根据兼容要求创建firefox等浏览器session。

start启动的是Selenium Server,默认是4444端口，下一步启动pretractor之前，最好在配置文件protractor.conf.js中修改baseurl。

7. 运行端到端测试：

protractor e2e/protractor.conf.js

 运行成功，自动打开的浏览器会执行显示用例操作步骤。

三、 过程问题解决

过程中遇到问题可以参考官网的操作步骤，可能需要翻墙：Protractor - end-to-end testing for AngularJS

四、 vscode插件

protractor snippets:Protractor框架的端到端(end-to-end)测试片段，支持JavaScript和Typescript。

参考资料：

[转]Angular 单元测试讲解_admans的专栏-CSDN博客_angular单元测试

Angular单元测试与E2E测试_weixin_33756418的博客-CSDN博客

https://marketplace.visualstudio.com/items?itemName=deerawan.vscode-protractor-snippets