使用 Cypress 进行 API 测试：第 1 部分 - 设置

大家好！

先决条件

Github

创建 Cypress 项目

创建我们的第一个测试

目标 API

大家好！

距离上次在这里写东西已经过去很久了。几天前，我在思考一些关于 REST API 自动化测试的有趣内容，想和大家分享一下。于是，我萌生了一个想法：

为什么不使用 Cypress 从头开始​​创建一个完整的 API 测试项目呢？我们可以使用 TDD 创建测试，进行所有必要的验证，然后将其放入 CI 流水线中！

所以，我们开始吧！

我会将这个项目分成三个部分，这样内容就不会太无聊。

• 第一部分：我们将建立项目并简要介绍集成测试。
• 第二部分：我们将只关注测试技术。
• 第三部分：我们将专注于将该项目放入Github Actions上的 CI 管道中。

但是我们为什么要使用 Cypress？

Cypress 是一个用户友好的测试框架，易于创建自动化测试，无需任何配置即可开始编写测试。它还包含您熟悉的所有单元测试工具。

使用 Cypress，您可以做到：

• e2e 测试
• 单元测试
• 组件测试
• API 测试
• 视觉回归测试
• 你甚至可以将它们全部组合起来

先决条件

我们要做的第一件事就是设置环境。以下是启动这个项目需要的一些准备工作：

• VSCode：https://code.visualstudio.com/download
• Git/Github：https://github.com
• NPM：https://www.npmjs.com/get-npm
• NodeJS：https://nodejs.org/en/download

Github

首先，我们在 GitHub 上创建一个仓库，它将负责存储和处理测试代码的版本控制。我们需要输入仓库名称、简短描述、README 文件以及 gitignore 文件：

之后，我们将在本地机器上克隆此存储库。首先，复制您的存储库地址：

然后在终端中输入 git clone 命令并粘贴你的仓库地址。在我的例子中，命令如下：

git clone https://github.com/murillowelsi/cypress-api-tutorial.git

在您的 VSCode 中打开克隆的存储库，让我们开始设置项目。

创建 Cypress 项目

现在我们将使用 npm 命令启动一个节点项目（默认设置）：

npm init -y

然后我们将 Cypress 作为开发依赖项安装在项目中：

npm i cypress -D

现在让我们将以下几行添加到 package.json 文件的脚本部分：

