1.软件安装
Cypress安装:
npm install cypress --save-dev
或者
yarn add cypress --dev
全局安装
npm install -g cypress
2.初始化
- 去到项目的目录
/cypress-test
- 打开
vscode
- 在terminal下执行:
cypress open
,就可以打开cypress 客户端。 - 点击
select manually
,就可以在项目的目录下生成了cypress的目录了。 - OK,安装和初始化这两步已经安装完成了,接下来就可以开始test了
初始化页面
- 生成的目录
- cypress // cypress目录
---- fixtures 测试数据配置文件,可以使用fixture方法读取
---- integration 测试脚本文件
---- plugin 插件文件
---- support 支持文件
- cypress.json // cypress全局配置文件
- package.json //这个要自己创建
3.执行例子
3.1 访问百度页面
3.2 查找DOM进行交互,例如输入,点击,选择之类
3.3 进行断言
/// <reference types="Cypress" />
describe("baidu测试",()=>{
beforeEach(()=>{
cy.visit("http://www.baidu.com")
})
it("输入查询cypress",()=>{
cy.get("#kw")
.type("cypress")
cy.get("#su")
.click()
cy.get('body').should('contain', 'cypress')
})
})
执行结果
4.生成测试报告
- 在项目目录下,执行
npm install mocha mochawesome
,安装完成就可以在package.json
下看到依赖包 - 打开
cypress.json
,添加生成报告的命令
{
"reporter": "mochawesome",
"reporterOptions": {
"reportDir": "cypresse/results",
"overwrite": false,
"html": true,
"json": true
}
}
- 执行
cypress run
,就可以生成所有测试用例的报告了
https://docs.cypress.io/zh-cn/guides/tooling/reporters.html#Report-per-spec