如何在Vue3+auth0-vue场景下的Playwright测试中模拟Auth0用户

1. 循环复用测试用户池+批量重置状态 #

创建一批固定的测试用户（比如test-user-01@yourdomain.com到test-user-10@yourdomain.com），测试完成后通过Auth0 Management API批量重置用户的初始状态，避免重复注册：

• 编写脚本调用Auth0 Management API的updateUser接口，清空用户的user_metadata/app_metadata（通常存储用户首次登录标记、偏好设置等），或者重置密码为固定测试密码。
• 示例代码（Node.js）：

const { ManagementClient } = require('auth0');

const management = new ManagementClient({
  domain: 'your-auth0-domain',
  clientId: 'your-management-client-id',
  clientSecret: 'your-management-client-secret',
});

// 重置单个测试用户状态
async function resetTestUser(userId) {
  await management.updateUser({ id: userId }, {
    user_metadata: { is_new_user: true }, // 重置为新用户标记
    app_metadata: {} // 清空应用关联数据
  });
}

// 批量重置所有前缀为test-user的用户
async function resetAllTestUsers() {
  const users = await management.getUsers({ q: 'email:*test-user*' });
  for (const user of users) {
    await resetTestUser(user.user_id);
  }
}

2. 自定义Auth0规则实现测试环境用户自动重置 #

在Auth0规则中添加逻辑，识别测试环境的请求，自动将用户重置为新用户状态：

• 规则代码示例：

function (user, context, callback) {
  // 通过客户端元数据识别测试环境请求
  if (context.clientMetadata?.environment === 'e2e-test') {
    // 重置用户为新用户状态
    user.user_metadata = user.user_metadata || {};
    user.user_metadata.is_new_user = true;
    user.user_metadata.completed_onboarding = false;
    // 保存更新后的元数据
    auth0.users.updateUserMetadata(user.user_id, user.user_metadata)
      .then(() => callback(null, user, context))
      .catch(err => callback(err));
  } else {
    callback(null, user, context);
  }
}

• 测试时，让E2E测试的客户端携带environment: 'e2e-test'的元数据，每次登录都会自动重置用户状态，无需额外操作。

3. Mock Auth0-Vue插件绕过真实认证 #

在E2E测试环境中，直接mock auth0-vue的认证逻辑，返回预设的新用户数据，完全跳过Auth0的真实流程：

• 在Vue应用的入口文件中，根据环境变量切换插件：

import { createApp } from 'vue';
import App from './App.vue';

let authPlugin;
if (import.meta.env.VITE_E2E_TEST === 'true') {
  // Mock auth0-vue插件
  authPlugin = {
    install(app) {
      app.provide('auth0', {
        isAuthenticated: true,
        user: {
          sub: 'auth0|test-new-user-01',
          email: 'test-new-user-01@yourdomain.com',
          user_metadata: { is_new_user: true }
        },
        loginWithRedirect: () => Promise.resolve(),
        logout: () => Promise.resolve()
      });
    }
  };
} else {
  // 真实的auth0-vue插件
  import('@auth0/auth0-vue').then(({ createAuth0 }) => {
    authPlugin = createAuth0({
      domain: 'your-auth0-domain',
      clientId: 'your-client-id',
      authorizationParams: {
        redirect_uri: window.location.origin
      }
    });
  });
}

createApp(App).use(authPlugin).mount('#app');

• 在E2E测试工具（如Cypress、Playwright）中，设置环境变量VITE_E2E_TEST=true，即可直接使用mock的新用户状态，无需调用真实Auth0接口。

4. 生成临时登录链接自动完成测试登录 #

通过Auth0 Management API生成测试用户的临时登录链接，E2E测试直接访问该链接完成自动登录，循环使用同一批用户：

• 示例代码生成临时链接：

async function generateTestLoginLink(userId) {
  const link = await management.createPasswordlessEmailLink({
    user_id: userId,
    client_id: 'your-test-client-id',
    connection: 'email',
    send: 'link',
    authParams: {
      redirect_uri: 'https://your-app-url.com/callback',
      scope: 'openid profile email'
    }
  });
  return link.link;
}

• 测试时，调用该接口获取链接，让测试工具访问链接即可自动登录，测试完成后重置用户状态供下次使用。

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