Playwright测试套件认证配置：globalSetup与setup project的正确用法？

核心结论 #

不需要同时配置globalSetup和setup project，优先用setup project方案——这是Playwright官方推荐的认证实现方式，比globalSetup更灵活、更贴合测试项目的依赖管理逻辑。

具体实现步骤（setup project 方案） #

1. 编写认证测试脚本 #

新建一个专门处理登录流程的测试文件，比如tests/auth.setup.ts，在里面完成登录并保存认证状态：

import { test as setup } from '@playwright/test';

// 指定保存认证状态的文件路径
const authFile = 'playwright/.auth/user.json';

setup('完成用户登录', async ({ page }) => {
  // 替换为你的Angular应用实际登录流程
  await page.goto('/login');
  await page.getByLabel('用户名').fill('测试账号');
  await page.getByLabel('密码').fill('测试密码');
  await page.getByRole('button', { name: '登录' }).click();
  
  // 等待登录完成（比如跳转到首页或出现用户标识）
  await page.waitForURL('/dashboard');
  
  // 将认证状态（Cookie、LocalStorage等）保存到文件
  await page.context().storageState({ path: authFile });
});

2. 修改Playwright配置文件 #

在playwright.config.ts中添加setup项目，并让所有测试项目依赖它，同时指定使用保存的认证状态：

import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  projects: [
    // 1. 新增setup项目，仅执行认证脚本
    {
      name: 'setup',
      testMatch: /auth\.setup\.ts/,
    },
    // 2. 配置Chrome测试项目，依赖setup并使用认证状态
    {
      name: 'chromium',
      use: {
        ...devices['Desktop Chrome'],
        storageState: 'playwright/.auth/user.json',
      },
      dependencies: ['setup'],
    },
    // 其他浏览器项目同理配置
    {
      name: 'firefox',
      use: {
        ...devices['Desktop Firefox'],
        storageState: 'playwright/.auth/user.json',
      },
      dependencies: ['setup'],
    },
  ],
});

3. 运行测试 #

直接执行npx playwright test，Playwright会自动先运行setup项目完成登录并保存状态，再依次启动所有依赖它的测试项目——每个测试都会带着已登录的上下文启动。

两种方案的区别 #

• globalSetup：是脱离测试上下文的全局前置脚本，需要手动创建浏览器/上下文，更适合做环境初始化（比如启动测试服务、设置环境变量），处理登录这类需要操作页面的场景不够直观。
• setup project：是一个标准的测试项目，用Playwright原生API编写，能直接操作页面完成登录，还能通过依赖管理确保执行顺序，甚至可以为不同测试项目配置不同的认证状态（比如普通用户、管理员账号），灵活性拉满。

为什么不建议同时配置 #

同时启用两种方案会导致登录流程重复执行，既浪费时间，还可能出现认证状态冲突的问题，完全没有必要。

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