e2e网络测试指南API请求拦截、Mock与文件下载处理完整教程【免费下载链接】e2eNext generation e2e testing framework for web and mobile apps.项目地址: https://gitcode.com/GitHub_Trending/e2e6/e2ee2e是一个面向 Web 和移动应用的下一代端到端e2e测试框架它把浏览器级网络测试做得像 UI 测试一样简单拦截 API 请求、Mock 接口数据、处理文件下载都只需要几行代码无需额外工具。本教程带你从零上手 e2e 网络测试3 步跑通 API 请求拦截与 Mock并学会验证文件下载行为。为什么需要 e2e 网络测试能力传统做法里接口测试如 Postman、Jest fetch和 UI 测试如 Playwright往往分裂在两套体系里数据准备靠脚本页面断言靠浏览器两边经常各说各话。e2e 的思路是让网络能力直接融入端到端测试同一个测试文件里既能操作页面、点击按钮也能拦截和 Mock 网络请求Mock 数据与 UI 断言联动——接口返回什么页面上就断言什么下载即工件——下载的文件自动登记为测试产物方便排查自然语言驱动——配合 agent还可以用一句提交订单并核对金额驱动整个流程e2e 由 TesterArmy 打造支持 WebChromium / Firefox / WebKit与移动端iOS / Android双引擎。一键启动初始化你的 e2e 项目网络测试依赖 Web 引擎e2e-dev/web只需一条命令初始化npx e2e initinit会引导你选择引擎web 或 mobile和模型提供方并生成配置文件与示例测试。完整的入门步骤见官方文档 quickstart.mdx。配置里为 Web 目标指定应用地址即可例如// e2e.config.ts import { web } from e2e-dev/web; import type { E2EConfig } from e2e; export default { targets: [ { name: chromium, engine: web(), app: { url: http://localhost:3000 } }, ], } satisfies E2EConfig;仓库内提供了开箱即用的完整示例Vite、Next.js、Expo、SwiftUI每个都是可跑通的独立项目可以直接参考examples/。请求拦截browser.waitForResponse 捕获真实 API 响应想验证点击按钮后接口真的返回了预期数据可以用browser.waitForResponse在触发动作之前开始等待响应const [response] await Promise.all([ browser.waitForResponse(**/api/orders), screen.getByRole(button, Place order).tap(), ]); expect(response.status).toBe(201);要点先等待、再触发。这样可以避免响应在等待注册前就已经发出。仓库中的 network.e2e.ts 展示了完整场景——点击Load users后断言接口返回 200、JSON 内容正确同时页面上也渲染出了数据。接口 Mockbrowser.route 让测试摆脱外部依赖browser.route会拦截匹配的请求让你返回固定数据测试从此不依赖真实后端await browser.route(**/api/users, (route) route.fulfill({ json: [{ name: Stubbed }] }), ); await screen.getByRole(button, Load users).tap(); await expect(screen.getByText(Stubbed)).toBeVisible();Mock 的几个实用细节方法作用route.fulfill(...)返回构造的数据JSON、文本、状态码等route.continue()放行请求直接发往真实网络route.fallback()交给下一个更早注册的 route 处理route.abort()中断请求模拟网络故障几个值得知道的机制⏱️ 每个 handler必须且只能调用上述四个方法之一最新的 route 最先执行方便在同一测试中层层覆盖 用browser.unroute(**/api/users)即可取消 Mock恢复真实请求——参考 network.e2e.ts 中Mock → 断言 → 取消 Mock → 再断言的完整链路️ 在 handler 内部使用的expect失败会失败整个测试Mock 逻辑本身也能被验证browser对象的实现源码在 browser.ts方法签名与超时行为详见参考文档 reference/web.mdx。文件下载处理browser.waitForDownload 一步到位验证导出 CSV这类下载入口传统方案往往要手动监听事件、再读磁盘。e2e 只需把下载触发动作包进回调const file await browser.waitForDownload(() screen.getByRole(link, Export CSV).tap(), );file.path是相对于本次尝试attempt产物目录的路径下载文件会自动登记为download工件测试报告里可以直接追溯。这个模式在 dialogs-frames.e2e.ts 与 Web 参考文档 browser.mdx 中都有示例。 小提示如果浏览器运行在远程托管服务上如 Kernel 托管浏览器需要引擎的下载支持配合相关说明见 integrations/kernel.mdx。进阶混合网络与 UI 断言除了纯网络测试e2e 还支持 API 测试与 UI 测试写在同一个文件、同一次运行中直接用fetch调app.baseUrl上的接口用值匹配器含 Zod 等 schema校验响应。详见 api-testing.mdx。当接口需要登录态时可以用自定义 fixture 把browser.cookies()随每个请求发送保持会话一致——同样在 api-testing.mdx 中有完整写法。总结e2e 把网络测试从另一套工具变成同一套测试的一部分browser.waitForResponse—— 拦截真实响应校验状态码与数据browser.route/unroute—— Mock、放行、中断想怎么控制就怎么控制browser.waitForDownload—— 文件下载自动成为测试工件想继续深入可以阅读 浏览器操作总览docs/browser.mdx API 测试指南docs/api-testing.mdx 网络测试示例apps/testbed/tests/network.e2e.ts Web 引擎方法参考docs/reference/web.mdx【免费下载链接】e2eNext generation e2e testing framework for web and mobile apps.项目地址: https://gitcode.com/GitHub_Trending/e2e6/e2e创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考