当为 Web 应用程序创建测试套件时，我们必须考虑网络连接失败的情况。任何依赖从服务器获取数据或需要向服务器发送数据的函数都会产生副作用。而副作用很容易导致测试失败。

我们的网络请求可能成功返回，也可能失败，或者介于两者之间。状态码太多，难以一一记住。为了解决这个问题，Cypress 引入了一个名为“fixtures”的文件夹。

---

什么是 fixtures？

Fixtures 是静态数据片段，可以在需要模拟网络请求时在测试用例中使用。

这样我们就可以消除任何副作用，并确保测试用例是确定性的。我们还可以用它们来与固定的数据集进行匹配，而不必让实际的测试用例变得杂乱。

配置 fixtures

以用户登录为例。我们在登录界面背后有一个测试用的用户，用于测试整个应用程序。我们希望先登录，但同时也希望确保服务器始终返回 200 状态码。取一个成功的响应结果，在“fixtures”文件夹中创建一个新文件，命名为 login.json：

1{
2    "userId": 1,
3    "token": "qrViFRJuHepMpvneaKJvdyGfsdmBW6"
4}

我们可以这样配置 fixtures：

• 取自服务器的成功（或在需要测试失败路径时的失败）响应。
• 在 “fixtures” 文件夹下创建一个新的 json 文件，存放该响应内容。

如果不想使用默认的 “fixtures” 文件夹，也可以在 cypress.json 中配置 fixtures 的位置：

1{
2    // 使用 `fixturesFolder` 标志自定义文件夹位置
3    "fixturesFolder": "cypress/fixtures"
4}

使用 fixtures

为了在测试用例中使用这些静态数据，我们使用 cy.fixture 命令，如下所示：

1cy.fixture(filePath); // 从指定位置加载静态数据
2cy.fixture('login'); // 从 "fixtures/login.json" 加载数据

注意，我们可以省略 fixtures 文件夹和 json 扩展名。

这将返回文件的内容：

1cy.fixture('user').then(userData => {
2    // 你可以通过 `userData` 访问 fixture 的内容
3    console.log('userData is:', userData);
4});

我们还可以将此 fixture 与 cy.intercept 结合使用，以确定性地测试应用程序中依赖于网络请求且已知会返回不同响应的各个部分：

1it('should log the user in', () => {
2    cy.intercept('/login', request => {
3        request.reply({ fixture: 'login.json' });
4    });
5
6    // perform the login action here
7    cy.url().should('include', 'dashboard');
8});

传递给回调函数的 request 变量代表被拦截的请求。

---

集成

“integration” 文件夹的目的是将所有测试用例集中在一个地方。默认情况下，我们的所有测试文件都位于此文件夹中：

Cypress 还会自动在此文件夹内创建一个 "examples" 文件夹，包含示例测试用例，以便我们可以查看常见场景的解决方法。

配置测试

然而，和大多数其他设置一样，这也可配置。如果你希望将测试文件放在其他位置，可以在 cypress.json 文件中配置 integrationFolder 属性：

1{
2    // 默认指向 `cypress` 目录下的 `integration` 文件夹
3    "integrationFolder": "cypress/integration"
4}

你可以选择使用原生 JavaScript、.jsx、.coffee 或 .cjsx 编写测试用例。完全由你决定。Cypress 支持所有这些格式。

它还内置支持 ES2015 和 CommonJS 模块，这意味着我们可以直接使用 require 或 import 语句导入包，无需额外配置。

组织测试文件

接下来的问题是：我们该如何组织测试用例？应该按组件或不同页面分开吗？还是按功能或不同层级分组？

答案是：没有对错之分；完全取决于你自己。将文件组织到让你感到舒适的结构即可。

在本课程中，我们将根据 cypress.io 的不同页面，将测试用例分别组织到不同的文件中。