3 Cypress 测试框架概述
3.1 Cypress 默认文件结构
在Cypress安装完成后，其生成的默认文件目录如下所示：
3.1.1 Fixtures
Fixture又称之为测试夹具，通常配合cy.fixture命令使用，主要用于存储测试用例的外部静态数据。其默认位置位于cypress\fixtures中，也可以根据需要配置到其他目录。 Fixtures里面的静态数据通常存储在json文件中，而这部分数据通常是某个网络请求对应的响应部分，如HTTP状态码和返回值等。Fixture的应用场景通常为，当测试需要对某些外部接口进行访问并依赖于其返回值时，可以使用fixture而无需访问这些接口。
3.1.2 测试文件
测试文件就是对应的测试用例，一般位于cypress\integration中，也可以根据需要配置到另一个目录中，通常为js文件，在Cypress中其他命令格式为：fileName.spec.js，支持的文件类型如下所示：
- .js
- .jsx
- .coffee
- .cjsx
3.1.3 Plugins
在Cypress中，测试代码是运行浏览器里面，提供了更加可靠的测试体验，但也存在明显的缺点，使得与浏览器之外进行通信更加困难。为解决这个问题，Cypress提供了一些插件，可以修改或扩展Cypress的内部行为。插件一般位于cypress\plugins，在每个测试文件运行之前，Cypress会自动加载该目录中的index.js文件。
3.1.4 Support
支持文件一般位于目录cypress\support中，可以根据需要放置在其他目录中，其主要功能是放置可复用配置项，如底层通用方法、全局默认配置等。在每个测试文件运行前，Cypress会自动加载该目录中的index.js文件。
使用方法也非常简单，仅需要在cypress\support\index.js文件中添加beforeEach()函数即可。示例如下所示：
<span style="color:#333333"><span style="background-color:#ffffff"><code class="language-javascript"><span style="color:#a6e22e">beforeEach</span>( <span style="color:#66d9ef">function</span> (){
cy.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">`Current Enviroment is <span style="color:#f8f8f2">${<span style="color:#66d9ef">JSON</span>.stringfy(Cypress.env())}</span>`</span>)
}
)
</code></span></span>3.2 核心概念
3.2.1 核心参数配置
在第一次打开Cypress Test Runner后，cypress.json将会创建，目录与Cypress同级。该文件主要用于保存所有支持的自定义配置，在配置了录制和测试项目后，则projectId将会被保存至cypress.json文件中。
用户可以通过参数来定义所使用的配置文件，参数为--config-file
3.2.1.1 全局配置项
以下为Cypress支持的常用自定义的全局配置及其默认值，如下所示：
| 配置项 | 默认值 | 描述 |
|---|---|---|
| baseUrl | null | URL前缀，通常与命令cy.visit()/cy.request()结合使用 |
| clientCertificates | [] | 客户端证书选项数组 |
| env | {} | 环境变量设置选项，任何支持的值均可 |
| numTestsKeptInMemory | 50 | 在内存中保存的快照和命令数据等数量，在运行测试时，若内存占用太高，可以减少该值 |
| port | null | Cypress使用的端口号，默认随机产生 |
| redirectionLimit | 20 | 在出现错误前，允许应用程序在测试运行时重定向的数量 |
| reporter | spec | 在Cypress运行时使用的的reporter |
| reporterOptions | null | reporter支持的配置选项 |
| watchForFileChanges | true | 用于监测文件变化，若有变化，则自动重新运行该用例 |
3.2.1.2 超时
超时是Cypress中的核心概念，所以必须了解，常见的超时参数如下所示：
| 配置项 | 默认值 | 描述 |
|---|---|---|
| defaultCommandTimeout | 4000 | 命令默认超时时间，单位为ms |
| execTimeout | 60000 | 在cy.exec()执行期间，等待系统命令完成执行的超时时间，单位为ms |
| taskTimeout | 60000 | 在cy.task()执行期间，等待任务完成执行的超时时间，单位为ms |
| pageLoadTimeout | 60000 | 在等待页面加载或cy.visit()/cy.go()/cy.reload()等命令触发其他页面加载事件的超时时间，单位为ms，网络请求受限于操作系统 |
| requestTimeout | 5000 | 在执行cy.wait()命令时，请求超时时间，单位为ms |
| responseTimeout | 30000 | 在执行命令cy.request()/cy.wait()/cy.fixture()/cy.getCookie()/cy.getCookies()/cy.setCookie()/ cy.clearCookie()/ cy.clearCookies/cy.screenshot()时的响应超时时间，单位为ms |
| slowTestThreshold | 10000 | 250 | 在Cypress run期间，运行较慢的测试用例在reporter中将会以桔黄色显示，通过该参数可进行单独设置E2E和组件测试超时时间，E2E默认超时时间为 10000ms，而组件测试为250ms，单位为ms |
3.2.1.3 目录和文件
Cypress支持自定义目录和文件，如下所示：
| 配置项 | 默认值 | 描述 |
|---|---|---|
| downloadsFolder | cypress/downloads | 在测试期间，默认的文件下载目录 |
| fileServerFolder | root project folder | 向服务器发送的应用程序文件目录 |
| fixturesFolder | cypress/fixtures | fixture默认目录，可更改默认值为false来禁用 |
| ignoreTestFiles | *.hot-update.js | 在运行期间，需要忽略的测试用例 |
| integrationFolder | cypress/integration | 测试用例所在目录 |
| pluginsFile | cypress/plugins/index.js | Plugins所在目录，可更改默认值为false来禁用 |
| screenshotsFolder | cypress/screenshots | 在测试用例运行失败或cy.screenshot()命令触发截图，用于保存这些截图的目录 |
| supportFile | cypress/support/index.js | 在测试加载之前要加载的文件 |
| testFiles | **/. | 要加载的测试文件 |
| videosFolder | cypress/videos | 在Cypress run运行期间，用于保存video的目录 |
3.2.1.4 截图
| 配置项 | 默认值 | 描述 |
|---|---|---|
| screenshotOnRunFailure | true | 测试用例运行失败后将进行截图 |
| screenshotsFolder | cypress/screenshots | 在测试用例运行失败或cy.screenshot()命令触发截图，用于保存这些截图的目录 |
3.2.1.5 视频
| 配置项 | 默认值 | 描述 |
|---|---|---|
| videoCompression | 32 | 设置视频的压缩比，设置为false关闭压缩或0~51，数字越低，视频质量越好，文件越大 |
| videosFolder | cypress/videos | 在Cypress run运行期间，用于保存video的目录 |
| video | true | 是否启用视频功能 |
| videoUploadOnPasses | true | 是否启用在用例运行通过后，上传视频至Dashboard，仅适用于录制项目，如果关闭该功能，则仅上传运行失败的视频 |
3.2.1.6 视图
| 配置项 | 默认值 | 描述 |
|---|---|---|
| viewportHeight | 660 | 测试视图下待测试应用程序的默认高度，单位为pixels，可使用cy.viewport()命令覆盖 |
| viewportWidth | 1000 | 测试视图下待测试应用程序的默认宽度，单位为pixels，可使用cy.viewport()命令覆盖 |
更多自定义选项，可查阅官方文档，地址为：https://docs.cypress.io/guides/references/configuration
3.2.1.7 命令行
除了使用配置文件进行配置以外，也可以使用命令行进行设置以下各个参数，如下所示：
<span style="color:#333333"><span style="background-color:#ffffff"><code class="language-kotlin">cypress <span style="color:#66d9ef">open</span> --config pageLoadTimeout=<span style="color:#ae81ff">30000</span>,baseUrl=https:<span style="color:#75715e">//www.surpass.com</span>
cypress run --config integrationFolder=tests,videoUploadOnPasses=<span style="color:#ae81ff">false</span>
</code></span></span>3.2.1.8 Cypress.config()
除了直接在cypress.json文件中更改配置之外，也可以通过Cypress.config()去获取或覆盖某些配置项。其基本使用方法如下所示：
<span style="color:#333333"><span style="background-color:#ffffff"><code class="language-scss"><span style="color:#75715e">// 获取所有config信息</span>
Cypress<span style="color:#a6e22e">.config</span>()
<span style="color:#75715e">// 获取指定config信息</span>
Cypress<span style="color:#a6e22e">.config</span>(name)
<span style="color:#75715e">// 更改指定config信息</span>
Cypress<span style="color:#a6e22e">.config</span>(name,value)
<span style="color:#75715e">// 设置多个config项</span>
Cypress<span style="color:#a6e22e">.config</span>(object)
</code></span></span>示例代码如下所示：
<span style="color:#333333"><span style="background-color:#ffffff"><code class="language-javascript"><span style="color:#a6e22e">describe</span>(<span style="color:#e6db74">"测试Cypress.config"</span>,<span style="color:#66d9ef">function</span>(){
<span style="color:#a6e22e">it</span>(<span style="color:#e6db74">"获取defaultCommandTimeout"</span>,<span style="color:#66d9ef">function</span>(){
cy.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">`defaultCommandTimeout value is:<span style="color:#f8f8f2">${Cypress.config(<span style="color:#e6db74">"defaultCommandTimeout"</span>)}</span>`</span>)
<span style="color:#75715e">// 设置参数选项值</span>
<span style="color:#a6e22e">Cypress</span>.<span style="color:#a6e22e">config</span>(<span style="color:#e6db74">"defaultCommandTimeout"</span>,<span style="color:#ae81ff">99999</span>)
cy.<span style="color:#a6e22e">log</span>(<span style="color:#e6db74">`defaultCommandTimeout value is:<span style="color:#f8f8f2">${Cypress.config(<span style="color:#e6db74">"defaultCommandTimeout"</span>)}</span>`</span>)
})
})
</code></span></span>运行结果如下所示：
3.2.2 用例结构
Cypress是建立在Mocha和Chai之上，因此同时支持Chai的BDD和TDD两种风格。如果你熟悉JavaScript风格的代码，那么在Cypress中写测试用例是很容易上手的。
Mocha是一款适用于Node.js和浏览器的测试框架，可使用异步测试变得简单灵活。
Cypress的测试风格继承于Mocha，提供了describe()、context()、it()、specify()四个关键字，对于一条可执行的测试而言，必须包含以下两个组成部分:
- describe()和context()等效，均表示一个测试套件或测试集
- it()和specify()等效，均表示一个测试用例
示例如下所示：
<span style="color:#333333"><span style="background-color:#ffffff"><code class="language-javascript"><span style="color:#a6e22e">describe</span>(<span style="color:#e6db74">'我是一个测试集'</span>, () => {
<span style="color:#a6e22e">it</span>(<span style="color:#e6db74">'测试用例-1'</span>, () => {
<span style="color:#a6e22e">expect</span>(<span style="color:#ae81ff">1</span>+<span style="color:#ae81ff">2</span>).to.<span style="color:#a6e22e">eq</span>(<span style="color:#ae81ff">3</span>)
});
<span style="color:#a6e22e">it</span>(<span style="color:#e6db74">'测试用例-2'</span>, () => {
<span style="color:#a6e22e">expect</span>(<span style="color:#ae81ff">3</span>-<span style="color:#ae81ff">2</span>).to.<span style="color:#a6e22e">eq</span>(<span style="color:#ae81ff">1</span>)
});
<span style="color:#a6e22e">it</span>(<span style="color:#e6db74">'测试用例-3'</span>, () => {
<span style="color:#a6e22e">expect</span>(<span style="color:#ae81ff">3</span>*<span style="color:#ae81ff">2</span>).to.<span style="color:#a6e22e">eq</span>(<span style="color:#ae81ff">5</span>)
});
});
</code></span></span>最终的运行结果如下所示：
更多测试用例的组织和编写会在后续详细讲解
3.2.3 重试机制
重试是Cypress一个非常重要的功能，在了解重试的概念后，有助于写出更加健壮的测试。
3.2.3.1 命令和断言
命令和断言是两种在Cypress中测试常用的两种方法，示例如下所示：
<span style="color:#333333"><span style="background-color:#ffffff"><code class="language-javascript"><span style="color:#75715e">/// <reference types="cypress" /></span>
<span style="color:#a6e22e">describe</span>(<span style="color:#e6db74">''</span>, () => {
<span style="color:#66d9ef">let</span> baseUrl=<span style="color:#e6db74">"https://example.cypress.io/todo"</span>
<span style="color:#a6e22e">it</span>(<span style="color:#e6db74">'测试用例-1'</span>, () => {
<span style="color:#75715e">// 一个命令 visit</span>
cy.<span style="color:#a6e22e">visit</span>(baseUrl);
<span style="color:#75715e">// 一个命令 get，一个断言 should</span>
cy.<span style="color:#a6e22e">get</span>(<span style="color:#e6db74">".header input"</span>).<span style="color:#a6e22e">should</span>(<span style="color:#e6db74">"have.class"</span>,<span style="color:#e6db74">"new-todo"</span>);
<span style="color:#75715e">// 三个命令 get 和 type</span>
cy.<span style="color:#a6e22e">get</span>(<span style="color:#e6db74">'.new-todo'</span>).<span style="color:#a6e22e">type</span>(<span style="color:#e6db74">'todo A{enter}'</span>).<span style="color:#a6e22e">type</span>(<span style="color:#e6db74">'todo B{enter}'</span>);
<span style="color:#75715e">// 一个命令 get，一个断言 should</span>
cy.<span style="color:#a6e22e">get</span>(<span style="color:#e6db74">'.todo-list li'</span>).<span style="color:#a6e22e">should</span>(<span style="color:#e6db74">'have.length'</span>, <span style="color:#ae81ff">4</span>);
});
});
</code></span></span>最终的运行结果如下所示：
让我们一起来看看最后一行的命令和断言，如下所示：
<span style="color:#333333"><span style="background-color:#ffffff"><code class="language-javascript"> cy.<span style="color:#a6e22e">get</span>(<span style="color:#e6db74">'.todo-list li'</span>).<span style="color:#a6e22e">should</span>(<span style="color:#e6db74">'have.length'</span>, <span style="color:#ae81ff">4</span>);
</code></span></span>以上命令和断言，是通过cy.get()命令查找页面的DOM，在找到与选择器匹配的元素，然后进行断言尝试，而现在很多WEB应用几乎都是异步的。以最后一行代码为例，Cypress不能在查询DOM元素（todo-list）的同时又去检查其元素个数是否为4个。因此在出现以下情况，就会出现问题，如下所示：
- 1.当运行命令或断言时，应用程序没有更新DOM时，怎么办？
- 2.当运行命令或断言时，应用程序正在等待后端返回响应，而页面暂时没有结果时，怎么办？
- 3.当运行命令或断言时，应用程序正在进行密集计算，而导致页面显示未及时更新时，怎么办？
以上几种情况，在测试过程中非常常见，一般处理办法在断言前，设置一个等待时间，但这个等待时间，在不同环境中还不能完全统一，还是会导致经常出错。而Cypress处理这种问题，则非常智能，如下所示：
在实际运行时，如果cy.get()命令之后的断言通过，则认为该命令成功执行。如果失败，则cy.get()命令将重新查询应用程序的DOM，再进行断言。如果失败，则再次执行cy.get()命令查询DOM，再进行断言。依此类推，直至断言成功或cy.get()命令超时为止。
正是因为Cypress的这种自动重试功能避免了在测试代码中出现硬编码的等待。使测试代码更加健壮。
3.2.3.2 多重断言
在日常测试中，有时候需要对一个数据进行多次断言，Cypress提供一种方法叫多重断言，其定义为：单个命令后跟多个断言。在断言时，Cypress将按顺序重试每个命令，即当第一个断言通过后，在进行第二个断言时仍会重试第一个断言。当第一和第二个断言都通过后，在进行第三个断言，仍然会重试第一和第二个断言，依此类推。来看看以下示例：
<span style="color:#333333"><span style="background-color:#ffffff"><code class="language-javascript"><span style="color:#75715e">/// <reference types="cypress" /></span>
<span style="color:#a6e22e">describe</span>(<span style="color:#e6db74">'多重断言示例'</span>, () => {
<span style="color:#66d9ef">let</span> baseUrl=<span style="color:#e6db74">"https://example.cypress.io/todo"</span>;
<span style="color:#a6e22e">it</span>(<span style="color:#e6db74">'演示用例-1'</span>, () => {
cy.<span style="color:#a6e22e">visit</span>(baseUrl);
cy.<span style="color:#a6e22e">get</span>(<span style="color:#e6db74">'.new-todo'</span>).<span style="color:#a6e22e">type</span>(<span style="color:#e6db74">'todo A{enter}'</span>).<span style="color:#a6e22e">type</span>(<span style="color:#e6db74">'todo B{enter}'</span>);
cy.<span style="color:#a6e22e">get</span>(<span style="color:#e6db74">'.todo-list li'</span>)
.<span style="color:#a6e22e">should</span>(<span style="color:#e6db74">'have.length'</span>,<span style="color:#ae81ff">4</span>)
.<span style="color:#a6e22e">and</span>((<span style="color:#f8f8f2">$li</span>) => {
<span style="color:#a6e22e">expect</span>($li.<span style="color:#a6e22e">get</span>(<span style="color:#ae81ff">2</span>).textContent,<span style="color:#e6db74">'first item'</span>).to.<span style="color:#a6e22e">equal</span>(<span style="color:#e6db74">'todo A'</span>)
<span style="color:#a6e22e">expect</span>($li.<span style="color:#a6e22e">get</span>(<span style="color:#ae81ff">3</span>).textContent,<span style="color:#e6db74">'second item'</span>).to.<span style="color:#a6e22e">equal</span>(<span style="color:#e6db74">'todo B'</span>)
});
});
});
</code></span></span>.and()断言是.should()的别名，它是.should()的自定义回调函数，包含两个expect()断言。
最终的运行结果如下所示：
上面代码共有三个断言，分别是should和两个expect。在测试过程中，如果第二个断言失败了，则第三个断言不会执行，如果第二个断言执行通过，整个命令还未超时，在执行第三个断言前，会再次重试第一个和第二个断言。
修改代码使得第二个断言出现失败，代码如下所示：
<span style="color:#333333"><span style="background-color:#ffffff"><code class="language-javascript"><span style="color:#75715e">/// <reference types="cypress" /></span>
<span style="color:#a6e22e">describe</span>(<span style="color:#e6db74">'多重断言示例'</span>, () => {
<span style="color:#66d9ef">let</span> baseUrl=<span style="color:#e6db74">"https://example.cypress.io/todo"</span>;
<span style="color:#a6e22e">it</span>(<span style="color:#e6db74">'演示用例-1'</span>, () => {
cy.<span style="color:#a6e22e">visit</span>(baseUrl);
cy.<span style="color:#a6e22e">get</span>(<span style="color:#e6db74">'.new-todo'</span>).<span style="color:#a6e22e">type</span>(<span style="color:#e6db74">'todo A{enter}'</span>).<span style="color:#a6e22e">type</span>(<span style="color:#e6db74">'todo B{enter}'</span>);
cy.<span style="color:#a6e22e">get</span>(<span style="color:#e6db74">'.todo-list li'</span>)
.<span style="color:#a6e22e">should</span>(<span style="color:#e6db74">'have.length'</span>,<span style="color:#ae81ff">4</span>)
.<span style="color:#a6e22e">and</span>((<span style="color:#f8f8f2">$li</span>) => {
<span style="color:#a6e22e">expect</span>($li.<span style="color:#a6e22e">get</span>(<span style="color:#ae81ff">2</span>).textContent,<span style="color:#e6db74">'first item'</span>).to.<span style="color:#a6e22e">equal</span>(<span style="color:#e6db74">'toda A'</span>)
<span style="color:#a6e22e">expect</span>($li.<span style="color:#a6e22e">get</span>(<span style="color:#ae81ff">3</span>).textContent,<span style="color:#e6db74">'second item'</span>).to.<span style="color:#a6e22e">equal</span>(<span style="color:#e6db74">'todo B'</span>)
});
});
});
</code></span></span>在第二个断言运行失败后，第三个断言则不会被执行。在执行命令超时后，会在运行页面显示第一个断言执行成功，第二个断言执行失败，如下图所示：
3.2.3.3 重试条件
Cypress并不会重试所有命令。当命令可能改变待测应用程序的状态时，则将不会进行重试操作（例如.click()命令）。Cypress仅会重试查询DOM的命令，例如cy.get()、.find()、.contains()等等。
如果需要查询更多重试的命令，可查阅API文档中Assertions文档https://docs.cypress.io/guides/references/assertions
重试的超时时间默认为4s，也可通过defaultCommandTimeout进行设置。
3.2.3.3.1 增加超时时间
我们也可以通过修改所有命令的超时时间，例如，将全局的默认超时时间设置为10s，如下所示：
<span style="color:#333333"><span style="background-color:#ffffff"><code class="language-lua">cypress run <span style="color:#75715e">--config defaultCommandTimeout=10000</span>
</code></span></span>以上这种方式可以修改全局的超时时间，但不推荐。相反，我们可以通过设置单个命令的超时时间{ timeout: ms }，而更加灵活的控制各个命令的超时时间，示例如下所示：
<span style="color:#333333"><span style="background-color:#ffffff"><code class="language-javascript"><span style="color:#75715e">/// <reference types="cypress" /></span>
<span style="color:#a6e22e">describe</span>(<span style="color:#e6db74">'多重断言示例'</span>, () => {
<span style="color:#66d9ef">let</span> baseUrl=<span style="color:#e6db74">"https://example.cypress.io/todo"</span>;
<span style="color:#a6e22e">it</span>(<span style="color:#e6db74">'演示用例-1'</span>, () => {
cy.<span style="color:#a6e22e">visit</span>(baseUrl,{<span style="color:#f92672">timeout</span>:<span style="color:#ae81ff">1000</span>});
cy.<span style="color:#a6e22e">get</span>(<span style="color:#e6db74">'.new-todo'</span>).<span style="color:#a6e22e">type</span>(<span style="color:#e6db74">'todo A{enter}'</span>).<span style="color:#a6e22e">type</span>(<span style="color:#e6db74">'todo B{enter}'</span>);
cy.<span style="color:#a6e22e">get</span>(<span style="color:#e6db74">'.todo-list li'</span>)
.<span style="color:#a6e22e">should</span>(<span style="color:#e6db74">'have.length'</span>,<span style="color:#ae81ff">4</span>)
.<span style="color:#a6e22e">and</span>((<span style="color:#f8f8f2">$li</span>) => {
<span style="color:#a6e22e">expect</span>($li.<span style="color:#a6e22e">get</span>(<span style="color:#ae81ff">2</span>).textContent,<span style="color:#e6db74">'first item'</span>).to.<span style="color:#a6e22e">equal</span>(<span style="color:#e6db74">'toda A'</span>)
<span style="color:#a6e22e">expect</span>($li.<span style="color:#a6e22e">get</span>(<span style="color:#ae81ff">3</span>).textContent,<span style="color:#e6db74">'second item'</span>).to.<span style="color:#a6e22e">equal</span>(<span style="color:#e6db74">'todo B'</span>)
});
});
});
</code></span></span>以上代码，设置访问网站的超时时间为1s，运行结果如下所示：
3.2.3.3.2 禁用重试
如果将超时时间设置为0，其本质上是禁用重试机制，示例如下所示：
<span style="color:#333333"><span style="background-color:#ffffff"><code class="language-javascript">cy.<span style="color:#a6e22e">get</span>(<span style="color:#e6db74">'.new-todo'</span>,,{<span style="color:#f92672">timeout</span>:<span style="color:#ae81ff">0</span>}).<span style="color:#a6e22e">type</span>(<span style="color:#e6db74">'todo A{enter}'</span>).<span style="color:#a6e22e">type</span>(<span style="color:#e6db74">'todo B{enter}'</span>);</code></span></span>最后感谢每一个阅读我文章的人，一点小心意，虽然不是啥值钱的，需要的话直接拿走：
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
