

首页  思维导图  详情



Cypress

2022-05-11 21:54:09   15  举报





AI智能生成

Cypress

后端开发

模版推荐

作者其他创作

大纲/内容

cypress环境搭建

cypress是一个跨平台的桌面应用，支持mac/linux/windows系统

搭建步骤：

1、安装Node.js

安装教程：https://www.runoob.com/nodejs/nodejs-install-setup.html

Node.js 安装包及源码下载地址为：https://nodejs.org/en/download/

2、使用npm命令安装cypress

举个例子：新建任意一个目录，init初始化，然后安装cypress

D: cd Cypress_projects mkdir cypress_project01 cd cypress_project01 npm init -y npm install cypress --save-dev

3、修改package.json文件

找到scripts元素，增加`&quot;cypress&quot;: &quot;cypress open&quot;`

{ &quot;scripts&quot;: { &quot;cypress&quot;: &quot;cypress open&quot; } }

4、启动cypress

npm run cypress:open npm run cypress

建议使用VsCode打开编辑cypress项目

cypress文件结构

cypress

fixtures

example.json

integration

examples

在此创建测试用例的文件夹

plugins

index.js

support

- commands.js - index.js

文件结构的详细说明

fixture 测试夹

主要作用

主要用于存储测试用例的外部静态数据

测试夹具的静态数据通常存储在 .json 文件中，如自动生成的 examples.json

静态数据通常是某个网络请求对应的响应部分，包括HTTP状态码和返回值，一般是复制过来更改而不是自己手工填写

使用的好处

消除了对外部功能模块的依赖

已编写的测试用例可以使用测试夹具**提供的固定返回值**，并且你确切知道这个返回值是你想要的

因为无须真正地发送网络请求，所以测试更快

integration 测试文件

所有在 integration 文件下，且文件格式是以下的文件都将被 Cypress 识别为测试文件： - .js - .jsx - .coffee - .cjsx

plugins

前言：

Cypress 独有优点就是测试代码运行在浏览器之内，使得Cypress 跟其他的测试框架相比，有显著的架构优势，这优点虽然提供了可靠性测试，但也使得和在浏览器之外进行通信更加困难【痛点：和外部通信困难】

cypress可以在plugins下自定义自己的插件

插件默认位于plugins下的index.js里面，每个测试文件运行之前，Cypres 都会自动加载插件文件 cypress/plugins/index.js

support

每个测试文件运行之前，Cypress都会自动加载支持文件cypress/support/index.js

support目录主要放置可重用配置项，如通用函数和全局默认配置

cypress配置

配置的默认值

cypress的配置文件为cypress.json

cypress.json默认为空

常见的默认值：

Global

链接：https://docs.cypress.io/guides/references/configuration.html#Global

baseUrl：系统主域名

null

env：环境变量

{}

numTestKeptInMemory：保存在内存中的测试用例个数

reporter：测试报告的格式

spec

rporterOptions：相应报告格式的配置参数

null

port：cypress占用的端口，默认为随机生成的

null

retries：测试失败重试次数

{ &quot;runMode&quot;: 0, &quot;openMode&quot;: 0 }

watchForFileChanges：是否监控测试文件的变更并重新测试

true

Timeouts

defaultCommandTimeout：命令默认超时时间

4000

execTimeout：cy.exec() 等待系统命令完成执行的超时时间

60000

taskTimeout：cy.task() 等待任务完成执行的超时时间

60000

pageLoadTimeout：等待页面加载超时时间

60000

requestTimeout：请求发出的超时时间

5000

responseTimeout：响应超时时间

30000

Folders/Files

testFiles：要加载的测试文件，可以指定具体文件，也可以模糊匹配

