GitHub Actions中Cypress测试执行后出现localhost超时问题求助

问题根源 #

你的GitHub Actions工作流存在两个核心错误导致超时：

1. start参数配置错误：你把yarn start和yarn cy:run都写在start字段中，但yarn start是阻塞式命令（启动React开发服务器后会持续运行，不会主动退出），导致yarn cy:run无法正常触发；即便测试意外执行，服务器后续也可能因进程冲突或资源问题被终止，引发连接超时。
2. 冗余的根目录依赖安装：Setup yarn package步骤在根目录执行yarn init -y && yarn install，会干扰src目录下的依赖环境，可能导致React服务器启动异常。

修复方案 #

修改工作流配置，调整Cypress Action参数并清理冗余步骤：

name: On Push hook

on:
  push:
    branches:
      - '*'
      - '*/*'
      - '**'
      - '!prd'
      - '!tst'
      - '!dev'

permissions:
  id-token: write
  contents: read

jobs:
  validate-code:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3
        with:
          repository: ${{ github.repository }}
          token: ${{ secrets.GITHUB_TOKEN }}
      - name: Use Node.js 18.x
        uses: actions/setup-node@v3
        with:
          node-version: 18.x
      - name: Use .npmrc
        uses: bduff9/use-npmrc@v1.1
        with:
          dot-npmrc: ${{ secrets.ORG_NPMRC }}
      - name: Install dependencies
        run: |
          cd src 
          yarn install --frozen-lockfile
      - name: Lint
        run: |
          cd src
          yarn lint
      - name: TypeCheck
        run: |
          cd src
          yarn tsc
      - name: Build
        run: |
          cd src
          yarn build
      - name: Cypress run
        uses: cypress-io/github-action@v5
        with:
          install: false
          project: ./src
          working-directory: src
          # 仅保留启动服务器的命令，Cypress Action会自动运行测试
          start: yarn start
          # 等待服务器就绪，指定容器可访问的监听地址
          wait-on: 'http://0.0.0.0:3000'
          wait-on-timeout: 120
          # 自定义测试命令（如果你的cy:run有特殊参数）
          command: yarn cy:run
        env:
          EMAIL: xxxxxxx
          PASSWORD: xxxxxxx
          # 强制React服务器绑定到0.0.0.0，确保容器内可访问
          HOST: 0.0.0.0

关键修改说明 #

• 修正start参数：只保留yarn start，Cypress官方Action会自动等待服务器启动完成后，执行默认的cypress run（或通过command参数指定自定义测试命令）。
• 调整wait-on地址：将localhost改为0.0.0.0，GitHub Actions容器中，进程绑定到localhost可能无法被外部进程访问，绑定到0.0.0.0可确保Cypress正常连接。
• 移除冗余步骤：删除Setup yarn package，避免根目录依赖干扰src项目的运行环境。
• 添加HOST环境变量：强制React开发服务器绑定到0.0.0.0，解决容器内网络访问限制。

额外优化建议 #

如果测试不需要开发服务器热重载，可改用serve启动构建后的静态文件，稳定性更强：

1. 在src目录安装依赖：yarn add --dev serve
2. 修改Cypress Action的start参数为yarn serve -s build -l 3000
3. 保持wait-on为http://0.0.0.0:3000

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