端到端测试 End to End Testing(e2e): 站在用户角度的测试
e2e测试是把我们的程序堪称是一个黑盒子,我不懂你内部是怎么实现的,我只负责打开浏览器,把测试内容在页面上输入一遍,看是不是我想要得到的结果。
1、为什么要用Cypress?
cypress是一款开箱即用,可以跑在Chrome浏览器上的测试工具。
- 安装简易:一行命令或者下载解压安装包就可以安装完毕
- 依赖较少:不用安装jdk, python之类的东西
- dom选取:提供了图形化的dom选取工具,方便测试人员写脚本
- 实时刷新:Cypress检测测试用例改变后,会自动刷新
- 报错详细:详细的报错,方便排查
2、安装cypress
第一种方式:
安装cypress客户端:http://download.cypress.io/de…
下载,解压,打开后如下图所示:
第二种方式:
通过npm安装
$ npm i -D cypress
3、初始化
客户端方式
- 创建一个文件夹命名为:mytest
- 点击上图的箭头位置,选择到mytest目录
- cypress就会在mytest目录下新建cypress目录,并初始化一些文件
npm方式
./node_modules/.bin/cypress open
4、目录分析
cypress目录结构
cypress // cypress目录
---- fixtures 测试数据配置文件,可以使用fixture方法读取
---- integration 测试脚本文件
---- plugin 插件文件
---- support 支持文件
- cypress.json // cypress全局配置文件
5、 编写测试用例
//在integration目录下新建 loginTest.js
describe('taikang cloud登录测试', () => {
it('登录页面', () => {
cy.visit('http://10.130.210.109') //访问地址
cy.get('.right-nav').find('span').click() //点击登录
cy.get('input[name="username"]').type('xuzl20') //在用户输入框中输入用户名
cy.get('input[name="password"]').type('Pass1234') //在密码输入框中输入密码
cy.get('.loginBtn').click() //点击按钮
})
})
5.1dom选取
cypress提供了客户端GUI工具选取
- 点击选取按钮
- 点击要操作的元素
- 自动生产了选取该dom的语句
如果HTML、css熟练,可以通过GUI工具,自己写选取dom的语句
5.2DOM交互
- .click() 单击
- .dblclick() 双击
- .type() 输入
- .clear() 清空
- .check() 选中
5.3断言
断言参考 https://docs.cypress.io/guide…
6、运行测试用例
点击要执行的用例
开始执行
扫描二维码关注公众号,回复:
10778901 查看本文章