如何为Playwright测试生成专属Auth0访问令牌？

针对你的场景，有两种主流实现方式，分别适配不同的测试需求：

1. 直接调用Auth0 Token端点（推荐，快速高效） #

绕过UI登录流程，直接向Auth0的令牌端点发起请求获取令牌，适合不需要测试登录UI的API交互测试。

前置准备 #

• 在Auth0控制台创建专门的测试客户端，开启Password授权类型（路径：客户端设置 → 高级设置 → 授权 → 勾选Password）
• 准备测试用的Auth0用户账号、客户端ID、客户端密钥、API受众（Audience）等信息，通过环境变量存储（避免硬编码）

代码实现 #

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

test('获取Auth0令牌并调用API', async ({ request }) => {
  // 从环境变量读取配置
  const config = {
    domain: process.env.AUTH0_DOMAIN,
    clientId: process.env.AUTH0_TEST_CLIENT_ID,
    clientSecret: process.env.AUTH0_TEST_CLIENT_SECRET,
    username: process.env.AUTH0_TEST_USERNAME,
    password: process.env.AUTH0_TEST_PASSWORD,
    audience: process.env.AUTH0_API_AUDIENCE,
    scope: 'openid profile email' // 根据API需求调整权限范围
  };

  // 发送令牌请求
  const tokenRes = await request.post(`https://${config.domain}/oauth/token`, {
    form: {
      grant_type: 'password',
      client_id: config.clientId,
      client_secret: config.clientSecret,
      username: config.username,
      password: config.password,
      audience: config.audience,
      scope: config.scope
    }
  });

  const tokenData = await tokenRes.json();
  const accessToken = tokenData.access_token;

  // 调用你的API
  const apiRes = await request.get('https://your-api-domain.com/protected-endpoint', {
    headers: { Authorization: `Bearer ${accessToken}` }
  });

  // 断言API响应
  expect(apiRes.ok()).toBeTruthy();
});

2. 通过UI登录后提取令牌（适合端到端全流程测试） #

如果需要测试完整的登录UI流程，可以在Playwright模拟登录后，从浏览器存储中提取@auth0/auth0-react保存的令牌。

代码实现 #

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

test('登录后提取令牌并调用API', async ({ page, request }) => {
  // 打开应用登录页（假设路由为/login）
  await page.goto('/login');

  // 填写Auth0登录表单
  await page.fill('input[name="username"]', process.env.AUTH0_TEST_USERNAME);
  await page.fill('input[name="password"]', process.env.AUTH0_TEST_PASSWORD);
  await page.click('button[type="submit"]');

  // 等待登录成功跳转至首页
  await page.waitForURL('/dashboard');

  // 从localStorage提取Auth0存储的令牌
  const storedTokens = await page.evaluate(() => {
    // 替换为你的Auth0域名对应的存储键，格式通常为auth0.<your-domain>.tokens
    const tokenKey = 'auth0.your-auth0-domain.tokens';
    return localStorage.getItem(tokenKey) ? JSON.parse(localStorage.getItem(tokenKey)) : null;
  });

  const accessToken = storedTokens?.accessToken;
  expect(accessToken).not.toBeNull();

  // 使用令牌调用API
  const apiRes = await request.get('https://your-api-domain.com/protected-endpoint', {
    headers: { Authorization: `Bearer ${accessToken}` }
  });

  expect(apiRes.ok()).toBeTruthy();
});

关键注意事项 #

• 始终使用测试专用的Auth0租户/客户端/用户，避免影响生产环境数据
• 不要硬编码敏感信息，用dotenv等工具加载环境变量
• 若令牌过期，可在测试前重新获取，或在测试逻辑中添加刷新令牌的逻辑
• 第二种方法中，localStorage的键名需根据你的Auth0域名调整，可通过浏览器开发者工具确认实际键名

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