在 “Fixture 和集成测试” 一课中，我们简要讨论了组织测试文件的不同方式：

• 按功能组织
• 按组件组织
• 按不同页面组织（这是我们本课程将采用的方法）
• 组织到你感觉设置舒适为止

在本课中，我们将学习一种易于实现但功能强大的方法来组织单个 spec 文件。

这种方法极大地提升了测试用例的可读性，同时使它们能够在整个应用中轻松复用。

该方法将测试用例划分为不同的步骤。

将测试组织为不同步骤

如前所述，我们将通过测试 Cypress 自己的网站 cypress.io 来展示 Cypress 的强大功能。假设我们希望从首页开始，并验证以下内容：

• Cookie 政策横幅按预期显示。
• 页面上存在视频和功能区域。
• 轮播图能正常工作。

为此，我们在“integration”文件夹中有一个名为 home.js 的文件，其中包含以下测试用例：

确保编写有意义的测试用例，以便你能立即知道它们的测试目标。通常的做法是使用 should 语句开头，以明确应用程序应有的行为。

在每个 it 用例的回调函数中，我们可以编写实际的验证逻辑。但为了使每个测试更易理解，我们可以使用函数导出-导入的方式，将每个验证拆分为命名的步骤：

1import {
2    verifyCarouselPresence,
3    clickOnNextButton,
4    clickOnPreviousButton
5} from '../steps/carousel'
6
7describe('Homepage', () => {
8    it('Should have controllable carousels', () => {
9        verifyCarouselPresence();
10        clickOnNextButton();
11        clickOnPreviousButton();
12    });
13});

只需快速浏览，我们就能清楚地了解该测试的意图：

• 验证轮播图是否存在
• 尝试通过“下一页”按钮进行导航
• 尝试通过“上一页”按钮进行导航

对于这些函数，我们可以在 cypress 文件夹内创建一个名为 steps 的独立目录，根据共同的功能将不同的步骤分组：

例如，我们可以为轮播图相关功能创建一个 carousel.js 文件，用于导出上述函数。