Cypress
2022-05-11 21:54:09 15 举报AI智能生成
Cypress
作者其他创作
大纲/内容
cypress是一个跨平台的桌面应用，支持mac/linux/windows系统
安装教程：https://www.runoob.com/nodejs/nodejs-install-setup.html
Node.js 安装包及源码下载地址为：https://nodejs.org/en/download/
1、安装Node.js
D:cd Cypress_projectsmkdir cypress_project01cd cypress_project01npm init -y npm install cypress --save-dev
举个例子：新建任意一个目录，init初始化，然后安装cypress
2、使用npm命令安装cypress
{ "scripts": { "cypress": "cypress open" }}
找到scripts元素，增加`"cypress": "cypress open"`
3、修改package.json文件
npm run cypress:opennpm run cypress
4、启动cypress
搭建步骤：
建议使用VsCode打开编辑cypress项目
cypress环境搭建
example.json
fixtures
examples
在此创建测试用例的文件夹
integration
index.js
plugins
- commands.js - index.js
support
cypress
主要用于存储测试用例的外部静态数据
测试夹具的静态数据通常存储在 .json 文件中，如自动生成的 examples.json
静态数据通常是某个网络请求对应的响应部分，包括HTTP状态码和返回值，一般是复制过来更改而不是自己手工填写
主要作用
消除了对外部功能模块的依赖
已编写的测试用例可以使用测试夹具**提供的固定返回值**，并且你确切知道这个返回值是你想要的
因为无须真正地发送网络请求，所以测试更快
使用的好处
fixture 测试夹
所有在 integration 文件下，且文件格式是以下的文件都将被 Cypress 识别为测试文件：- .js- .jsx- .coffee- .cjsx
integration 测试文件
Cypress 独有优点就是测试代码运行在浏览器之内，使得Cypress 跟其他的测试框架相比，有显著的架构优势，这优点虽然提供了可靠性测试，但也使得和在浏览器之外进行通信更加困难【痛点：和外部通信困难】
前言：
cypress可以在plugins下自定义自己的插件
插件默认位于plugins下的index.js里面，每个测试文件运行之前，Cypres 都会自动加载插件文件 cypress/plugins/index.js
每个测试文件运行之前，Cypress都会自动加载支持文件cypress/support/index.js
support目录主要放置可重用配置项，如通用函数和全局默认配置
文件结构的详细说明
cypress文件结构
cypress.json默认为空
cypress的配置文件为cypress.json
链接：https://docs.cypress.io/guides/references/configuration.html#Global
null
baseUrl：系统主域名\t
{}
env：环境变量
50
numTestKeptInMemory：保存在内存中的测试用例个数
spec
reporter：测试报告的格式
cypress是基于mocha构建的，所以mocha的reporter，cypress也适用，mocha常见的测试报告格式：https://mochajs.org/#reporters
常见的报告格式：spec、dot、nyan、tap、landing、list
我们也可以自定义报告格式：https://docs.cypress.io/guides/tooling/reporters.html#Custom-reporter
测试报告格式
rporterOptions：相应报告格式的配置参数
port：cypress占用的端口，默认为随机生成的
retries：测试失败重试次数
true
watchForFileChanges：是否监控测试文件的变更并重新测试
Global
4000
defaultCommandTimeout：命令默认超时时间
60000
execTimeout：cy.exec() 等待系统命令完成执行的超时时间
taskTimeout：cy.task() 等待任务完成执行的超时时间
pageLoadTimeout：等待页面加载超时时间
5000
requestTimeout：请求发出的超时时间
30000
responseTimeout：响应超时时间
Timeouts
**/*.*
testFiles：要加载的测试文件，可以指定具体文件，也可以模糊匹配
fileServerFolder：项目根目录
fixturesFolder、integrationFolder、pluginsFile、supportFile：分别表示测试夹、用例文件夹、插件文件夹、支持文件夹
cypress/screenshots
screenshotsFolder：由测试失败或由cy.screenshot()命令引发的截图的默认文件夹
Folders/Files
screenshotOnRunFailure：运行失败是否截图保存
trashAssetsBeforeRuns：运行前丢弃screenshotsFolder 和 videosFolder的内容
screenShots
660px
viewportHeight：测试窗口的默认高度
1000px
viewportWidth：测试窗口的默认宽度
Viewport
常见的默认值：
可以通过cy.viewport()来重写
配置的默认值
对于复杂的配置，可以使用单引号包起来的json格式对象来设置
方式1：命令行
方式2：使用插件文件pluginsFile
例子：export CYPRESS_VIEWPORT_WIDTH=800
1、环境变量的key都是以CYPRESS_作为前缀
1、export CYPRESS_pageLoadTimeout=100000
2、export CYPRESS_PAGE_LOAD_TIMEOUT=100000
2、环境变量的key会被自动规范化，右边的两种方式都是有效的：
Environment variables that do not match configuration keys will instead be set as regular environment variables for use in your tests with Cypress.env().
3、环境变量的key跟cypress配置的key不匹配的话，将会当成Cypress.env()的一个常规变量来处理
注意：
方式3：export 环境变量
方式4：Cypress.config()
子主题 1
例子：1、应用到suite中
例子：2、应用到single test中
查看Test Configuration支持的configuration：https://docs.cypress.io/guides/references/configuration.html#Test-Configuration
cypress可以将具体的配置只应用到某个测试套件suite或者测试用例test中
方式5：Test Configuration
重写配置Overriding Options
默认值
Default value
cypress.json
The configuration file
这个配置文件需要自己创建，将会被cypress自动识别，这个文件会覆盖cypress.json的一些值
cypress.env.json
The Cypress environment file
系统环境变量
System environment variables
命令行参数
Command Line arguments
插件文件
Plugin file
cypress解析配置的顺序
cypress配置
概要
测试套件，可以嵌套，套件至少包含一个测试用例
describe()
跟describe()的作用相同
context()
一条测试用例，specify()的作用跟it()的作用相同
it()
before()
beforeEach()
afterEach()
after()
.only()
.skip()
cypress采用了mocha（https://mochajs.org/）的bdd的语法，可以完美适用于集成测试和单元测试，主要通过右边组件来编写和组装测试用例：
All before() hooks run (once)
Any beforeEach() hooks run
Tests run
Any afterEach() hooks run
All after() hooks run (once)
执行顺序：
Hooks
只执行指定用例
it.only()
跳过执行指定用例
it.skip()
使用技巧：可通过describe.only() 或者 context.only() 来指定需要执行的测试套件
包含和排除测试用例
举个例子：
基本的结构
expect(name).to.not.equal('Jane')
not.equal
expect(obj).to.deep.equal({ name: 'Jane' })
deep.equal
expect('test').to.be.a('string')
be.a
include
expect(myVar).to.exist
exist
expect(5).to.be.lessThan(10)
lessThan(value)
常见的Chainer
BDD断言（expect/should)
TDD断言
Chai断言库
have.attr
have.css
have.id('foo')
have.id
have.text('I love testing')
have.text
contain('text')
contain
be.visible / be.hidden
Chai-jQuery断言库
Cypress 的断言基于 Chai 断言库，并且增加了对 Sinon-Chai、Chai-jQuery 断言库的支持，其中就包括 BDD 和 TDD 格式的断言。https://docs.cypress.io/guides/references/assertions.html#Chai
注意：Chainer可以来自 Chai or Chai-jQuery or Sinon-Chai.
语法格式：
长度断言
类断言
值断言
文本内容
cy.get('button').should('be.visible')
元素是否可见
cy.get('#loading').should('not.exist')
元素是否存在
cy.get(':radio').should('be.checked')
元素状态
针对css
常见断言
常用断言：.should()
断言方式
cypress编写和组织测试用例
cy.get("#main1").click()
id选择器
cy.get(".btn").click()
class选择器
cy.get("button[id='main2']").click()
属性选择器
cy.get("ul>li:nth-child(2)").click()
nth-child(n)选择器
cypress元素定位
创建一个断言，会不断重试知道用例通过或者超时
should
是.should的别名
and
as()
使用@来调用，可在cy.get()或者cy.wait()中调用
给Dom元素起别名
给route起别名
cy.fixture('users-admins.json').as('admins')
给cy.fixture()的数据起别名
例子：
创建别名供以后使用
as
例子：cy.get('[type="checkbox"]').check() // Check checkbox elementcy.get('[type="radio"]').first().check() // Check first radio element
选中元素，checkbox or radio.
check
例子：cy.get('nav').children()
获取Dom子元素的集合
children
清除input或者textarea文本区域的值
clear
清除特定浏览器cookie
clearCookie
清除所有cookie
clearCookies
例子：cy.get('.nav').contains('About')cy.contains('Hello')
获取包含特定文本的第一个Dom元素
contains
双击元素
dblclick
例子：cy.get('nav').debug()
设置一个debugger，并打印前一个命令生成返回的内容
debug
例子：cy.get('nav a').first()
获取第一个(最后一个）Dom元素
first/last
文件路径
cy.fixture(filePath)
encoding是读取文件使用的编码
cy.fixture('users.json').as('usersData')
加载一个json文件的数据
cy.fixture('logo.png').then((logo) => { // 加载 logo.png})
加载一张图片
json->js->coffee->html->txt->csv->png->jpg->jpeg->....
加载文件不指定后缀时，解析顺序是：
加载位于文件中的一组固定数据
fixture
通过选择器selector来获取Dom元素
get
获取上一条命令的返回结果并执行调用方法
.invoke(functionName)
options指的是log，timeout等
args是传递给函数的参数，无数量限制
例子：cy.get('.modal').invoke('show')
invoke
鼠标停在元素上方
cy.get('button').trigger('mouseover')
鼠标长点击
cy.get('.target').trigger('mousedown')cy.wait(1000)cy.get('.target').trigger('mouseleave')
例子
触发一个Dom元素的事件
trigger
parent
then
task
within
visit
等待多少毫秒
cy.wait(time)
cy.wait(alias)
wait
request
返回（生成）传递给它的对象
wrap
cypress常用命令Command
Cypress
0 条评论
回复 删除
下一页
