Playwright测试在CI中报net::ERR_CONNECTION_REFUSED但本地正常

本地在http://localhost:3000运行Playwright测试完全正常，但在GitHub Actions流水线中测试失败，报错：

Error: page.goto: net::ERR_CONNECTION_REFUSED at http://localhost:3000/

环境信息 #

本地环境 #

• 系统：macOS
• Node.js版本：16
• Playwright版本：1.39.0

CI环境 #

• 平台：GitHub Actions
• Node.js版本：16
• Playwright版本：1.39.0

配置文件 #

playwright.config.js #

const { devices } = require('@playwright/test');

const baseURL = 'http://localhost:3000/en/';

const config = {
  testDir: './tests',

  timeout: 30 * 1000,
  expect: {
    timeout: 5000
  },

  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  reporter: 'html',
  use: {
    actionTimeout: 0,
    baseURL: baseURL,
    trace: 'on',
    locale: 'en-US'
  },

  projects: [
    {
      name: 'chromium',
      use: {
        ...devices['Desktop Chrome']
      }
    },

    {
      name: 'Chrome Half Size',
      use: {
        ...devices['Desktop Chrome'],
        viewport: { width: 800, height: 600 }, // Half size viewport
      },
    },

    {
      name: 'Mobile Chrome',
      use: { ...devices['Pixel 5'] },
    },

    {
      name: 'Mobile Safari',
      use: { ...devices['iPhone 12'] },
    },

  ],

  outputDir: 'test-results/',

  webServer: {
    command: 'yarn dev',
    timeout: 120 * 1000,
    reuseExistingServer: !process.env.CI,
    url: baseURL
    // port: 3000,
  }
};

module.exports = config;

GitHub Actions工作流文件 #

name: Playwright Tests
on:
  push:
    branches: [main, master, actions]
  pull_request:
    branches: [main, master, actions]
jobs:
  test:
    timeout-minutes: 60
    runs-on: ubuntu-latest

    services:
      mysql:
        image: mysql:8.0
        env:
          MYSQL_ROOT_PASSWORD: root
          MYSQL_DATABASE: cityflagv2
        ports:
          - 3306:3306
        options: --health-cmd="mysqladmin ping" --health-interval=10s --health-timeout=5s --health-retries=3

    env:
      DB_MONGO_URL: ${{ secrets.DB_MONGO_URL }}
      SECRET_COOKIE_PASSWORD: ${{ secrets.SECRET_COOKIE_PASSWORD }}
      SENTRY_URL: ${{ secrets.SENTRY_URL }}
      SENTRY_ORG: ${{ secrets.SENTRY_ORG }}
      SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
      SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
      BASE_URL: ${{ secrets.BASE_URL }}
      MYSQL_HOST: ${{ secrets.MYSQL_HOST }}
      MYSQL_DB: ${{ secrets.MYSQL_DB }}
      MYSQL_USER: ${{ secrets.MYSQL_USER }}
      MYSQL_PASS: ${{ secrets.MYSQL_PASS }}
      MYSQL_CONNECTION_LIMIT: 10
      
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 16
      - name: Verify DB exists
        run: mysql --host 127.0.0.1 --port 3306 -uroot -proot -e "SHOW DATABASES LIKE 'cityflagv2'"
      - name: Install dependencies
        run: npm config set "@fortawesome:registry" https://npm.fontawesome.com/ && npm config set "//npm.fontawesome.com/:_authToken" "${{ secrets.FONTAWESOME_NPM_AUTH_TOKEN }}" && yarn install
      - name: Lint
        run: yarn lint
      - name: Install Playwright Browsers
        run: yarn playwright install --with-deps
      - name: Run Playwright tests
        run: npx playwright test tests/index.spec.js
      - uses: actions/upload-artifact@v4
        if: ${{ !cancelled() }}
        with:
          name: playwright-report
          path: playwright-report/
          retention-days: 30

  deploy:
    needs: test
    name: Deploy
    runs-on: self-hosted
    steps:
      - run: cd /home/ubuntu/irysteams && git pull
      - run: cd /home/ubuntu/irysteams && yarn install
      - run: cd /home/ubuntu/irysteams && yarn prestart
      - run: pm2 reload name

已采取的排查步骤 #

• 确认服务器启动正常
• 添加等待时间确保服务器就绪后再运行测试
• 检查端口冲突，确保无其他进程占用3000端口
• 对比本地与CI的环境配置

观察结果 #

• 失败测试的网络追踪中地址栏为空
• 配置中的baseURL设置正确

疑问 #

为何CI流水线中会出现net::ERR_CONNECTION_REFUSED错误，而本地正常？仅Chromium浏览器测试通过，其余两个在page.goto("/")时失败。

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