升级至Rails 7后Rails/React应用E2E测试故障求助

问题背景 #

Rails 6.1升级至7.0.4后，使用React 18、Playwright 1.17.1的E2E测试全部失败，测试卡在page.goto步骤；本地测试服务器启动后，默认页面可正常访问，但/login页面无法加载，控制台报core-js语法错误，更新react-app-polyfill和Playwright未解决问题。

1. 定位core-js语法错误的根源 #

• 错误Uncaught SyntaxError: Unexpected token '.'出现在core-js模块中，说明polyfill加载存在版本冲突或目标环境不兼容：
  • 检查react-app-polyfill与core-js的依赖版本：执行npm ls core-js，确认是否存在多版本core-js共存的情况，若有则清理冗余依赖。
  • 移除react-app-polyfill，改用Rails 7原生的前端兼容配置：在Babel或Webpack配置中指定目标浏览器（如.browserslistrc添加last 2 versions, not dead），让core-js自动按需加载兼容代码，避免引入过高版本的ES语法。
  • 确认polyfill的加载顺序：确保polyfill代码在React、业务代码之前引入，避免未兼容的语法提前执行。

2. 验证Playwright环境兼容性 #

• 强制更新Playwright及对应浏览器：执行npx playwright install --force，确保浏览器版本与Playwright版本完全匹配（旧版Playwright的Chromium可能不支持React 18或Rails 7的前端语法）。
• 开启可视化调试：在测试配置中添加headless: false，打开浏览器窗口直接查看页面加载时的控制台错误，获取更直观的报错信息。
• 测试基础网络请求：在测试代码中添加简单的page.goto('https://www.google.com')并设置超时（{ timeout: 30000 }），若仍卡住，排查测试环境的网络代理、防火墙设置，或Playwright的初始化配置是否存在异常。

3. 排查Rails 7前端打包配置变化 #

• 检查前端打包工具迁移残留：若升级时从Webpacker切换至jsbundling-rails，清理config/webpack下的旧配置，确认config/jsbundling.js中的entry point、编译目标是否正确。
• 预编译测试环境资产：执行RAILS_ENV=test bin/rails assets:precompile，确保测试环境下的前端资源已正确编译，避免服务器启动时动态编译导致的加载延迟。
• 查看Rails测试日志：打开log/test.log，检查访问/login时的后端响应，确认是否存在路由匹配错误、控制器异常等问题。

4. 优化测试服务器启动逻辑 #

• 完善测试服务器启动脚本：在./script/e2e/test-server.sh中添加等待逻辑，直到服务器完全就绪（比如循环执行curl -s http://0.0.0.0:5000/ | grep -q "default page content"），再触发Playwright测试，避免测试提前执行导致的页面加载失败。
• 检查服务器端口占用：确认5000端口未被其他进程占用，避免测试服务器实际未正常启动。

内容的提问来源于stack exchange，提问作者Wes Creations