Leptos islands_router 示例的 Playwright 端到端测试实战客户端导航回归覆盖【免费下载链接】leptosBuild fast web applications with Rust.项目地址: https://gitcode.com/GitHub_Trending/le/leptos本篇技术指南围绕 examples/islands_router/e2e/README.md 展开讲解 Leptos 仓库中islands_router示例如何通过 Playwright 对其岛屿路由islands router的客户端导航行为进行端到端验证。读完本文你将掌握该 e2e 测试的完整运行流程、Playwright 配置要点、两个核心导航用例的断言设计以及它们针对的回归场景——从 Home 路由导航离开时Title/元数据组件在路由 body 中不渲染任何元素所引发的潜在问题。背景islands_router 示例与它要回归验证的问题islands_router是 Leptos 仓库中的一个实验性示例位于 examples/islands_router/README.md。从示例说明看它仅使用服务端渲染SSR不包含真正的岛屿组件却依然能在页面导航之间维持客户端状态其实现思路是借助 Leptos 静态类型化的视图树statically-typed view tree用客户端拿到的新 HTML 做极小代价的 diff 更新从而模拟出传统客户端路由CSR那种平滑的过渡体验。该示例的 e2e 测试目录 examples/islands_router/e2e/README.md 明确指出测试目标Playwright tests for the islands routers client-side navigation, including regression coverage for navigating away from the Home route, whoseTitle/metadata component renders no element in the route body.也就是说这套 e2e 测试有两个核心目的验证客户端导航client-side navigation用户点击导航链接后URL、页面标题、路由内容是否正确更新回归覆盖一个特定场景从 Home 路由导航离开。Home 路由的Title/元数据组件在路由 body 中不渲染任何 DOM 元素这要求路由切换逻辑必须正确处理当前路由渲染结果为空的情况否则切换过程中可能发生错误。这正是写这篇文章的价值所在——理解这套测试等于理解 Leptos 岛屿路由在边界条件下的正确性保障方式。运行 e2e 测试从启动服务到 Playwright 执行原文档给出了两段式运行流程。第一步从示例根目录启动 Leptos 服务cargo leptos serve该命令依赖cargo-leptos工具链会读取 Cargo.toml 中[package.metadata.leptos]的配置进行构建与热重载。其中几个关键配置项决定了服务地址与产物位置site-addr 127.0.0.1:3009服务监听地址与端口e2e 测试的baseURL必须与此一致reload-port 3001自动重载监控端口end2end-cmd npx playwright testcargo-leptos通过 Makefile 调用 e2e 时实际执行的命令end2end-dir e2e端到端测试目录bin-features [ssr]与lib-features [hydrate]服务端二进制与客户端WASM库分别启用的特性。第二步在 e2e 目录 examples/islands_router/e2e 内安装依赖并执行测试npm install npx playwright install chromium npx playwright testnpm install依据 package.json 安装playwright/test1.60.0、types/node与typescript等开发依赖npx playwright install chromium下载 Chromium 浏览器内核这是配置文件中唯一启用的浏览器项目最后npx playwright test运行 tests/navigation.spec.ts 中的全部用例。如果希望通过cargo make统一驱动整个流程可以复用 examples/cargo-make/playwright.toml 定义的任务模板——Makefile.toml 通过extend引用了../cargo-make/main.toml、../cargo-make/playwright.toml和../cargo-make/cargo-leptos-test.toml三份共享配置。Playwright 配置逐项解析playwright.config.ts 是本套 e2e 的配置中枢其关键字段如下配置项值说明testDir./tests测试用例目录即 tests/fullyParalleltrue允许用例间并行执行forbidOnly!process.env.DEV非 DEV 模式下禁止提交test.only防止 CI 误跑retriesprocess.env.DEV ? 0 : 2非 DEV 模式失败自动重试 2 次DEV 模式不重试workers1强制单 worker 串行执行保证服务端状态与路由切换的确定性reporterhtml不自动打开list生成 HTML 报告并输出列表式日志baseURLhttp://127.0.0.1:3009对应Cargo.toml中site-addr的服务地址traceon-first-retry首次失败重试时自动录制 trace便于排查projectschromiumDesktop Chrome仅测试桌面版 Chromium两点值得注意baseURL的端口3009与 Cargo.toml 中[package.metadata.leptos]的site-addr 127.0.0.1:3009严格对应二者一旦不一致测试将无法访问应用workers: 1则说明这套测试按串行设计避免并发请求干扰服务端渲染与搜索接口的状态。两个导航回归用例的断言剖析测试主体在 tests/navigation.spec.ts文件顶部定义了一个collectErrors辅助函数监听浏览器控制台的error类型消息与pageerror未捕获的页面异常把错误文本收集到数组供用例结束时断言为空。这是对回归最直接的度量——路由切换过程中不允许出现任何 JS 错误。用例一Home → About计数器自增该用例navigation.spec.ts的验证路径为page.goto(/)打开首页断言页面标题为Home | My Contacts且input[typesearch]搜索框可见点击nav中href/about的链接断言 URL 变为以/about结尾、About标题可见、页面标题更新为About | My Contacts断言首页的搜索框not.toBeAttached()——Home 路由的内容搜索表单应被完整卸载验证路由切换真正替换了 DOM断言首页的提示文案Enter a search to begin viewing contacts.不可见点击.counter按钮断言其文本从Click Me: 0变为Click Me: 1——验证 About 页中Counter岛屿的响应式状态更新正常最终断言errors数组为空即全程无控制台错误。对应到被测代码 src/app.rsHome 组件通过use_query_map()读取 URL 查询参数q驱动Resource调用#[server]函数search检索 mock_data.json 中的联系人数据未输入查询时渲染提示文案其Title textHome | My Contacts/与搜索表单共同构成路由 body 的内容。用例二重复导航到 About回归核心第二个用例navigation.spec.ts是回归场景的强化版在到达 About 页后连续三次点击同一个/about链接再验证.counter按钮仍然toBeAttached()组件没有被错误销毁或重复挂载首页提示文案始终不可见计数器从Click Me: 0正常自增到Click Me: 1全程无错误。这个用例精准命中了文档描述的回归场景About 路由app.rs本身同样渲染Title textAbout | My Contacts/而Home 路由的Title/在 body 中不产生任何 DOM 元素。当岛屿路由以最小 diff的方式用新 HTML 更新视图树时如果实现无法妥善处理前一路由或新路由在 body 中渲染结果为空的边界情况重复导航就可能抛出异常或残留旧内容。连续三次点击正是为了反复触发该边界路径确保导航逻辑具备幂等性。被测应用路由、Title 与岛屿要理解测试断言的依据需要快速过一遍被测应用的实现路由结构app.rsRouter内包含导航栏Home、About两个链接与三条路由path!()、path!(user/:id)、path!(about)并带fallback|| Not found.服务端功能函数app.rssearch与delete_user均为#[server]标记的 server function直接读写mock_data.json说明整个数据层只存在于服务端客户端交互入口app.rs#[island]标记的Counter组件是岛屿形态的交互单元内部用RwSignal维护计数仅该组件需要在前端运行水合入口lib.rshydratefeature 下调用leptos::mount::hydrate_islands()完成岛屿水合而非全量水合。这与 Cargo.toml 中的特性开关一一对应leptos依赖启用了islands与islands-routerleptos_axum集成启用了islands-router。测试断言Home 的搜索框被卸载、About 的按钮保留并可交互本质就是在验证这种SSR 为主 岛屿水合 路由最小更新架构在导航场景下的正确性。深入阅读路径测试用例全文examples/islands_router/e2e/tests/navigation.spec.tsPlaywright 配置examples/islands_router/e2e/playwright.config.ts依赖清单examples/islands_router/e2e/package.json被测应用实现examples/islands_router/src/app.rs、examples/islands_router/src/lib.rs示例特性与站点配置examples/islands_router/Cargo.toml示例设计说明examples/islands_router/README.mdMakefile 任务模板examples/islands_router/Makefile.toml、examples/cargo-make/playwright.toml如需在自己的 Leptos 项目中复用这套方案可按以下清单操作启动cargo leptos serve并保持服务运行 → 在 e2e 目录执行npm install与npx playwright install chromium→ 确认playwright.config.ts的baseURL与Cargo.toml的site-addr一致 → 运行npx playwright test查看 HTML 报告与 list 日志。值得注意的是该示例当前在仓库中标注为 Work in Progress参见 examples/islands_router/README.md其岛屿路由属于实验性能力使用时建议锁定仓库当前版本的 API。【免费下载链接】leptosBuild fast web applications with Rust.项目地址: https://gitcode.com/GitHub_Trending/le/leptos创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考