Cypress 是一个为 Web 应用程序构建的强大的端到端测试框架。它旨在使测试变得简单可靠，使开发人员和 QA 工程师能够测试从简单交互到复杂用户工作流程的所有内容。借助 Cypress，您可以创建模拟用户操作的测试、验证前端行为并以最少的设置确保 UI 功能。

赛普拉斯有什么用途？

Cypress 主要用于 Web 应用程序中的端到端测试，但它对于前端环境中的集成和单元测试也很有效。以下是一些常见用例：

• 自动化用户流程：测试复杂的用户流程，例如身份验证、表单提交和电子商务交易。

• 测试响应式设计：Cypress 允许跨不同视口大小进行测试，使其成为响应式设计测试的理想选择。

• 回归测试：通过自动化测试用例，您可以快速验证新的代码更改是否没有引入错误。

• UI 组件测试：Cypress 可以与 Storybook 等工具一起使用来单独验证前端组件，确保它们在各种场景中按预期运行。

Cypress 提供了强大的仪表板和 CLI，可以无缝集成到 CI/CD 管道中，使其成为现代 Web 开发中自动化、持续测试的首选。

使用 Cypress 运行测试

测试可以通过两种主要方式在 Cypress 中运行：使用测试运行器 (GUI) 和命令行界面 (CLI)。

这是两种方法的快速指南：

使用测试运行器 (GUI)：

要与 Cypress Real World 应用程序交互使用 Cypress Test Runner，请按照以下步骤操作。该应用程序提供了赛普拉斯实际测试的可靠示例，以及用户注册、登录和交易流程的场景。

我们以 Cypress 的示例应用程序“Cypress Real World App”为例。

在本地设置并运行 Cypress Real World 应用程序：

这些是设置示例应用程序的初始步骤

git clone https://github.com/cypress-io/cypress-realworld-app
cd cypress-realworld-app
yarn

//run the app
yarn dev

打开赛普拉斯测试运行器：

现在，以交互模式打开Cypress Test Runner：

运行命令：

npx cypress open

这将启动 Cypress Test Runner GUI，您可以在其中查看并选择要运行的测试。

单击 E2E 后，您可以看到此仪表板，其中在 cypress/tests 下包含完整的测试列表。

让我们在 cypress/tests/ui/custom.spec.ts 下的目录中创建一个名为 custom.spec.ts 的新测试

