是否可以将赛普拉斯e2e测试与firebase auth项目一起使用？

Question

我正在探索赛普拉斯的e2​​e测试,看起来很棒的软件.问题是身份验证,赛普拉斯文档解释了为什么在这里使用UI非常糟糕.

所以我尝试查看我的应用程序的网络点击,看看我是否可以创建对firebase API的POST请求,并在不使用GUI的情况下进行身份验证.但我可以看到至少有2个请求被触发,并且令牌已保存到应用程序存储中.

那么我应该使用什么方法呢？

1. 使用我的应用程序的UI进行身份验证,并指示Cybress不要触摸本地存储
2. 继续尝试发送正确的POST请求,并将值保存到本地存储.
3. 让赛普拉斯运行自定义JS代码,然后使用Firebase SDK登录.

我真的在这里寻找一些建议:)

Answer 1

当我自己这样做时，我创建了自定义命令（例如cy.login用于 auth thency.callRtdb和cy.callFirestore用于验证数据）。在厌倦了重复构建它们所需的逻辑之后，我将其打包到一个名为cypress-firebase的库中。它包括自定义命令和用于生成自定义身份验证令牌的 cli。

安装程序主要包括在 中添加自定义命令cypress/support/commands.js：

import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/database';
import 'firebase/firestore';
import { attachCustomCommands } from 'cypress-firebase';

const fbConfig = {
    // Your config from Firebase Console
};

window.fbInstance = firebase.initializeApp(fbConfig);

attachCustomCommands({ Cypress, cy, firebase })

并将插件添加到cypress/plugins/index.js：

const cypressFirebasePlugin = require('cypress-firebase').plugin

module.exports = (on, config) => {
  // `on` is used to hook into various events Cypress emits
  // `config` is the resolved Cypress config

  // Return extended config (with settings from .firebaserc)
  return cypressFirebasePlugin(config)
}

但是设置文档中提供了有关设置的完整详细信息。

披露，我是cypress-firebase的作者，这是完整的答案。

Answer 2

好吧，经过多次尝试和错误，我尝试了解决方案路径 2，它成功了。

所以我的身份验证流程如下所示：

1. 发送 POST 请求（使用 cybress.request）到 https://www.googleapis.com/identitytoolkit/v3/relyingparty/verifyPassword，并解析响应。创建一个对象：response1 = response.body

2. 发送 POST 请求（使用 cybress.request）到 https://www.googleapis.com/identitytoolkit/v3/relyingparty/getAccountInfo，使用上一个请求中的 idToken。创建一个对象：user = response2.body.users[0];

将响应组合到具有以下属性的对象中：

const authObject = {
  uid: response1.localId,
  displayName: response1.displayName,
  photoURL: null,
     email: response1.email,
     phoneNumber: null,
     isAnonymous: false,
     providerData: [
       {
          uid: response1.email,
          displayName: response1.displayName,
          photoURL: null,
          email: body.email,
          phoneNumber: null,
          providerId: 'password'
       }
      ],
      'apiKey': apiKey,
      'appName': '[DEFAULT]',
      'authDomain': '<name of firebase domain>',
      'stsTokenManager': {
         'apiKey': apiKey,
         'refreshToken': response1.refreshToken,
         'accessToken': response1.idToken,
         'expirationTime': user.lastLoginAt + Number(response1.expiresIn)
       },
       'redirectEventId': null,
       'lastLoginAt': user.lastLoginAt,
       'createdAt': user.createdAt
    };

然后在 cybress 中，我只需将此对象保存在本地存储中，在之前的钩子中：localStorage.setItem(firebase:authUser:${apiKey}:[DEFAULT], authObject);

也许不完美，但它解决了问题。如果您对代码感兴趣，并且您是否了解如何构建“authObject”，或者以其他方式解决此问题，请告诉我。