GitHub Actions中Cypress E2E测试无法访问localhost:4200求助

我正在尝试使用Cypress和GitHub Actions为应用搭建E2E测试，本地测试运行正常，但推送到GitHub后测试失败。数据库与后端构建运行正常，但Cypress测试启动时无法访问localhost:4200（测试可正常交互数据库）。

失败测试的Action日志 #

Go to the homepage

1. "before each" hook for "should display the homepage"

0 passing (973ms)
1 failing

1. Go to the homepage
   "before each" hook for "should display the homepage":
   CypressError: cy.visit() failed trying to load:

http://localhost:4200/
We attempted to make an http request to this URL but the request failed without a response.
We received this error at the network level:
Error: connect ECONNREFUSED 127.0.0.1:4200
Common situations why this would fail:
you don't have internet access
you forgot to run / boot your web server
your web server isn't accessible
you have weird network configuration settings on your computer

对应的测试代码 #

describe('Go to the homepage', () => {
  beforeEach(() => {
    cy.visit('http://localhost:4200/');
  });
  it('should display the homepage', () => {
    cy.contains('app is running!');
    cy.get('[data-cy=header]');
    cy.get('[data-cy=footer]');
  });
});

GitHub工作流文件 #

name: End-to-end tests

on:
  push:
  pull_request:
    branches: [main, develop]

jobs:
  build-and-test:
    runs-on: ubuntu-latest
    services:
      mssql:
        image: mcr.microsoft.com/mssql/server:2022-latest
        env:
          ACCEPT_EULA: y
          MSSQL_SA_PASSWORD: **********
        ports:
          - "5014:1433"

    steps:
      - name: Checkout
        uses: actions/checkout@v3

      - name: Setup .NET Core
        uses: actions/setup-dotnet@v3
        with:
          dotnet-version: '8.0'

      - name: Install backend dependencies
        run: dotnet restore ./backend/backend.sln

      - name: Install EF Core CLI
        run: dotnet tool install dotnet-ef --global
        shell: bash
        working-directory: ./backend/backend

      - name: Build backend
        run: dotnet build ./backend/backend.sln --configuration Release --no-restore

      - name: Create Migration
        run: dotnet ef migrations add InitialCreate
        working-directory: ./backend/backend

      - name: Apply EF Core Migrations
        run: dotnet ef database update
        env:
          ConnectionString: "Server=localhost,5014;TrustServerCertificate=true;Database=database-1;User=sa;Password=**********"
        working-directory: ./backend/backend

      - name: Start backend
        run: dotnet run --project ./backend/backend/backend.csproj &

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '20.x'

      - name: Install frontend dependencies
        run: npm install
        working-directory: ./frontend

      - name: Cypress run
        uses: cypress-io/github-action@v6
        with:
          build: npm run build
          start: npm start
          wait-on: 'http://localhost:4200'
          working-directory: ./frontend

排查建议 #

• 延长前端服务等待时间：wait-on默认超时时间可能不足以让前端完全启动，可在Cypress步骤中添加wait-on-timeout: 120（单位秒），给服务更多启动缓冲时间。
• 确认前端实际监听端口：部分前端框架在端口被占用时会自动切换端口，可在工作流中添加步骤执行netstat -tulpn | grep 4200查看端口占用情况，或检查前端启动日志确认实际使用的端口。
• 确保后端服务完全就绪：在启动前端前，先等待后端健康接口可用。比如在Start backend步骤后添加：

  run: npx wait-on http://localhost:<后端端口>/health
  

• 检查前端构建日志：添加步骤输出前端构建过程的详细日志，确认npm run build无编译错误，避免构建失败导致服务无法启动。
• 稳定后端后台进程：使用dotnet run &启动后端可能因后续步骤执行导致进程意外终止，改为nohup dotnet run --project ./backend/backend/backend.csproj > backend.log 2>&1 &，确保后端持续运行。
• 强制前端绑定所有接口：如果是Angular项目，修改npm start命令为ng serve --host 0.0.0.0 --port 4200，确保服务监听所有网络接口，避免仅绑定本地回环导致无法访问。

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