describe("User Sign-up and Login", function () {
    beforeEach(function () {
      // Seed the database before each test
      cy.task("db:seed");

      // Intercept signup and login API calls
      cy.intercept("POST", "/users").as("signup");
      cy.intercept("POST", "/graphql").as("gqlRequests");
    });

    it("should redirect unauthenticated user to signin page", function () {
      cy.visit("/personal");
      cy.location("pathname").should("equal", "/signin");
    });

    it("should allow a visitor to sign-up, login, and logout", function () {
        const userInfo = {
          firstName: "Bob",
          lastName: "Ross",
          username: "PainterJoy90",
          password: "s3cret",
        };

      // Sign-up User
      cy.visit("/signup");

      cy.getBySel("signup-first-name").type(userInfo.firstName);
      cy.getBySel("signup-last-name").type(userInfo.lastName);
      cy.getBySel("signup-username").type(userInfo.username);
      cy.getBySel("signup-password").type(userInfo.password);
      cy.getBySel("signup-confirmPassword").type(userInfo.password);
      cy.visualSnapshot("About to Sign Up");
      cy.getBySel("signup-submit").click();
      cy.wait("@signup");

      // Login User
      cy.visit("/signin");
      cy.login(userInfo.username, userInfo.password);


      // Verify successful login
      cy.location("pathname").should("equal", "/");

1. Setup (beforeEach)：在每次测试之前，数据库都会以一致的状态开始，并且拦截用于注册和 GraphQL 请求的 API 调用以进行监控。

2. 测试：

* **Redirect for Unauthenticated User**: Checks if an unauthenticated user visiting a restricted page (`/personal`) is redirected to the `/signin` page.

* **Sign-up, Login**: A new user is signed up, logged in, and logged out. The test verifies the user can register, sign in by being redirected to `/signin`.

每项测试都能确保安全且用户友好的帐户管理的关键功能。

注意：尝试向此添加注销和用户名不正确的流程

从 CLI 运行测试：

在 CI 环境或批量测试执行中，CLI 提供了一种简化的方法。运行所有测试或指定单个测试文件：

npx cypress run

npx cypress run --spec "cypress/tests/ui/custom.spec.ts"

赛普拉斯的好处

赛普拉斯以其快速执行、易于设置和强大的测试功能而闻名。以下是一些主要好处：

• 实时重新加载和交互式测试：赛普拉斯通过在发生更改时重新加载测试来提供即时反馈，让开发人员立即了解应用程序的行为。

• Flake-Free 测试：凭借其独特的架构，Cypress 减少了测试中的不稳定因素，使您的测试结果更加可靠。

• 自动等待：Cypress 等待元素加载、响应和渲染，因此您不需要添加显式等待。

• 内置断言和模拟：Cypress 附带了一组丰富的断言和工具，用于模拟 API 响应和模拟用户交互。

就像 Cypress 通过自动化用户交互来支持高效的 E2E 测试一样，Keploy 通过专注于后端为测试带来了强大的维度。

Cypress 擅长验证前端和用户体验，而 Keploy 则通过自动生成和维护 API 测试来补充它，而无需额外的脚本。

Keploy 对于捕获现实世界的交互并将其转化为可执行测试特别有效，确保随着应用程序规模的扩大后端一致性和数据可靠性。

• 自动化测试平台：Keploy 专注于为后端服务自动生成测试，特别是 API 和数据库交互。

• 捕获和重放：Keploy 捕获真实世界的流量并在测试环境中重放，创建真实的测试用例。

• 无代码测试生成：专为轻松而设计，它无需自定义脚本即可生成测试。

使用 Keploy 进行 E2E 测试：

• 以 API 为中心的 E2E 测试：自动化后端组件的端到端测试，确保后端功能作为一个单元进行验证。

• 错误检测和重放：捕获 API 请求/响应、重放交互并尽早检测回归。

• 一致的数据验证：跟踪数据流中的响应和变化，确保跨部署的准确性。

• 无缝集成：轻松与 CI/CD 管道集成，帮助团队对后端变更进行自动化 E2E 检查。

这个领域有很多工具，每个工具都提供适合不同类型测试环境的功能，从 Puppeteer 中的浏览器特定测试到 Playwright 和 Selenium 中的跨浏览器兼容性。

选择正确的工具最终取决于您的测试需求和应用程序要求。

常问问题

Cypress可以用于后端测试吗？

Cypress 主要是一个前端测试工具。虽然它可以与后端 API 和模拟响应交互，但它并不是为广泛的后端测试而设计的。对于特定于后端的测试，Keploy 等工具可以通过为服务器端功能提供单元和集成测试功能来补充 Cypress。

Cypress支持跨浏览器测试吗？

是的，Cypress 支持 Chrome、Edge 和 Firefox。然而，与 Selenium 或 Playwright 等提供更广泛的跨浏览器兼容性的工具相比，它的支持有限。

Cypress 如何处理 API 测试？

Cypress 可以通过直接从测试代码发出 HTTP 请求来执行 API 测试。您可以使用 cy.request() 来验证 API 响应，从而可以轻松地在同一端到端测试框架中测试 API。

如何调试失败的赛普拉斯测试？

Cypress 默认提供详细的日志和屏幕截图，测试运行器允许您以可视方式与测试进行交互。您可以添加 .only 来隔离失败的测试，使用 cy.pause() 停止执行，并利用 Chrome DevTools 进行进一步调试。