Cypress 简介

• 基于 JavaScript 的前端测试工具，可以对浏览器中运行的任何内容进行快速、简单、可靠的测试
• Cypress 是自集成的，提供了一套完整的端到端测试，无须借助其他外部工具，安装后即可快速地创建、编写、运行测试用例，且对每一步操作都支持回看
• 不同于其他只能测试 UI 层的前端测试工具，Cypress 允许编写所有类型的测试，覆盖了测试金字塔模型的所有测试类型【界面测试，集成测试，单元测试】
• Cypress 底层协议不采用 WebDriver

Cypress 原理

Webdriver 运行的方式

• 大多数测试工具（如：Selenium/webdriver）通过在外部浏览器运行并在网络上执行远程命令来运行
• 因为 Webdriver 底层通信协议基于 JSON Wire Protocol，运行需要网络通信

Cypress 运行的方式

Cypress 和 Webdriver 方式完全相反，它与应用程序在相同的生命周期里执行

Cypress 运行测试的大致流程

运行测试后，Cypress 使用 webpack 将测试代码中的所有模块 bundle 到一个 js 文件中
然后，运行浏览器，并且将测试代码注入到一个空白页中，然后它将在浏览器中运行测试代码【可以理解成：Cypress 将测试代码放到一个 iframe 中运行】

Cypress 运行测试的技术流程

1. 每次测试首次加载 Cypress 时，内部 Cypress Web 应用程序先把自己托管在本地的一个随机端口上【如：http://localhost:65874】
2. 在识别出测试中发出的第一个 cy.visit() 命令后，Cypress 会更改本地 URL 以匹配你远程应用程序的 Origin【满足同源策略】，这使得你的测试代码和应用程序可以在同一个 Run Loop 中运行

Cypress 运行更快的根本原因

• Cypress 测试代码和应用程序均运行在由 Cypress 全权控制的浏览器中
• 且它们运行在同一个Domain 下的不同 iframe 中，所以 Cypress 的测试代码可以直接操作 DOM、Window Objects、Local Storages而无须通过网络访问

Cypress 稳定性、可靠性更高的原因

• Cypress 还可以在网络层进行即时读取和更改网络流量的操作
• Cypress 背后是 Node.js Process 控制的 Proxy 进行转发，这使得 Cypress 不仅可以修改进出浏览器的所有内容，还可以更改可能影响自动化操作的代码
• Cypress 相对于其他测试工具来说，能从根本上控制整个自动化测试的流程

Cypress 架构图

C++ 与 Cypress 集成概述

Cypress 主要用于前端自动化测试，而 C++ 是后端开发语言。两者结合通常涉及以下场景：

• 测试 C++ 应用的 Web 接口（如 REST API）。
• 通过 Cypress 验证 C++ 编译的 WebAssembly 模块。

---

方法 1：测试 C++ 后端 API

C++ 后端暴露 HTTP API 时，可用 Cypress 进行端到端测试。

步骤
编写 C++ 服务（例如使用 cpp-httplib）提供 REST API：

#include <httplib.h>
using namespace httplib;int main() {Server svr;svr.Get("/api/data", [](const Request& req, Response& res) {res.set_content("{\"value\": 42}", "application/json");});svr.listen("localhost", 8080);
}

在 Cypress 测试文件中调用 API：

describe('API Test', () => {it('fetches data from C++ backend', () => {cy.request('GET', 'http://localhost:8080/api/data').then((response) => {expect(response.body.value).to.eq(42);});});
});

注意
确保 C++ 服务在运行 Cypress 测试前启动。

方法 2：测试 WebAssembly 模块

若 C++ 代码编译为 WebAssembly（如通过 Emscripten），可用 Cypress 测试其前端集成。

步骤
编译 C++ 为 WebAssembly：

emcc -o wasm_module.js wasm_module.cpp -s EXPORTED_FUNCTIONS="['_add']"

在 HTML 中加载 WASM 模块：

<script src="wasm_module.js"></script>
<script>Module.onRuntimeInitialized = () => {window.add = Module.cwrap('add', 'number', ['number', 'number']);};
</script>

Cypress 测试验证功能：

describe('WASM Test', () => {it('calls C++ function via WASM', () => {cy.visit('index.html');cy.window().then((win) => {expect(win.add(2, 3)).to.eq(5);});});
});

---

方法 3：C++ 驱动 Cypress 执行

通过 C++ 程序调用系统命令启动 Cypress 测试（需 Node.js 环境）。

示例代码

#include <cstdlib>
int main() {system("npx cypress run --headless");return 0;
}

---

常见问题与优化

• 跨平台支持：C++ 编译需兼容目标平台（如 Windows 需 MinGW）。
• 调试技巧：结合 cy.log() 和 C++ 日志输出（如 std::cout）排查问题。
• 性能优化：并行运行 C++ 服务与 Cypress 测试（如 Docker 容器化）。

通过上述方法，可实现 C++ 与 Cypress 的高效协作，覆盖从后端到前端的自动化测试需求。

C#与Cypress的实践指南

C#通常用于后端开发，而Cypress是一个前端测试框架。虽然两者属于不同领域，但可以通过以下方式结合实践：

后端API测试

使用C#编写后端API，Cypress测试前端调用API的逻辑。C#示例代码：

[ApiController]
[Route("api/products")]
public class ProductsController : ControllerBase
{[HttpGet]public IActionResult GetProducts(){return Ok(new[] { "Product1", "Product2" });}
}

Cypress前端测试代码：

describe('API Tests', () => {it('Should fetch products', () => {cy.request('GET', '/api/products').then((response) => {expect(response.status).to.eq(200);expect(response.body).to.have.length(2);});});
});

数据库验证

C#处理数据持久化，Cypress验证前端显示：

public class ProductService
{public List<Product> GetAllProducts(){// 数据库查询逻辑}
}

Cypress测试：

it('Displays products from database', () => {cy.visit('/products');cy.get('.product-item').should('have.length.gt', 0);
});

组件测试

对于Blazor等前端框架：

@page "/counter"
<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button @onclick="IncrementCount">Click me</button>@code {private int currentCount = 0;private void IncrementCount() { currentCount++; }
}

Cypress测试