官网地址:JavaScript End to End Testing Framework | cypress.io testing tools
cypress由一个免费的、开源的、本地安装的应用程序和一个用于记录您的测试的仪表服务组成。是前端测试的工具,解决开发人员和QA工程师在测试应用程序时面临的关键痛点;
本文描述Windows的安装和使用
安装
- 安装nodejs
cypress是nodejs的一个库,所以先要安装nodejs,这里安装步骤就省略了(nodejs官网下载地址:https://nodejs.org/en/download )
校验nodejs是否安装成功,可以执行
node -v
- 接下来安装cypress
执行命令
npm install cypress --save-dev
运行程序
- 创建项目目录
在电脑目录创建文件夹,如 cypress-demo - 项目目录初始化,初始化完成后,会自动创建package.json文件
npm init //一路回车即可
npm i
- 在项目根目录,输入命令启动
npx cypress open
或者通过试用yarn
yarn run cypress open
完整路径的漫长道路
./node_modules/.bin/cypress open
或使用快捷方式npm bin
$(npm bin)/cypress open
启动后如图
Launchpad 首先向您展示了您最大的决定:我应该进行哪种类型的测试? E2E 测试,我在哪里运行我的整个应用程序并访问页面来测试它们?或者 Component Testing,我在哪里安装我的应用程序的各个组件并单独测试它们?
有关此关键决策的更多背景信息,请阅读 测试类型。或者,如果您不确定自己想要哪种类型并且只是想继续您的测试之旅,现在只需选择E2E - 您以后随时可以更改!
- 快速配置
在下一步中,Launchpad 将构建一组适合您选择的测试类型的配置文件,并将列出更改供您查看。有关生成的配置的更多信息,请查看 赛普拉斯配置参考,或者您可以向下滚动并点击“继续”。
- 启动浏览器
运行第一个测试程序
添加测试文件
根据上面步骤操作完后,启动的浏览器中,添加测试文件
单击它时,您应该会看到一个对话框,您可以在其中输入新规范的名称。现在只接受默认名称
新生成的规范显示在确认对话框中。只需继续并使用✕按钮将其关闭。
一旦我们创建了该文件,您应该会看到应用程序立即将其显示在端到端规范列表中。监控您的规范文件是否有任何更改并自动显示任何更改。
编写测试脚本
测试文件添加完后,会在项目目录的cypress\e2e目录下,看到你创建的测试文件(如:spec.cy.js)
用文档编辑工具打开,输入代码
describe('cypress demo', () => {
it('百度测试用例', () => {
cy.visit('https://www.baidu.com/')
// 验证title
cy.title().should('contain', '百度一下,你就知道')
//根据css定位搜索输入框
cy.get('#kw').type('python')
.should('have.value', 'python') //验证关键字自动是否展示正确
cy.get('#su').click() //根据 css 定位搜索按钮并点击
cy.url().should('include','wd=python') //验证目标url 是否正确包含关键字
cy.title().should('contain','python_百度搜索') //验证页面 title 是否正确
cy.get('[id="1"]').should('contain','python') // 验证第一个结果中是否包含TesterHome
cy.screenshot()
})
})
测试编辑完保存后,就会看到打开浏览器的运行结果