Storybook测试运行器CI工作流执行超时失败求助

问题场景 #

为组件库配置了GitHub Actions工作流，每次push时自动运行UI测试，但执行到「Serve Storybook and run tests」步骤时，流程会一直卡住直到超时取消。本地用act执行、远程用GitHub Actions执行均出现相同问题。

工作流配置文件 #

name: "UI Tests"

on: push

jobs:
  interaction-and-accessibility:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repository
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "18.16.0"

      - name: Install dependencies
        run: npm install --legacy-peer-deps

      - name: Install Playwright
        run: npx playwright install

      - name: Build Storybook
        run: npm run build-storybook --quiet

      - name: Serve Storybook and run tests
        run: |
        npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
        "npx http-server storybook-static --port 6006 --silent" \
        "npx wait-on tcp:6006 && npm run test-storybook"

可能的解决方向 #

• 修复concurrently命令的缩进问题
  YAML多行字符串（|开头）要求后续行必须缩进，否则语法无效，会导致concurrently未正确执行而卡住。修正后的步骤代码：

  - name: Serve Storybook and run tests
          run: |
            npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
            "npx http-server storybook-static --port 6006 --silent" \
            "npx wait-on tcp:6006 && npm run test-storybook"
  

• 替换http-server为Storybook自带serve命令
  第三方静态服务器在CI环境可能存在兼容性问题，改用官方命令启动静态文件：

  - name: Serve Storybook and run tests
          run: |
            npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
            "npx storybook serve storybook-static --port 6006 --quiet" \
            "npx wait-on tcp:6006 && npm run test-storybook"
  

• 调整wait-on的等待目标
  避免仅监听端口导致的“端口占用但服务未就绪”问题，改为等待具体URL：

  - name: Serve Storybook and run tests
          run: |
            npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
            "npx http-server storybook-static --port 6006 --silent" \
            "npx wait-on http://localhost:6006 && npm run test-storybook"
  

• 增加日志排查
  去掉http-server的--silent参数，输出服务启动日志，确认服务是否正常运行：

  - name: Serve Storybook and run tests
          run: |
            npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
            "npx http-server storybook-static --port 6006" \
            "npx wait-on tcp:6006 && npm run test-storybook"
  

内容的提问来源于stack exchange，提问作者user.mokho