**/*.*

fileServerFolder：项目根目录

fixturesFolder、integrationFolder、pluginsFile、supportFile：分别表示测试夹、用例文件夹、插件文件夹、支持文件夹

screenshotsFolder：由测试失败或由cy.screenshot()命令引发的截图的默认文件夹

cypress/screenshots

screenShots

screenshotOnRunFailure：运行失败是否截图保存

true

trashAssetsBeforeRuns：运行前丢弃screenshotsFolder 和 videosFolder的内容

true

Viewport

viewportHeight：测试窗口的默认高度

660px

viewportWidth：测试窗口的默认宽度

1000px

重写配置Overriding Options

方式1：命令行

例子：cypress open --config pageLoadTimeout=30000,baseUrl=https://myapp.com

注意：设定多个配置时,以空格分隔开

对于复杂的配置，可以使用单引号包起来的json格式对象来设置

例子： cypress open --config &apos;{&quot;watchForFileChanges&quot;:false,&quot;testFiles&quot;:[&quot;**/*.js&quot;,&quot;**/*.ts&quot;]}&apos;

方式2：使用插件文件pluginsFile

方式3：export 环境变量

例子：export CYPRESS_VIEWPORT_WIDTH=800

注意：

1、环境变量的key都是以CYPRESS_作为前缀

2、环境变量的key会被自动规范化，右边的两种方式都是有效的：

1、export CYPRESS_pageLoadTimeout=100000

2、export CYPRESS_PAGE_LOAD_TIMEOUT=100000

3、环境变量的key跟cypress配置的key不匹配的话，将会当成Cypress.env()的一个常规变量来处理

Environment variables that do not match configuration keys will instead be set as regular environment variables for use in your tests with Cypress.env().

方式4：Cypress.config()

Cypress.config(&apos;pageLoadTimeout&apos;, 100000)

方式5：Test Configuration

cypress可以将具体的配置只应用到某个测试套件suite或者测试用例test中

例子：1、应用到suite中

子主题 1

例子：2、应用到single test中

子主题 1

查看Test Configuration支持的configuration：https://docs.cypress.io/guides/references/configuration.html#Test-Configuration

cypress解析配置的顺序

Default value

默认值

The configuration file

cypress.json

The Cypress environment file

cypress.env.json

这个配置文件需要自己创建，将会被cypress自动识别，这个文件会覆盖cypress.json的一些值

System environment variables

系统环境变量

Command Line arguments

命令行参数

Plugin file

插件文件

cypress编写和组织测试用例

基本的结构

cypress采用了mocha（https://mochajs.org/）的bdd的语法，可以完美适用于集成测试和单元测试，主要通过右边组件来编写和组装测试用例：

describe()

测试套件，可以嵌套，套件至少包含一个测试用例

context()

跟describe()的作用相同

it()

一条测试用例，specify()的作用跟it()的作用相同

before()

beforeEach()

afterEach()

after()

.only()

.skip()

举个例子：

子主题 1

断言方式

Cypress 的断言基于 Chai 断言库，并且增加了对 Sinon-Chai、Chai-jQuery 断言库的支持，其中就包括 BDD 和 TDD 格式的断言。 https://docs.cypress.io/guides/references/assertions.html#Chai

Chai断言库

BDD断言（expect/should)

常见的Chainer

not.equal

expect(name).to.not.equal(&apos;Jane&apos;)

deep.equal

expect(obj).to.deep.equal({ name: &apos;Jane&apos; })

be.a

expect(&apos;test&apos;).to.be.a(&apos;string&apos;)

include

expect([1,2,3]).to.include(2)

exist

expect(myVar).to.exist

lessThan(value)

expect(5).to.be.lessThan(10)

TDD断言

常见的Chainer

.equal(actual, expected, [message])

assert.equal(3, 3, &apos;vals equal&apos;)

.isNumber(value, [message])

assert.isNumber(2, &apos;val is number&apos;)

Chai-jQuery断言库

常见的Chainer

have.attr

have.css

have.css(&apos;background-color&apos;, &apos;rgb(0, 0, 0)&apos;)

have.id

have.id(&apos;foo&apos;)

have.text

have.text(&apos;I love testing&apos;)

contain

contain(&apos;text&apos;)

be.visible / be.hidden

常用断言：.should()

语法格式：

.should(chainers) .should(chainers, value) .should(chainers, method, value) .should(callbackFn)

注意：Chainer可以来自 Chai or Chai-jQuery or Sinon-Chai.

常见断言

长度断言

cy.get(&apos;li.selected&apos;).should(&apos;have.length&apos;,3)

类断言

cy.get(&apos;form&apos;).find(&apos;input&apos;).should(&apos;not.hava.class&apos;,&apos;disabled&apos;)

值断言

cy.get(&apos;textarea&apos;).should(&apos;have.value&apos;,&apos;poloyy&apos;)

文本内容

cy.get(&apos;a&apos;).parent(&apos;span.help&apos;).should(&apos;not.contain&apos;,&apos;click me&apos;)

元素是否可见

cy.get(&apos;button&apos;).should(&apos;be.visible&apos;)

元素是否存在

cy.get(&apos;#loading&apos;).should(&apos;not.exist&apos;)

元素状态

cy.get(&apos;:radio&apos;).should(&apos;be.checked&apos;)

针对css

cy.get(&apos;.completed&apos;).should(&apos;have.css&apos;,&apos;text-decoration&apos;,&apos;line-through&apos;)

cypress元素定位

id选择器

cy.get(&quot;#main1&quot;).click()

class选择器

cy.get(&quot;.btn&quot;).click()

属性选择器

cy.get(&quot;button[id=&apos;main2&apos;]&quot;).click()

nth-child(n)选择器

cy.get(&quot;ul&gt;li:nth-child(2)&quot;).click()

cypress常用命令Command

should

创建一个断言，会不断重试知道用例通过或者超时

and

是.should的别名

创建别名供以后使用

语法格式：

as()

使用@来调用，可在cy.get()或者cy.wait()中调用

例子：

给Dom元素起别名

it(&apos;disables on click&apos;, () =&gt; { cy.get(&apos;button[type=submit]&apos;).as(&apos;submitBtn&apos;) cy.get(&apos;@submitBtn&apos;).click().should(&apos;be.disabled&apos;) })

给route起别名

cy.route(&apos;PUT&apos;, &apos;users&apos;, &apos;fx:user&apos;).as(&apos;userPut&apos;) cy.get(&apos;form&apos;).submit() cy.wait(&apos;@userPut&apos;) .its(&apos;url&apos;).should(&apos;contain&apos;, &apos;users&apos;)

给cy.fixture()的数据起别名

cy.fixture(&apos;users-admins.json&apos;).as(&apos;admins&apos;)

check

选中元素，checkbox or radio.

例子： cy.get(&apos;[type=&quot;checkbox&quot;]&apos;).check() // Check checkbox element cy.get(&apos;[type=&quot;radio&quot;]&apos;).first().check() // Check first radio element

children

获取Dom子元素的集合

例子：cy.get(&apos;nav&apos;).children()

clear

清除input或者textarea文本区域的值

clearCookie

清除特定浏览器cookie

clearCookies

清除所有cookie

contains

获取包含特定文本的第一个Dom元素

例子： cy.get(&apos;.nav&apos;).contains(&apos;About&apos;) cy.contains(&apos;Hello&apos;)