参考博客:  https://testerhome.com/articles/19035

最近一段时间学习了cypress的测试工具, 她是一个端到端的测试web工具.

环境准备

1.工具:vs code;环境:node.js。

按网上教程安装即可。

2.安装 cypress

cd /your/project/path
npm install cypress --save-dev

3.安装插件:

npm install eslint-plugin-cypress --save-dev
npm install --save-dev eslint-plugin-chai-friendly

##4.配置:
在根目录下创建package.json:

{
"scripts": {
"cypress:open": "cypress open"
},
"devDependencies": {
"eslint-plugin-chai-friendly": "^0.4.1",
"eslint-plugin-cypress": "^2.2.1"
}
}

在 // my-project/cypress/ 目录下创建 .eslintrc.json:

{
"plugins": [
"cypress",
"chai-friendly"
],
"rules": {
"no-unused-expressions": 0,
"chai-friendly/no-unused-expressions": 2
},
"env": {
"cypress/globals": true
}, "extends": [
"plugin:cypress/recommended"
] }

5.启动命令:

npm run cypress:open

 

helloworld:

your-project/cypress/intgration 目录下新建 sample-spec.js

describe('My first test case for cypress',function(){
it('Does not match!',function(){
expect(true).to.equal(true)
})
})

在 cypress 窗口点击当前用例执行:

 

 

注意在编写用例时,每次保存会自动触发测试,对于调试来说是比较方便的。

第一个用例

访问百度首页并搜索 testerhome:

describe('My first test case for cypress',function(){
it('visit baidu home page and search for testerhome:',function(){
cy.visit('http://www.baidu.com') //访问url
cy.title().should('contain','百度一下,你就知道') //验证页面 title 是否正确
cy.get('#kw') //根据 css 定位搜索输入框
.type('testerhome') //输入关键字
.should('have.value','testerhome') //验证关键字自动是否展示正确
cy.get('#su').click() //根据 css 定位搜索按钮并点击
cy.url().should('include','wd=testerhome') //验证目标url 是否正确包含关键字
cy.title().should('contain','testerhome_百度搜索') //验证页面 title 是否正确
cy.get('[id="1"]')
.should('contain','TesterHome') // 验证第一个结果中是否包含TesterHome
cy.screenshot()
})
})

 

生成的截图:

 

这里有一个比较特别的 snapshot 功能,可以记录下执行过程中的每一步,并可以查看当时的页面(真实的网页,不是图片)

 

元素定位方式

  • get:按 css 或元素特定属性的方式定位元素
  • contains:按特定字符串定位元素

使用request 请求进行登录

cypress 推荐在每个用例的登录步骤,不调用 UI ,直接使用 request 登录。下面是一个例子:

describe('My first test case for cypress',function(){
it('login as admin without UI:',function(){
const accountTypes = { // 设置账号类型
admin:{
account:'admin',
password:'123456'
}
} cy.request({
url:'http://yourhost/login',
method:'POST',
form:true,
body:accountTypes['admin'] // 使用 admin 账号登录(跳过 UI 的登录)
})
cy.visit('/profile')
cy.url().should('include','profile') //验证目标url 是否正确
cy.get('#headerTitle')
.should('have.text','个人信息') // 验证是否包含标题 个人信息,
})
})

提取登录方法为公共方法

Cypress.Commands.add('login', (userType, options = {}) => {
const accountTypes = { // 设置账号类型
admin:{
account:'admin',
password:'123456'
}
} cy.request({
url:'http://yourhost/login',
method:'POST',
form:true,
body:accountTypes[userType] // 使用 admin 账号登录
})
}) describe('login with different account',function(){
beforeEach(function() {
cy.login('admin')
cy.visit('/')
}) it('进入商品列表页面',function(){ cy.contains('商品列表').click()
cy.get('#headerTitle')
.should('have.text','商品列表') // 验证是否包含标题 商品列表
}) it('进入订单列表页面',function(){
cy.contains('订单列表').click()
cy.get('#headerTitle')
.should('have.text','订单列表') // 验证是否包含标题 订单列表
})
})

命令行执行所有用例

npm run cypress:run

具体运行参数可以在 package.json 下配置:

"scripts": {
"cypress:run": "cypress run --browser chrome"
}

解决chrome 下的跨域问题:

在 cypress.json 中添加:

"chromeWebSecurity": false

生成Junit-allure报表

在 cypress.json 中添加依赖:

"reporter": "junit",
"reporterOptions": {
"mochaFile": "results/my-test-output[hash].xml", // 通过hash 标签区分不同文件的用例结果
"toConsole": true
}

执行 cypress run 的时候会自动生成xml文件
使用 allure 生成对应报告:

// 生成allure 报告
allure generate results --clean // 打开报告
allure open allure-report

 

生成 mocha awsome 报告

安装对应模块:
注意: mocha 必须指定 5.2.0, 否则会报错

npm install --save-dev mocha@5.2.0 mochawesome mochawesome-merge mochawesome-report-generator

配置cypress 对应报告信息 cypress.json:

"reporter": "mochawesome",
"reporterOptions": {
"overwrite": false,
"html": false,
"json": true
},

编写执行测试和生成报告的脚本:
scripts\cypress.js

