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 运行测试的技术流程
- 每次测试首次加载 Cypress 时，内部 Cypress Web 应用程序先把自己托管在本地的一个随机端口上【如：http://localhost:65874】
- 在识别出测试中发出的第一个 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测试
