Firebase认证项目中如何使用Cypress进行端到端测试？

嘿，我之前在Cypress项目里对接Firebase认证时也碰到过一模一样的困惑！先直接给结论：绝对不要用UI流程做认证，官方说的弊端（慢、不稳定、容易受UI变更影响）真的会让你的测试维护成本飙升。下面给你两个靠谱的无GUI认证方案，都是我实际用过的：

方案一：用Firebase Admin SDK（最推荐） #

这个方案的核心是绕开前端的认证流程，直接通过Firebase的服务端SDK生成认证令牌，然后把令牌注入到应用的存储里，让应用以为用户已经登录了。

步骤： #

1. 安装Firebase Admin SDK：在你的Cypress项目根目录执行 npm install firebase-admin --save-dev
2. 在Cypress的支持文件里（比如cypress/support/commands.js）添加自定义登录命令：

   const admin = require('firebase-admin');
   
   // 避免重复初始化Admin SDK
   if (!admin.apps.length) {
     admin.initializeApp({
       credential: admin.credential.cert(require('../path/to/your-service-account-key.json'))
     });
   }
   
   Cypress.Commands.add('loginWithFirebaseAdmin', (email) => {
     // 先通过邮箱获取用户信息
     return admin.auth().getUserByEmail(email)
       // 生成自定义令牌
       .then(user => admin.auth().createCustomToken(user.uid))
       // 用自定义令牌换取前端需要的ID令牌和刷新令牌
       .then(customToken => {
         return cy.request({
           method: 'POST',
           url: `https://identitytoolkit.googleapis.com/v1/accounts:signInWithCustomToken?key=${Cypress.env('FIREBASE_API_KEY')}`,
           body: {
             token: customToken,
             returnSecureToken: true
           }
         });
       })
       // 将令牌存入应用的localStorage，模拟登录状态
       .then(({ body }) => {
         const authStorageKey = `firebase:authUser:${Cypress.env('FIREBASE_API_KEY')}:[DEFAULT]`;
         window.localStorage.setItem(authStorageKey, JSON.stringify({
           uid: body.localId,
           email,
           idToken: body.idToken,
           refreshToken: body.refreshToken,
           expiresIn: body.expiresIn
         }));
       });
   });
   

3. 在测试用例里直接调用这个命令：

   beforeEach(() => {
     cy.loginWithFirebaseAdmin('test-user@your-app.com');
     cy.visit('/dashboard'); // 直接进入需要认证的页面，无需走登录UI
   });
   

这个方案的优势是灵活性极强——你还可以用Admin SDK创建测试用户、重置用户密码、修改用户权限，完全适配各种测试场景。

方案二：直接调用Firebase REST API（轻量替代） #

如果不想引入Admin SDK，也可以直接调用Firebase的公开认证API，获取令牌后注入存储。

自定义命令示例： #

Cypress.Commands.add('loginWithFirebaseApi', (email, password) => {
  return cy.request({
    method: 'POST',
    url: `https://identitytoolkit.googleapis.com/v1/accounts:signInWithPassword?key=${Cypress.env('FIREBASE_API_KEY')}`,
    body: {
      email,
      password,
      returnSecureToken: true
    }
  }).then(({ body }) => {
    const authStorageKey = `firebase:authUser:${Cypress.env('FIREBASE_API_KEY')}:[DEFAULT]`;
    window.localStorage.setItem(authStorageKey, JSON.stringify({
      uid: body.localId,
      email,
      idToken: body.idToken,
      refreshToken: body.refreshToken,
      expiresIn: body.expiresIn
    }));
  });
});

这个方案更轻量，但需要注意测试账号的管理（比如不要用生产环境的真实账号），而且无法像Admin SDK那样直接操作用户数据。

为什么这两个方案比UI认证好？ #

• 速度快：UI认证要加载页面、输入内容、点击按钮，至少需要几秒；而API/SDK方式只需要几百毫秒。
• 更稳定：不会因为登录按钮的ID变化、页面加载延迟等UI问题导致测试失败。
• 可维护性高：一旦配置好，所有需要认证的测试用例都可以复用这个命令，不用重复写登录流程。

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