如何用e2e快速测试React受控组件表单、无限滚动与虚拟列表实战指南【免费下载链接】e2eNext generation e2e testing framework for web and mobile apps.项目地址: https://gitcode.com/GitHub_Trending/e2e6/e2ee2e是一个开源的下一代端到端e2e测试框架支持 Web 和移动应用。你用自然语言描述测试目标AI agent 就能驱动应用完成操作再用定位器和断言检查结果——本指南将带你实战测试 React 受控组件中最头疼的三类场景登录表单、无限滚动和虚拟列表 为什么React受控组件测试总是假通过React 受控组件controlled component的状态由useState持有DOM 只是状态的投影。这带来两个经典陷阱直接改 DOM 无效往 input 里塞值不经过onChangeReact 下一次渲染就会把值改回去。虚拟列表里根本没有元素视口外的行不会被挂载到 DOM用选择器查询永远找不到。e2e 框架的 web 引擎 基于 Playwright 驱动浏览器所有输入都会触发真实的用户事件状态流转与真人操作一致针对滚动类场景它还提供scrollUntilVisible这类滚动直到可见的原语无需手动计算偏移量。快速上手3分钟跑通第一个React表单测试项目内置了 web-benchmark 示例包含 40 个 React 场景和配套测试是最快的学习方式git clone https://gitcode.com/GitHub_Trending/e2e6/e2e cd e2e/apps/web-benchmark pnpm install pnpm test配置文件见 e2e.config.ts声明了测试目录、Web 引擎、被测应用地址和测试账号credentials账号只声明一次所有用例通过credentials.user(benchmark)读取避免敏感信息散落各测试文件。实战一登录表单——受控输入与校验断言LoginForm.tsx 是一个典型受控组件email和password由useState管理valueonChange双向绑定校验失败时渲染红色错误提示。对应的 login-form.e2e.ts 覆盖了 4 个分支核心写法如下await screen.getByPlaceholder(Email).fill(not-an-email); await screen.getByRole(button, Log in).tap(); await expect(screen.getByTestId(error-message)) .toHaveText(Enter a valid email address);三个要点fill代替 set 值e2e 的输入动作会触发 React 的合成事件受控状态正确更新不会改完就被重置。定位器优先级优先用getByRole/getByPlaceholder等语义定位器data-testid作为兜底——这正是 expect 参考文档 推荐的风格。断言状态切换登录成功后断言成功消息再点登出并断言toHaveValue()验证状态被完整重置而不仅是看起来成功了。实战二无限滚动——滚动到第138条再认领黄金票InfiniteScroll.tsx 模拟了一个信息流初始渲染 20 条滚到底部附近200px 内才触发 400ms 延迟加载。目标Golden Ticket藏在第 138 条。tests/infinite-scroll.e2e.ts 的精髓只有一行const feed screen.getByTestId(feed); await feed.scrollUntilVisible(claim);关键细节是滚动容器feed 是独立滚动容器而非页面本身所以把scrollUntilVisible挂在feed元素上框架自动处理滚动→等待懒加载→继续滚的循环。框架默认给了 30s 滚动预算足以覆盖 7 次懒加载实测约 4s慢机器也不用频繁调超时。滚动到位后照常断言claim.tap()再校验成功文案滚动与断言分离失败时能一眼定位是没滚到还是点了没反应。实战三虚拟列表——第4322行根本不在DOM里VirtualizedTable.tsx 是更硬的挑战5000 行数据窗口化渲染windowed视口外的行不存在于 DOM 中。用任何选择器查询 Golden Row 都是徒劳。tests/virtualized-table.e2e.ts 展示了标准解法const viewport screen.getByTestId(table-viewport); await viewport.scrollUntilVisible(claim, { timeout: SCROLL_TIMEOUT_MS }); await expect(rows.filter({ hasText: Golden Row })) .toHaveText(/^Row 4322/);三个值得借鉴的经验步长要小于视口高度每次滚动约 360px视口 480px 的 3/4保证没有任何行被跳过去。超时按机器翻倍设置本地实测约 70s 滚完CI 上设为 140s——超时应该失败在没滚到而不是耗尽整体测试预算。断言双向验证既断言目标行出现toHaveText(/^Row 4322/)也断言第 1 行已滚出toHaveCount(0)确认真的发生了滚动而非碰巧可见。进阶让AI帮你写测试用例除了手写定位器e2e 还支持 agent 模式用自然语言描述目标由 agent 驱动应用且下一步断言会验证 agent 的行为并录制动作下次运行直接重放、零模型调用直到应用真的变化。相关测试见 tests-agent 目录文档见 docs/agent-steps.mdx 和 docs/agents.mdx。总结场景核心API避坑要点受控表单filltoHaveText走真实事件断言状态重置无限滚动scrollUntilVisible挂在正确的滚动容器上虚拟列表scrollUntilVisible 正则断言步长 视口超时按机器放宽React 受控组件的 e2e 测试本质就是让状态真实流转 断言流转后的投影。掌握 apps/web-benchmark/tests/ 下这套确定性用例再配合 docs/web.mdx 的 API 参考基本可以覆盖生产项目中 90% 的表单与列表测试需求 【免费下载链接】e2eNext generation e2e testing framework for web and mobile apps.项目地址: https://gitcode.com/GitHub_Trending/e2e6/e2e创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考