"scripts": {
     "cypress: open": "./node_modules/.bin/cypress open",
     "cypress: run": "./node_modules/.bin/cypress run --spec ** / *. spec.js"

package.json 看起来如下：

要启动 Cypress 项目，请运行以下命令：

npm run cypress:open

执行此命令后，将创建一个示例 Cypress 项目结构：

我们不会在本教程中使用这些示例，因此让我们删除整个示例文件夹：

rm -rf cypress/integration/examples/

清理 Integration 文件夹后，让我们继续下一步。

创建我们的第一个测试

在 Integration 中，我们将创建一个名为 —— 的文件，该test文件spec.js将被识别并执行为测试规范，然后我们将开始编写第一个测试。Mocha
为我们提供了以下测试组织结构：

describe('Mocha’s interface', () => {
  context('it provides a way to keep tests easier to read and organized.', () => {
    it('This is your test case', () => {
      expect(true).to.eq(true)
    });
  });
});

规范包含三个主要构建块，如上所示。这将使测试更容易阅读：

• describe()函数是 Mocha 中对测试进行分组的一种方法。
• context()功能是根据测试上下文对测试进行分组的另一个级别。
• it()函数用于以人类可读的方式放置标题来描述测试用例。

让我们保存 test.spec.js 文件并运行命令：

npm run cypress:run

我们还可以强制出现错误，看看它将如何在终端中显示：

describe('Mocha’s interface', () => {
  context('it provides a way to keep tests easier to read and organized.', () => {
    it('This is your test case', () => {
      expect(true).to.eq(false)
    });
  });
});

目标 API

我们将使用 Serverest API 项目作为测试目标。这个 API 是一个非常棒的项目，由Paulo Gonçalves提出，并由巴西开源社区维护，它使我们能够测试最常用的 HTTP 方法。

您可以在https://serverest.dev/查看文档。

现在，让我们创建一个名为 的新文件GETProdutos.spec.js，并使用路由中的 GET 动词对目标 API 进行第一次调用/produtos，以获取产品列表。
要发出 HTTP 请求，我们必须使用cy.request()函数，并传递method和url参数：

句法：

cy.request(method, url)

• method（字符串）：GET、POST、PUT、DELETE。如果未定义方法，Cypress 默认使用 GET 方法。
• url（字符串）：发出请求的 URL。

/// <reference types="cypress" />

describe('Products api', () => {
    context('GET /produtos', () => {
        it('should return a list with all products', () => {
            cy.request({
                method: 'GET',
                url: 'https://serverest.dev/produtos'
            })
                .should((response) => {
                    cy.log(JSON.stringify(response.body))
                });
        });
    });
});

该.should()函数的建模方式与 JavaScript 中 Promises 的工作方式完全相同。回调函数返回的任何内容都将成为新的主题，并流入下一个命令。
将函数传递给.should()可以让你对已生成的主题进行多个断言。目前我们不会进行任何断言，我们只会使用 将结果显示在屏幕上cy.log()。

cypress:open这次我们运行命令，直接在浏览器中检查结果：

npm run cypress:open

将显示以下窗口。然后单击要运行的测试规范：

Cypress 将打开浏览器，运行测试并在屏幕上显示结果：

最后，让我们在 it() 函数中添加一些断言，这样它就变成了真正的测试。

为了验证我们想要的状态代码实际上是 200，请添加以下行：

expect(response.status).to.eq(200)

直接在浏览器中访问产品端点（https://serverest.dev/produtos）以查看我们可以在响应主体中做出哪些类型的断言。

我们还可以说，我们期望“quantidade”键始终为 2，因为在 ServeRest 项目中，注册数据每天都会被删除。因此，produtos 数组的大小也应为 2。

添加以下两个验证：

expect(response.body.quantidade).to.eq(2)
expect(response.body.produtos.length).to.be.eq(2);

作为最后的验证，我们还可以说产品数组内的对象必须包含键“名称”、“价格”、“描述”、“数量”、“_id”。

expect(response.body.produtos[0]).to.have.all.keys(
  'nome', 'preco', 'descricao', 'quantidade', '_id'
)

我们的测试将如下所示：

/// <reference types="cypress" />

describe('Products api', () => {
    context('GET /produtos', () => {
        it('should return a list with all products', () => {
            cy.request({
                method: 'GET',
                url: 'https://serverest.dev/produtos'
            })
                .should((response) => {
                    expect(response.status).to.eq(200)
                    expect(response.body.quantidade).to.eq(2)
                    expect(response.body.produtos.length).to.be.eq(2);
                    expect(response.body.produtos[0]).to.have.all.keys(
                      'nome', 'preco', 'descricao', 'quantidade', '_id'
                    )
                });
        });
    });
});

如果我们再次运行测试，我们将看到所有断言都成功通过。

成功了！我们使用 Cypress 编写了第一个 API 测试。

我们不应该忘记将我们的代码发送到 Github，毕竟我们想要保存和版本化项目。

本文的目的不是向您展示如何使用 git，而是让我们看一些可以帮助您将代码推送到 Github 的命令。

让我们在.gitignore文件中添加一些我们不想发送到远程存储库的内容：

# Dependency directories
node_modules/
videos/
screenshots/
package-lock.json

在终端上运行命令git add将所有文件添加到暂存区。

git add .

使用 git status 显示要提交的更改文件列表。

git status

然后运行，git commit它将创建更改的快照并将其保存到 git 目录。我们使用-m参数向提交添加一条消息，描述更改的内容。

git commit -m "First cypress project commit"

最后，我们将使用将更改从本地存储库推送到远程存储库git push。

git push origin main

如果我们检查 Github 上的存储库，我们将看到在主分支中所做的所有更改：

这是我的 GitHub 存储库的链接，以防您想查看：

https://github.com/murillowelsi/cypress-api-tutorial

好了，我们刚刚完成了我想与大家分享的系列文章的第一部分。在下一篇中，我们将重构这个测试项目，使其更加可靠和健壮。

下次再见！

那么，您觉得怎么样？在创作项目时，您有什么特别之处吗？

留下你的评论！谢谢！