前端自动化测试工具 cypress 试用调研记录 -凯发app官网

测试交流3050字数 4130阅读13分46秒阅读模式

作者


前端自动化测试工具 cypress 试用调研记录

一盏小灯

希望做黑暗中的一盏小灯,不求照亮全世界,只求给自己温暖和光明

前言

前段时间在论坛看到 cypress 的介绍,正好想了解一下前端测试框架,所以使用和调研了一下。以下是相关记录。
参考凯发k8国际官网首页入口官网: https://www.cypress.io/文章源自玩技e族-https://www.playezu.com/450642.html

环境准备

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

按网上教程安装即可。文章源自玩技e族-https://www.playezu.com/450642.html

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:文章源自玩技e族-https://www.playezu.com/450642.html

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

在 // my-project/cypress/ 目录下创建 .eslintrc.json:文章源自玩技e族-https://www.playezu.com/450642.html

{
"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

文章源自玩技e族-https://www.playezu.com/450642.html

前端自动化测试工具 cypress 试用调研记录

文章源自玩技e族-https://www.playezu.com/450642.html

helloworld:

your-project/cypress/intgration 目录下新建 sample-spec.js文章源自玩技e族-https://www.playezu.com/450642.html

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

在 cypress 窗口点击当前用例执行:
文章源自玩技e族-https://www.playezu.com/450642.html

前端自动化测试工具 cypress 试用调研记录

文章源自玩技e族-https://www.playezu.com/450642.html

文章源自玩技e族-https://www.playezu.com/450642.html

前端自动化测试工具 cypress 试用调研记录

文章源自玩技e族-https://www.playezu.com/450642.html

注意在编写用例时,每次保存会自动触发测试,对于调试来说是比较方便的。文章源自玩技e族-https://www.playezu.com/450642.html

第一个用例

访问百度凯发app凯发k8国际官网首页入口官网首页并搜索 testerhome:文章源自玩技e族-https://www.playezu.com/450642.html

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..should('include','wd=testerhome')     //验证目标url 是否正确包含关键字
cy.title().should('contain','testerhome_百度搜索')  //验证页面 title 是否正确
cy.get('[id="1"]')
.should('contain','testerhome')   // 验证第一个结果中是否包含testerhome
cy.screenshot()
})
})

文章源自玩技e族-https://www.playezu.com/450642.html

前端自动化测试工具 cypress 试用调研记录

文章源自玩技e族-https://www.playezu.com/450642.html

生成的截图:
文章源自玩技e族-https://www.playezu.com/450642.html

前端自动化测试工具 cypress 试用调研记录

文章源自玩技e族-https://www.playezu.com/450642.html

这里有一个比较特别的 snapshot 功能,可以记录下执行过程中的每一步,并可以查看当时的页面(真实的网页,不是图片)
文章源自玩技e族-https://www.playezu.com/450642.html

前端自动化测试工具 cypress 试用调研记录

文章源自玩技e族-https://www.playezu.com/450642.html

元素定位方式

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

使用 request 请求进行登录

cypress 推荐在每个用例的登录步骤,不调用 ui ,直接使用 request 登录。下面是一个例子:文章源自玩技e族-https://www.playezu.com/450642.html

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..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 下配置:文章源自玩技e族-https://www.playezu.com/450642.html

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

解决 chrome 下的跨域问题:

在 cypress.json 中添加:文章源自玩技e族-https://www.playezu.com/450642.html

"chromewebsecurity": false

生成 junit-allure 报表

在 cypress.json 中添加依赖:文章源自玩技e族-https://www.playezu.com/450642.html

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

执行 cypress run 的时候会自动生成 xml 文件
使用 allure 生成对应报告:文章源自玩技e族-https://www.playezu.com/450642.html

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

文章源自玩技e族-https://www.playezu.com/450642.html

前端自动化测试工具 cypress 试用调研记录

文章源自玩技e族-https://www.playezu.com/450642.html

生成 mocha awsome 报告

安装对应模块:
注意: mocha 必须指定 5.2.0, 否则会报错文章源自玩技e族-https://www.playezu.com/450642.html

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

配置 cypress 对应报告信息 cypress.json:文章源自玩技e族-https://www.playezu.com/450642.html

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

编写执行测试和生成报告的脚本:
scriptscypress.js文章源自玩技e族-https://www.playezu.com/450642.html

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 文件添加对应启动脚本:文章源自玩技e族-https://www.playezu.com/450642.html

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

启动执行:文章源自玩技e族-https://www.playezu.com/450642.html

npm run cy:run

查看报告:
mochawesome-reportmochawesome.html文章源自玩技e族-https://www.playezu.com/450642.html

文章源自玩技e族-https://www.playezu.com/450642.html

前端自动化测试工具 cypress 试用调研记录

文章源自玩技e族-https://www.playezu.com/450642.html

总结

优点:文章源自玩技e族-https://www.playezu.com/450642.html

  • 速度感觉上比 selenium 要快。
  • 内置的 request 方法可以直接跳过 ui 层的登录,但要求是你能调用对应的登录接口。
  • 某些步骤运行失败时自动重试。这样可以提高运行的稳定性。
  • 运行失败时自动截图。

待研究:文章源自玩技e族-https://www.playezu.com/450642.html

  • 可以使用 allure 或 mochawesome 生成报告, 但如何在报告里附上截图? 暂时没找到好的方法解决。
  • 与 jenkins 的集成: 尝试使用 docker 来执行用例并生成报告,但目前卡在无法获取到 docker 中任务完成的退出节点。
  • 用例能否并发运行?
文章源自玩技e族-https://www.playezu.com/450642.html
注意:本文法律责任由该作者承担,侵权请联系▷诈骗举报◁▷新闻不符◁▷我要投稿◁
免责声明:本文内容来自用户上传并发布或网络新闻客户端自媒体,玩技博客仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,请联系删除。
评论  30  访客  30
  1. jerry li 未知系统 iana

    我没有继续研究这个工具了。cypress 现在应用得挺广的,肯定有很多人已经踩过了坑,你可以在论坛里搜一下。

  2. dqzhang 未知系统 iana

    想请教一下,jenkins 和 cypress 集成,了解吗?我这边在做的时候,consule 里面显示有点乱码的感觉

  3. jerry li 未知系统 iana

    不清楚你说的像素级别是什么意思。

  4. 林啊浪 未知系统 iana

    请问下这个能测试到像素级别吗

  5. jerry li 未知系统 iana

    上面有他们凯发k8国际官网首页入口官网的地址,你可以去看下。
    据我当时的调研,这是一个 web 的自动化测试框架,所以应该是不支持移动 app 测试的

  6. 林寒 未知系统 iana

    敢问作者,这个工具是不是不支持移动端?

  7. jerry li 未知系统 iana

    不好意思,我们调研之后没有继续研究了

  8. ir3lia 未知系统 iana

    请问 allure 报告附失败用例截图解决没呀

  9. jerry li 未知系统 iana

    上面定义了一个 admin 的用户对象,里面包含了账号和密码;
    下面是调用了 request 的方法,把参数请求发送到对应的登录接口里。

  10. jerry li 未知系统 iana

    账号密码就是这里面设置的。截图的意思,是定义了一个 admin 用户,用户名和密码分别就是 account=admin,password=123456,请求的 url 就是你们被测接口的登录地址。
    这个只是一个例子,需要根据你们系统的登录方式和参数组合来改一下对应的代码。

发表评论

匿名网友
确定