如何用ABP框架快速完成项目 - 自动化测试 - 前端angular e2e protractor
要想快速完成一个项目, 自动化是很关键很有用的一块.
- 自动化测试比人工测试快很多. 特别是在回归测试中.
- 实践证明, 虽然投入了时间在写自动化测试代码上, 但是在回归测试中节省了大量的时间,同时及时发现bug挽救回来时间收益大大超过了早期写自动化测试代码的投入.
- 特别是要测试浏览器兼容性的时候,只写一遍自动化测试代码,就能自动的快速的在所有浏览器跑完测试。
- 我们这系列文章是使用abp里的asp.net core + angular结构.
- angular里的UI自动化测试(简称e2e)使用的是protractor.
所以有了这篇文章.
从大家的反馈中得知,
- 99%的同学之前都没有接触过这一块.
- protractor官网资料很多, 把官网看一遍会很耗时间, 不够快速.
- 而我们这系列文章的关键词就是”快速"
- 所以我就先从最简单的说起让大家快速入手.
先从安装protractor开始说起.
第1节 如何安装和初始化设置
- 使用管理员模式打开你的vscode
- vscode在angular项目目录下新建一个terminal(终端), 敲如下命令然后回车: npm install -g protractor
注意!一定要global 安装。在后面遇到任何问题都不要非global安装protractor。如果不小心非global安装则要通过这个命令卸载:npm uninstall protractor - 然后把刚才global安装的protractor link到你的项目中,敲如下命令然后回车:npm link protractor
- 上一条命令完成后, 继续敲如下命令然后回车: webdriver-manager update
- 上一条命令完成后, 继续敲如下命令然后回车: webdriver-manager start
- 然后关闭这个terminal(终端), 这点十分重要!!!不然接下来写test case然后跑起来的时候会提示端口被占用
Q&A:
- 报错:
'webdriver-manager' is not recognized as an internal or external command, operable program or batch file.
必须安装全局安装protractor,也就是说npm install -g protractor 一定要加参数-g
- npm安装老是失败
确认你可以访问google.com,如果可以访问还是报错。改用yarn,不用npm.
第2节 开始第一个test case (以登录为例)
- Vscode打开angular项目目录/e2e/src/app.po.ts
- 输入如下代码:
getUserNameInput() {return element(by.name('userNameOrEmailAddress'));}getPasswordInput() {return element(by.name('password'));}getLoginButton() {return element(by.buttonText('登录'));// return element(by.id('loginbtn')); // 后备措施,比如是英文环境的时候,上面代码就doesn't work,就要用这句了。}getLogoutButton() {return element(by.buttonText('注销'));}
- Vscode打开angular项目目录/e2e/src/app.e2e-spec.ts
- 在头部import要引用的类
import { browser } from 'protractor';
- 把如下代码注释掉
// describe('workspace-project App', () => { // let page: AppPage;// beforeEach(() => { // page = new AppPage(); // });// it('should display welcome message', () => { // page.navigateTo(); // expect(page.getParagraphText()).toEqual('Welcome to YoyoCmsTemplate!'); // }); // });
- 写具体的自动化测试代码:
describe('管理员登录', () => {let page: AppPage;beforeEach(() => {page = new AppPage();});it('输入正确用户名和密码', () => {page.navigateTo();// browser.waitForAngularEnabled(); // 等待程序加载完page.getUserNameInput().sendKeys('admin'); // 输入用户名page.getPasswordInput().sendKeys('123qwe'); // 输入密码// 等待登录按钮从disable变成enablebrowser.wait(function () {return page.getLoginButton().isEnabled;}).then(function () {// console.log(page.getLoginButton());page.getLoginButton().click(); // 点击登录按钮expect(page.getLogoutButton().isEnabled()).toBe(true); // 出现注销按钮,意味着登录成功了});}); });
- vscode在angular项目目录下新建一个terminal(终端), 敲如下命令然后回车: ng e2e --no-webdriver-update (为什么不是ng e?因为要避免不能访问google.com而导致的错误)
- 如果前面配置都正确的话,会自动弹出一个chrome浏览器,并且出现下图。这时候表示自动化测试已经正常跑起来了,以后的问题就不再是配置问题,是测试用例代码有问题了
- 浏览器会自动输入用户名密码,并点击登录。
- 那么怎么查看测试结果呢?回到vscode刚才那个terminal(终端),这里会显示测试结果。嗯,对的,这里不会像ng test一样弹出一个浏览器显示测试结果,这里只会在命令行终端显示测试结果。
- 跑完一次测试用例后记得要关闭这个terminal(终端), 这点十分重要!!!不然接下来再跑有一定几率会出错。
Q&A
问题0:为啥我输入ng test没有得到同样结果? 回答:ng test和ng e是完全不同的两回事,结果当然不一样,所以你应该输入ng e.
问题1:为啥我复制了你的代码却出错? 回答:我的代码是建立在角落白板报的52abp2018年11月份版本上的,如果你不是使用这个版本52abp,那么里面的用户名和密码元素的捕抓和值都要做相应更改。
问题2:为啥我执行webdriver-manager update出错? 回答:99%是网络原因。
问题3:报错:</button> is not clickable at point (514, 688). Other element would receive the click。回答:要被点击的button没有显示在屏幕上,有如下可能:1,浏览器没有全屏,导致这个button看不见,这时候要把浏览器设置为全屏。2. 锁屏了,跑自动化测试的时候不要锁屏。3. 改用无头浏览器。
问题4:按照我的文章来做,跑测试时在最后一步捕捉“注销”按钮处失败了。回答:看看你的程序界面是否有“注销”按钮或链接,如果没有的话,当然捕捉不到,这时候你就要根据你的实际情况去修改捕捉“注销”按钮的测试代码了。
第3节 写更多test case
第4节 使用cucumber来加快写test case的速度
第5节 测试浏览器兼容性 - 同时在多个不同浏览器里跑测试
嗯, 考虑99%的同学之前都还没接触过protractor, 大家先把前面两块完成消化之后, 给我反馈,我根据大家的反馈再更新第3、4、5节吧.
这是<如何用ABP框架快速完成项目(面向项目交付编程面向客户编程篇)> 系列文章的其中一篇, 其他文章会陆续更新.
本文会经常更新,请阅读原文:https://www.cnblogs.com/adalovelacer/p/abp-quickly-delivery-e2e-angular-protractor.html, 以避免陈旧错误知识的误导,同时有更好的阅读体验。
转载于:https://www.cnblogs.com/adalovelacer/p/abp-quickly-delivery-e2e-angular-protractor.html
如何用ABP框架快速完成项目 - 自动化测试 - 前端angular e2e protractor相关推荐
- 如何用ABP框架快速完成项目(面向项目交付编程面向客户编程篇) - 广州.net微软技术俱乐部12月份活动报名帖...
这是广州.net微软技术俱乐部12月份活动报名帖.此帖会持续更新. 活动课程标题是:如何用ABP框架快速完成项目(面向项目交付编程面向客户编程篇) 这是内容大纲: ABP框架简介(这里会聊聊.net真 ...
- 如何用ABP框架快速完成项目(2) - 快的定义!
为什么要从快的角度来讲这系列课程呢? 因为快是一个很统一很清晰的标准. 所有人对时间都有一个统一清晰的概念. 比如说这系列课程会讲到的一个实例: 集成LinqToExcel, 用我的方法大概耗时1个 ...
- python编程怎么建立工程_教你如何用Python脚本快速创建项目
相信初学Cocos2D者对Python还很陌生,今天本篇教程教你如何用Python脚本快速创建项目. 在Cocos2d-x2.1.4以上的版本中,取消了使用vs模版创建项目的方法,开始使用python ...
- ExtAspNet学习-利用AppBox框架快速创建项目(五)—完成项目含源代码
我们前边四个部分已经完成了框架需要的基础配置, 现在我们来完成项目 1.Subsonic 配置,首先在OraSurvey.DAO中添加App.config配置相关信息 View Code 1 < ...
- 一步一步使用ABP框架搭建正式项目系列教程之本地化详解
返回总目录<一步一步使用ABP框架搭建正式项目系列教程> 本篇目录 扯扯本地化 ABP中的本地化 小结 扯扯本地化 本节来说说本地化,也有叫国际化.全球化的,不管怎么个叫法,反正道理都是一 ...
- 【完结】给新手的12大深度学习开源框架快速入门项目
文/编辑 | 言有三 这是一篇总结文,给大家来捋清楚12大深度学习开源框架的快速入门,这是有三AI的GitHub项目,欢迎大家star/fork. https://github.com/longpen ...
- abp框架学习笔记(三)--Angular和前端
在API接口做好之后,需要在前端显示数据,这里使用的Angular框架来进行开发的. 在开发前端之前需要先写本地化文件.本地化文件位于.Domain.Shared 项目的 Localization/项 ...
- 《一步一步使用ABP框架搭建正式项目系列教程》
这一节我们说说数据库迁移(Migration). 我们之前用的DBFirst创建了实体类,但当初这么做的原因是为了节省时间.现在我们通过创建的实体类和DbContext类利用EF的Code First ...
- 如何用bat文件快速计算项目代码行数
在项目文件夹根目录新建一个txt文档,把下面的代码复制到txt文档里面,然后txt的后缀名改为bat,双击这个文件即可 REM 放到项目根目录双击获取代码总行数.bat @echo off for / ...
- 广州.net俱乐部12月份ABP框架活动场地征集、志愿者征集、合作讲师\副讲师征集...
大家好,我在<被低估的.net(上) - 微软MonkeyFest 2018广州分享会活动回顾>一文中提到,我将在12月份搞一场ABP框架活动,现向大家征集活动场地.志愿者.合作讲师\副讲 ...
最新文章
- 共轭矩阵与自共轭矩阵
- VTK:可视化算法之TubesFromSplines
- 17行html代码实现的将网页文本保存成本地文本文件
- Linux安装Flash脚本,Linux(CentOS)下的Shockwave Flash shell一键更新脚本
- TOPSIS法 —— python
- 关于数据库方言MySQLDialect、MySQL5Dialect、MySQL55Dialect、MySQL57Dialect、MySQL8Dialect之间的区别与联系
- 郭盛华为什么不去阿里巴巴?原因竟是这个
- LDN的蓝牙双模键盘帮助文档
- 计算机考研考电路学校,集成电路工程考研学校排名
- 信息收集之基础端口扫描《诸神之眼——Nmap网络安全审计技术揭秘》总结一
- Unexpected token o in JSON at position 1报错
- L01n matlab,matlab常用语法
- LDAP中CN,OU,DC等的含义
- 什么是银行测试业务?银行测试业务包括哪些?
- eclipse列名无效_sql 列名无效
- python3.7保存文件_Python3.7之文件操作
- AKM工厂大火,富士、佳能、索尼、尼康元器件面临断供,机身面临缺货及涨价潮
- TDMA 时分多址接入
- flask中jsonify和json区别
- ENSP的The specified address conflicts with another address.以及其中一个Protocol是down的问题