e2e Web引擎深度指南Playwright驱动Chromium、Firefox与WebKit【免费下载链接】e2eNext generation e2e testing framework for web and mobile apps.项目地址: https://gitcode.com/GitHub_Trending/e2e6/e2ee2e 是一个面向 Web 与移动端的下一代端到端测试框架其 Web 引擎e2e-dev/web基于 Playwright 构建可同时驱动 Chromium、Firefox 与 WebKit 三大浏览器内核。本文带你快速上手这套 e2e 测试框架的浏览器引擎从 3 步跑通第一个测试到多浏览器并行策略再到 CDP 远程连接等进阶玩法一篇讲透。1分钟看懂e2e Web 引擎是什么与其他测试框架不同e2e 的核心不自带任何引擎——每个测试目标target在配置里声明由哪个引擎驱动浏览器目标就交给e2e-dev/web。它实现了公开的 e2e/engine 契约与移动设备引擎平级没有任何特权。这套 Web 引擎有 3 个核心卖点真浏览器测试通过 Playwright 驱动 Chromium、Firefox、WebKit覆盖绝大多数用户环境引擎可插拔Web 引擎、设备引擎走同一个契约defineEngine一套测试代码多端复用完整录制能力截图、Trace、视频录屏screencast内建失败复盘不靠猜。引擎入口在 packages/web/src/engine.ts核心的web()工厂函数会校验全部配置项浏览器名、视口、CDP 连接、请求头、鉴权等任何非法配置在加载配置时就报错而不是等到测试运行才炸。3步跑通第一个浏览器测试第 1 步安装引擎包npm install --save-dev e2e e2e-dev/web这个包对playwright-core做了精确版本锁定当前为 1.63.0保证引擎始终跑在它所测试过的 Playwright 上避免版本漂移带来的诡异问题。第 2 步声明测试目标在 e2e.config.ts 中把web()指定为引擎、把应用地址放进app.urlimport { web } from e2e-dev/web; export default { targets: [ { name: web, engine: web(), app: { url: http://localhost:3000 } }, ], } satisfies E2EConfig;⚠️ 注意分工目标target声明测什么app.url 必填引擎只负责怎么驱动。web()目标缺失app.url会直接报INVALID_CONFIG。第 3 步写测试import { test } from e2e-dev/web; import { expect } from e2e; test(dashboard loads, async ({ app, screen, browser }) { await app.open(/dashboard); await expect(browser).toHaveURL(/dashboard); await expect(browser).toHaveTitle(/Dashboard/); await expect(screen.getByRole(heading, Overview)).toBeVisible(); });浏览器怎么来缺失的浏览器会在每次运行开始时自动下载一次下载不计入测试超时预算。也可以在 CI 里作为独立步骤显式安装可缓存npx e2e-dev/web install chromium --with-deps--with-deps会顺带安装 Linux 精简容器缺失的系统库对 CI 环境尤其有用。5秒切换Chromium、Firefox、WebKit 怎么选浏览器是web()的一个选项默认chromium。切换只需改一个字符串{ name: firefox, engine: web({ browser: firefox }), app } { name: webkit, engine: web({ browser: webkit }), app }一个应用跑多个浏览器 多个 target这是官方推荐的写法见 docs/browser.mdxconst app { url: http://localhost:3000 }; export default { targets: [ { name: chromium, engine: web(), app }, { name: webkit-mobile, engine: web({ browser: webkit, viewport: { width: 390, height: 844 } }), app }, ], };上例顺便演示了视口viewport选项默认 1280×720这里改成 390×844 模拟 iPhone 布局——手机尺寸的测试从第一次渲染就是移动端布局不会先闪一下桌面版。选择建议浏览器典型用途chromium默认首选覆盖最大用户群也是唯一支持 CDP 远程连接的firefox验证 Gecko 内核的 CSS/JS 兼容性差异webkit覆盖 Safari 用户常配合小视口做移动端布局测试browser fixture 详解导航、网络、下载一站搞定引擎向每个测试贡献一个browserfixture隔离策略是每个 worker 一个浏览器、每个测试尝试attempt一个独立上下文天然互不污染。它的主要能力导航goto、reload、back、forward、waitForURL定位器locatorCSS/XPath、frameLocator进入 iframe、evaluate在页面内读状态️网络拦截route拦截请求mock API、waitForResponse等真实响应跨app.restart()依然生效Cookie 与对话框setCookies、onDialog处理alert/confirm/prompt下载waitForDownload把文件注册为测试产物方便断言与归档⌨️输入keyboard与mouse视口级输入。一个最常见的 mock 场景await browser.route(**/api/quote, (route) route.fulfill({ json: { cents: 4200 } })); await app.open(/checkout); await expect(screen.getByText($42.00)).toBeVisible();每个browser.*调用都会作为步骤被记录进报告断言失败时能精确回放。完整方法表、默认超时与错误码见 docs/reference/web.mdx。语义化定位优先screen查询自带 role/name/label/text/test-id 匹配并能穿透打开与关闭的 Shadow Root——Web Components 场景下这是 Playwright 原生做不到、而这套引擎内建补齐的能力实现见 packages/web/src/closed-shadow.ts。进阶指南CDP 远程连接与托管浏览器本地启动浏览器不是唯一方式引擎内建两条远程浏览器通道通道一connect直连 CDPengine: web({ connect: { cdpEndpoint: async () myCloudBrowserUrl() } })通过 Chrome DevTools Protocol 附着到远端 Chromium仅此浏览器支持cdpEndpoint是异步解析器每次 worker 初始化、以及断线后的每次尝试开始时都会重新调用。引擎结束时会解附着但不杀死远端进程——浏览器生命周期归宿主所有。通道二BrowserProvider托管浏览器租约connect缺少生命周期管理把BrowserProvider对象作为browser传入引擎就按需要时租、结束时还的方式管理浏览器覆盖所有退出路径按分钟计费的服务也不会白烧钱scope: worker默认每个 worker 槽租一个浏览器整轮运行复用scope: attempt每个测试尝试租一个全新浏览器绝对隔离。契约定义acquire/release/record/downloads见 packages/web/src/provider.ts示例 provider 见 docs/images 中的browser-provider.ts代码段。托管浏览器若提供实时观看窗口可配viewport: null让页面撑满整个窗口而非固定 1280×720。4个值得知道的引擎细节图标字体自动清洗Font Awesome 等图标字体的私有区字符\f090会从元素名称中剔除getByRole(button, Login)不会被一个图标 glyph 干扰inert 内容不可见带inert属性的元素如打开抽屉背后的内容对 AI Agent 完全不可见Agent 永远不会误点被遮住的控件语义读取超时自愈页面语义树读取超时时引擎会用一张新鲜视口截图恢复观测且先完成全页面含所有 frame 和 Shadow Root的敏感字段打码扫描保证 AI 看到的截图中密码等字段是打码的配置期严格校验userAgent与控制字符、locale必须是 BCP 47 语言标签、timezoneId必须是 IANA 时区名——全部在配置加载时拒绝错误信息还会提示你大概是想写 viewport 吧这类最近邻建议。参考资料与源码路径浏览器使用指南docs/browser.mdxWeb 引擎完整参考选项、fixture、错误码docs/reference/web.mdx引擎包说明packages/web/README.md引擎入口与配置校验packages/web/src/engine.tsPlaywright 交互面每 worker 一浏览器、每尝试一上下文packages/web/src/surface.ts托管浏览器租约契约packages/web/src/provider.ts可运行的 Next.js 示例含配置与测试examples/with-next/掌握以上内容你已经可以在这套 e2e 测试框架上多内核并行跑真实浏览器、mock 网络、处理对话框与下载、并把测试扩展到远程与托管浏览器环境。下一步建议阅读 docs/quickstart/ 了解 Agent 驱动测试让 AI 替你写操作脚本。【免费下载链接】e2eNext generation e2e testing framework for web and mobile apps.项目地址: https://gitcode.com/GitHub_Trending/e2e6/e2e创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考