UI自动化测试框架之cypress

​
官网地址：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

运行程序

1. 创建项目目录
   在电脑目录创建文件夹，如 cypress-demo
2. 项目目录初始化，初始化完成后，会自动创建package.json文件

npm init 	//一路回车即可
npm i

3. 在项目根目录，输入命令启动

npx cypress open
或者通过试用yarn
yarn run cypress open
完整路径的漫长道路
./node_modules/.bin/cypress open
或使用快捷方式npm bin
$(npm bin)/cypress open

启动后如图

Launchpad 首先向您展示了您最大的决定：我应该进行哪种类型的测试？ E2E 测试，我在哪里运行我的整个应用程序并访问页面来测试它们？或者 Component Testing，我在哪里安装我的应用程序的各个组件并单独测试它们？
有关此关键决策的更多背景信息，请阅读 测试类型。或者，如果您不确定自己想要哪种类型并且只是想继续您的测试之旅，现在只需选择E2E - 您以后随时可以更改！

4. 快速配置
   

在下一步中，Launchpad 将构建一组适合您选择的测试类型的配置文件，并将列出更改供您查看。有关生成的配置的更多信息，请查看 赛普拉斯配置参考，或者您可以向下滚动并点击“继续”。

5. 启动浏览器
   

运行第一个测试程序

添加测试文件

根据上面步骤操作完后，启动的浏览器中，添加测试文件

单击它时，您应该会看到一个对话框，您可以在其中输入新规范的名称。现在只接受默认名称

新生成的规范显示在确认对话框中。只需继续并使用✕按钮将其关闭。

一旦我们创建了该文件，您应该会看到应用程序立即将其显示在端到端规范列表中。监控您的规范文件是否有任何更改并自动显示任何更改。

编写测试脚本

测试文件添加完后，会在项目目录的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()
  })
})

测试编辑完保存后，就会看到打开浏览器的运行结果