Web自动化测试：Cypress 测试框架概述

🍅 点击文末小卡片，免费获取软件测试全套资料，资料在手，涨薪更快

Cypress 测试框架概述

1.1 Cypress 默认文件结构

在Cypress安装完成后，其生成的默认文件目录如下所示：

1.1.1 Fixtures

Fixture 又称之为测试夹具 ，通常配合cy.fixture 命令使用，主要用于存储测试用例的外部静态数据 。其默认位置位于cypress\fixtures 中，也可以根据需要配置到其他目录。 Fixtures里面的静态数据通常存储在json文件中，而这部分数据通常是某个网络请求对应的响应部分，如HTTP状态码和返回值等。Fixture的应用场景通常为，当测试需要对某些外部接口进行访问并依赖于其返回值时，可以使用fixture而无需访问这些接口。

1.1.2 测试文件

测试文件就是对应的测试用例 ，一般位于cypress\integration 中，也可以根据需要配置到另一个目录中，通常为js文件 ，在Cypress中其他命令格式为：fileName.spec.js，支持的文件类型如下所示：

.js
.jsx
.coffee
.cjsx

1.1.3 Plugins

在Cypress中，测试代码是运行浏览器里面，提供了更加可靠的测试体验，但也存在明显的缺点，使得与浏览器之外进行通信更加困难。为解决这个问题，Cypress提供了一些插件，可以修改或扩展Cypress的内部行为 。插件一般位于cypress\plugins ，在每个测试文件运行之前，Cypress会自动加载该目录中的index.js文件。

1.1.4 Support

支持文件一般位于目录cypress\support 中，可以根据需要放置在其他目录中，其主要功能是放置可复用配置项 ，如底层通用方法、全局默认配置等。在每个测试文件运行前，Cypress会自动加载该目录中的index.js文件。

使用方法也非常简单，仅需要在cypress\support\index.js文件中添加**beforeEach()**函数即可。示例如下所示：

highlighter-hljs 复制代码

<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>

1.2 核心概念

1.2.1 核心参数配置

在第一次打开Cypress Test Runner后，cypress.json将会创建，目录与Cypress同级。该文件主要用于保存所有支持的自定义配置 ，在配置了录制和测试项目后，则projectId将会被保存至cypress.json文件中。

用户可以通过参数来定义所使用的配置文件，参数为--config-file

1.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	用于监测文件变化，若有变化，则自动重新运行该用例

1.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

1.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的目录

1.2.1.4 截图

配置项	默认值	描述
screenshotOnRunFailure	true	测试用例运行失败后将进行截图
screenshotsFolder	cypress/screenshots	在测试用例运行失败或cy.screenshot()命令触发截图，用于保存这些截图的目录

1.2.1.5 视频

配置项	默认值	描述
videoCompression	32	设置视频的压缩比，设置为false关闭压缩或0~51，数字越低，视频质量越好，文件越大
videosFolder	cypress/videos	在Cypress run运行期间，用于保存video的目录
video	true	是否启用视频功能
videoUploadOnPasses	true	是否启用在用例运行通过后，上传视频至Dashboard，仅适用于录制项目，如果关闭该功能，则仅上传运行失败的视频

1.2.1.6 视图

配置项	默认值	描述
viewportHeight	660	测试视图下待测试应用程序的默认高度，单位为pixels，可使用cy.viewport()命令覆盖
viewportWidth	1000	测试视图下待测试应用程序的默认宽度，单位为pixels，可使用cy.viewport()命令覆盖

更多自定义选项，可查阅官方文档，地址为：Configuration in Cypress | Cypress Documentation

1.2.1.7 命令行

除了使用配置文件进行配置以外，也可以使用命令行进行设置以下各个参数，如下所示：

highlighter-hljs 复制代码

<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>

1.2.1.8 Cypress.config()