const cypress = require('cypress')
const fse = require('fs-extra')
const { merge } = require('mochawesome-merge')
const generator = require('mochawesome-report-generator') async function runTests() {
await fse.remove('mochawesome-report')
const { totalFailed } = await cypress.run()
const jsonReport = await merge()
await generator.create(jsonReport)
process.exit(totalFailed)
} runTests()

在 package.json 文件添加对应启动脚本:

"scripts": {
"cypress:open": "cypress open",
"cy:run": "node scripts/cypress.js"
}

启动执行:

npm run cy:run

查看报告:
mochawesome-report\mochawesome.html

Cypress测试工具的更多相关文章

  1. 渗透测试工具BurpSuite做网站的安全测试(基础版)

    渗透测试工具BurpSuite做网站的安全测试(基础版) 版权声明:本文为博主原创文章,未经博主允许不得转载. 学习网址: https://t0data.gitbooks.io/burpsuite/c ...

  2. linux压力测试工具stress

    最近给PASS平台添加autoscaling的功能,根据服务器的负载情况autoscaling,为了测试这项功能用到了stress这个压力测试工具,这个工具相当好用了.具体安装方式就不说了.记录下这个 ...

  3. [.NET] WebApi 生成帮助文档及顺便自动创建简单的测试工具

    ==========最终的效果图========== ==========下面开始干活:生成帮助文档========== 一.创建 WebApi 项目 二.找到 HelpPageConfig.cs 并 ...

  4. RabbitMQ调试与测试工具-v1.0.1 -提供下载测试与使用

    最近几天在看RabbitMQ,所以发了两天时间写了一个调试和测试工具.方便使用. 下载地址:RabbitMQTool-V1.0.1.zip

  5. HTTP压力测试工具

    HttpTest4Net是一款基于C#实现的和HTTP压力测试工具,通过工具可以简单地对HTTP服务进行一个压力测试.虽然VS.NET也集成了压力测试项目,但由于VS自身占用的资源导致了在配置不高的P ...

  6. 微软压力测试工具 web application stress

    转自 http://www.cnblogs.com/tonykan/p/3514749.html lbimba  铜牌会员 这里给广大的煤油推荐一个web网站压力测试工具.它可以用来模拟多个用户操作网 ...

  7. WebService如何调试及测试工具

    http://www.cnblogs.com/zfanlong1314/archive/2012/04/06/2434788.html 通常,我们在Visual Studio里调试ASP.NET网站, ...

  8. Android高手速成--第四部分 开发工具及测试工具

    第四部分 开发工具及测试工具 主要介绍和Android开发工具和测试工具相关的开源项目. 一.开发效率工具 Json2Java根据JSon数据自动生成对应的Java实体类,还支持Parcel.Gson ...

  9. Linux下四款Web服务器压力测试工具(http_load、webbench、ab、siege)介绍

    一.http_load程序非常小,解压后也不到100Khttp_load以并行复用的方式运行,用以测试web服务器的吞吐量与负载.但是它不同于大多数压力测试工具,它可以以一个单一的进程运行,一般不会把 ...

随机推荐

  1. 文件格式——gff格式

    Gff文件格式 gff格式是Sanger研究所定义,是一种简单的.方便的对于DNA.RNA以及蛋白质序列的特征进行描述的一种数据格式,已经成为序列注释的通用格式,比如基因组的基因预测,许多软件都支持输 ...

  2. windows 下隐藏 system 函数弹窗

    概述 下面的程序是解决windows 下面调用 system() 函数的时候,会有窗口弹出的问题 头文件 #include <windows.h> 源码 /** * @brief 普通字符 ...

  3. C#----接口的显式实现

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace 接口 { ...

  4. python 里 np.array 的shape (2,)与(2,1)的分别是什么意思,区别是什么?

    numpy.ndarray.shap是返回一个数组维度的元组. (2,)与(2,1)的区别如下:   ndarray.shape:数组的维度.为一个表示数组在每个维度上大小的整数元组.例如二维数组中, ...

  5. vue打包之后生成一个配置文件修改请求接口

    问题描述: 在npm run build 生成dist后,url配置也被固定了,传到运行的前端服务器上后,假设某次,api服务器的ip修改了,改动只是更新下这个url,但是却需要回到前端源码,修改ur ...

  6. java排序算法(持续更新)

    package exception; import java.util.Arrays; public class Sort { public static void main(String[] arg ...

  7. 2017-10-13 NOIP模拟赛

    入阵曲 #include<iostream> #include<cstdio> #define maxn 401 #ifdef WIN32 #define PLL " ...

  8. android 手写万能adapter适配器

    android开发中,我们离不开adapter,每个项目都有很多地方需要adapter,那么我们如何让自己少写adapter代码呢?那就是封装adapter,让我们的adapter成为万能的adapt ...

  9. 今天来记录一下关于ajax跨域的一些问题。以备不时之需。

    今天来记录一下关于ajax跨域的一些问题.以备不时之需. 跨域 同源策略限制 同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性.也就是说,受到请求的 URL 的域必须与当前 Web 页面 ...

  10. Android: requires android.permission.READ_EXTERNAL_STORAGE, or grantUriPermission()

    在安卓上使用组件react-native-contacts报错,是需要添加联系人的时候,说是权限问题,配置了manifest文件后依然不起效果, 解决方法: 在需要引入react-native-con ...