GitHub自动评分Angular前端测试失败：无法加载localhost页面

可能的原因及修复步骤 #

• CI环境中前端服务未正确启动
  本地运行时你手动启动了Angular服务，但GitHub Actions工作流里可能遗漏了启动服务的步骤，或者服务还没完全就绪就触发了测试。

  • 检查.github/workflows下的配置文件，确保包含启动Angular服务的命令，并且让服务后台运行后等待就绪：

    steps:
      - name: 安装依赖
        run: npm install
      - name: 启动Angular服务
        run: ng serve --port 4401 &
      - name: 等待服务就绪
        run: npx wait-on http://localhost:4401
      - name: 执行前端测试
        run: ng test --watch=false
    

• 测试配置的目标地址错误
  检查前端测试配置文件（比如angular.json的test节点、protractor.conf.js），确认测试请求的地址是http://localhost:4401，没有拼写错误。

  • 示例protractor.conf.js配置：

    exports.config = {
      baseUrl: 'http://localhost:4401/',
      // 其他配置项...
    };
    

• CI环境localhost解析异常
  部分CI环境对localhost的解析逻辑和本地不同，尝试把测试配置、启动命令里的localhost替换成127.0.0.1，用http://127.0.0.1:4401来访问服务。

• 服务启动超时
  如果Angular服务启动较慢，CI可能在服务就绪前就执行了测试。可以延长等待时间，或者用wait-on工具确保服务完全启动后再跑测试，参考第一个步骤的配置。

额外排查建议 #

• 查看GitHub Actions的运行日志，确认服务启动步骤是否有报错（比如依赖安装失败、端口被占用）。
• 在工作流中添加curl http://localhost:4401或wget http://localhost:4401的步骤，提前验证服务是否可达。

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