Playwright与GitHub集成报错：supabaseUrl必填，求解决方案

问题根源 #

报错supabaseUrl is required本质是你的Next.js应用在CI环境启动时，无法读取到Supabase的必要环境变量，导致API路由初始化失败，进而触发WebServer启动失败，最终Playwright测试终止。

解决方案步骤 #

1. 在GitHub仓库配置Supabase密钥

将Supabase相关环境变量添加到GitHub仓库的Settings > Secrets and variables > Actions（Repository Secrets）中，需要添加的变量通常包括：

• NEXT_PUBLIC_SUPABASE_URL
• NEXT_PUBLIC_SUPABASE_ANON_KEY
• 若有其他Supabase相关密钥也一并添加

2. 更新GitHub Actions工作流文件

在你的Playwright测试工作流（如.github/workflows/playwright.yml）中，将仓库密钥注入为CI环境变量，确保Next.js能读取到：

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - name: 安装依赖
        run: npm ci
      - name: 安装Playwright浏览器
        run: npx playwright install --with-deps
      - name: 启动服务并执行测试
        env:
          NEXT_PUBLIC_SUPABASE_URL: ${{ secrets.NEXT_PUBLIC_SUPABASE_URL }}
          NEXT_PUBLIC_SUPABASE_ANON_KEY: ${{ secrets.NEXT_PUBLIC_SUPABASE_ANON_KEY }}
        run: npx playwright test

3. 调整Playwright配置文件

修改playwright.config.ts，确保Supabase服务先就绪，再启动Next.js，同时保证环境变量正确传递：

import { defineConfig } from '@playwright/test';
// 本地测试需要dotenv，先执行npm install dotenv --save-dev
import dotenv from 'dotenv';

const env = process.env.CI ? process.env : dotenv.config().parsed;

export default defineConfig({
  webServer: [
    {
      command: 'npx supabase start',
      url: 'http://127.0.0.1:54321/health', // 用Supabase的健康检查URL确保服务就绪
      reuseExistingServer: !process.env.CI,
      timeout: 120 * 1000, // 给Supabase足够的启动时间
    },
    {
      command: 'npm run build && npm run start',
      url: 'http://localhost:3000',
      reuseExistingServer: !process.env.CI,
      env: env, // 传递环境变量给Next.js
    },
  ],
  // 其他Playwright配置...
});

4. 验证Next.js变量读取逻辑

确保你的Supabase客户端初始化代码确实从环境变量读取值，比如在app/utils/supabase.ts中：

import { createClient } from '@supabase/supabase-js';

export const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
);

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