除了直接在cypress.json文件中更改配置之外，也可以通过Cypress.config()去获取或覆盖某些配置项。其基本使用方法如下所示：

highlighter-hljs 复制代码

<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>

示例代码如下所示：

highlighter-hljs 复制代码

<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>

运行结果如下所示：

1.2.2 用例结构

Cypress是建立在Mocha 和Chai 之上，因此同时支持Chai的BDD 和TDD两种风格。如果你熟悉JavaScript风格的代码，那么在Cypress中写测试用例是很容易上手的。

Mocha是一款适用于Node.js和浏览器的测试框架，可使用异步测试变得简单灵活。

Cypress的测试风格继承于Mocha，提供了describe() 、context() 、it() 、**specify()**四个关键字，对于一条可执行的测试而言，必须包含以下两个组成部分:

describe() 和**context()**等效，均表示一个测试套件或测试集
it() 和**specify()**等效，均表示一个测试用例

示例如下所示：

highlighter-hljs 复制代码

<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>

最终的运行结果如下所示：

更多测试用例的组织和编写会在后续详细讲解

1.2.3 重试机制

重试是Cypress一个非常重要的功能，在了解重试的概念后，有助于写出更加健壮的测试。

1.2.3.1 命令和断言

命令和断言是两种在Cypress中测试常用的两种方法，示例如下所示：

highlighter-hljs 复制代码

<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>

最终的运行结果如下所示：

让我们一起来看看最后一行的命令和断言，如下所示：

highlighter-hljs 复制代码

<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的这种自动重试功能避免了在测试代码中出现硬编码的等待。使测试代码更加健壮。

1.2.3.2 多重断言

在日常测试中，有时候需要对一个数据进行多次断言，Cypress提供一种方法叫多重断言 ，其定义为：单个命令后跟多个断言 。在断言时，Cypress将按顺序重试每个命令，即当第一个断言通过后，在进行第二个断言时仍会重试第一个断言。当第一和第二个断言都通过后，在进行第三个断言，仍然会重试第一和第二个断言，依此类推。来看看以下示例：

highlighter-hljs 复制代码

<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。在测试过程中，如果第二个断言失败了，则第三个断言不会执行，如果第二个断言执行通过，整个命令还未超时，在执行第三个断言前，会再次重试第一个和第二个断言。

修改代码使得第二个断言出现失败，代码如下所示：

highlighter-hljs 复制代码

<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>

在第二个断言运行失败后，第三个断言则不会被执行。在执行命令超时后，会在运行页面显示第一个断言执行成功，第二个断言执行失败，如下图所示：

1.2.3.3 重试条件

Cypress并不会重试所有命令 。当命令可能改变待测应用程序的状态时，则将不会进行重试操作（例如.click()命令）。Cypress仅会重试查询DOM的命令，例如cy.get()、.find()、.contains()等等。

如果需要查询更多重试的命令，可查阅API文档中Assertions文档https://docs.cypress.io/guides/references/assertions

重试的超时时间默认为4s ，也可通过defaultCommandTimeout进行设置。

1.2.3.3.1 增加超时时间

我们也可以通过修改所有命令的超时时间，例如，将全局的默认超时时间设置为10s，如下所示：

highlighter-hljs 复制代码

<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 }**，而更加灵活的控制各个命令的超时时间，示例如下所示：

highlighter-hljs 复制代码

<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，运行结果如下所示：

1.2.3.3.2 禁用重试

如果将超时时间设置为0，其本质上是禁用重试机制，示例如下所示：

highlighter-hljs 复制代码

<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>

最后感谢每一个认真阅读我文章的人，礼尚往来总是要有的，虽然不是什么很值钱的东西，如果你用得到的话可以直接拿走：

这些资料，对于做【软件测试】的朋友来说应该是最全面最完整的备战仓库，这个仓库也陪伴我走过了最艰难的路程，希望也能帮助到你！凡事要趁早，特别是技术行业，一定要提升技术功底。