运行Cypress GitHub Action时无法访问localhost求助

结合你本地正常、GitHub Action环境异常的情况，以下是几个针对性的解决方法：

1. 修改Angular启动命令，绑定到0.0.0.0 #

ng serve默认仅监听localhost，在GitHub Action的容器环境里，不同进程间的localhost访问可能存在隔离问题。修改启动脚本，让应用绑定到0.0.0.0，允许容器内所有进程访问：

"start": "ng version && ng serve --disable-host-check --host 0.0.0.0 --port 4200"

同步更新Cypress配置中的baseUrl：

import { defineConfig } from "cypress";

export default defineConfig({
  e2e: {
    baseUrl: 'http://0.0.0.0:4200',
    setupNodeEvents(on, config) {
      // 自定义节点事件逻辑
    },
  },
});

2. 补全依赖安装步骤 #

你的Action流程缺少依赖安装环节，虽然Cypress Action会尝试处理，但显式执行安装能避免版本不一致或安装不完整的问题：

jobs:
  cypress-run:
    runs-on: ubuntu-22.04
    steps:
      - name: Checkout代码
        uses: actions/checkout@v3
      - name: 配置Node环境
        uses: actions/setup-node@v3
        with:
          node-version: '16.15'
          cache: 'npm' # 启用npm缓存，加快安装速度
      - name: 安装依赖
        run: npm ci # 使用ci命令确保依赖版本和lockfile一致
      - name: 运行Cypress测试
        uses: cypress-io/github-action@v5
        with:
          start: npm run start
          browser: chrome
          wait-on: 'http://0.0.0.0:4200'
          wait-on-timeout: 120 # 延长等待超时，避免Angular启动慢导致超时

3. 优化wait-on的等待逻辑 #

单纯等待端口开放不够，有时候应用启动了但页面还未就绪，改成等待页面返回200状态码：

wait-on: 'http-get://0.0.0.0:4200'

如果你的应用有专门的健康检查接口，也可以指向该接口，确保应用完全就绪后再执行测试。

4. 显式启用Chrome无头模式 #

在Ubuntu的GitHub Action环境中，Chrome必须以无头模式运行，虽然Cypress默认会处理，但显式指定能避免兼容性问题：

with:
  start: npm run start
  browser: chrome
  headless: true
  wait-on: 'http-get://0.0.0.0:4200'
  wait-on-timeout: 120

5. 增加日志排查细节 #

给Angular启动命令添加--verbose参数，确认应用的监听状态：

"start": "ng version && ng serve --disable-host-check --host 0.0.0.0 --port 4200 --verbose"

同时在Action中添加步骤，检查端口占用情况，确认Angular确实在监听指定端口：

- name: 检查4200端口占用
  run: lsof -i :4200 || netstat -tulpn | grep 4200

核心问题在于Angular在容器环境中的监听地址限制了Cypress进程的访问，调整监听地址+补全流程步骤即可解决问题。

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