基于vue/react+cypress的前端自动化测试方案

该测试框架主要思想就是通过该框架提供的api去操作dom，模拟人的一些行为来实现自动化测试工作

cypress官网        API文档  

cypress-官网

工程目录和配置文件介绍

---

  1、工程目录介绍

  

工程目录

目录介绍

2、常用方法介绍

常用方法介绍

3、配置文件介绍

改配置文件可以配置环境变量和一个公共的配置

"chromeWebSecurity": false,                       用来解决跨域问题

"integrationFolder": "cypress/integration",   指定cypress自动扫描测试用例路径

 "testFiles": "**/*.js",                                     用来过滤测试用例后缀默认是.spec.js

"viewportWidth": 1920,                                用来设置测试用例gui窗体宽度

"viewportHeight": 1130,                               用来设置测试用例gui窗体高度

baseUrl：“http:localhose:8080”                   是你的服务部署地址/你本地启动的开发地址；配置了改命令就可以直接访问路由而不用在写区路径了

                                                                     cy.visit('http:localhose:8080/commands/actions')  简写：cy.visit('/commands/actions')

"env": {                                                          可以自定义环境变量    获取方式cypress.env(key),比如：cypress.env(‘prod’)

        "prod": "http://prod.com",

        "title": "卖手机的程序员"

    }

cypress.json配置文件

---

第一步先执行命令安装cypress  

npm install cypress --save-dev

在项目根目录执行完改命令

第二步在package.json添加如下命令

"cypress:open": "cypress open",   

"cypress": "cypress run",

package.json

第三步执行npm run cypress:open可以看到如下图页面

执行npm run cypress:open

第四步在该操作页面点击要执行的测试用例，会自动执行该测试单元打开如下窗口

执行测试用例

(￣▽￣)~*   转载请说名出处，谢谢，尊重劳动成果。如果对你开发过程有帮助请帮忙点个小赞    (￣▽￣)~*