如何测试用户是否可以使用Cypress链接OAuth提供者？

Question

我正在做一个项目，在这个项目中，用户可以使用电话号码、谷歌或Github登录。我使用Firebase进行身份验证。我目前正在使用Cypress添加集成测试。我的问题是我无法正确测试用户是否可以链接或取消链接提供商。要链接提供者，我使用linkWithRedirect（）firebase方法
起初，我试图模拟一次按钮点击。但这不起作用，因为Cypress不允许在一个测试中访问多个域
我的下一次尝试是使用linkWithCredential（）方法。我从开发者工具中获取cookies和提供者的auth URL，以获取授权代码，并使用此代码获取访问令牌
获取Google令牌的My Cypress命令：

Cypress.Commands.add(
  'getGoogleToken',
  () => {
    cy.request({
      url: Cypress.env("GOOGLE_AUTH_URL"),
      headers: {
        cookie: Cypress.env("GOOGLE_AUTH_COOKIE")
      }, 
      followRedirect: false
    })
    .its("redirectedToUrl")
    .then(redirectedToUrl => {
      const url = new URL(redirectedToUrl);
      const code = url.searchParams.get("code");
      cy.request({
        url: "https://www.googleapis.com/oauth2/v4/token",
        method: "POST",
        form: true,
        body: {
          code,
          redirect_uri: Cypress.env("GOOGLE_REDIRECT_URI"),
          client_id: Cypress.env("GOOGLE_CLIENT_ID"),
          client_secret: Cypress.env("GOOGLE_CLIENT_SECRET"),
          grant_type: "authorization_code"
        }
      })
      .its("body")
      .then(body => body.access_token);
    });
});

使用这个令牌，我调用我自己的LinkBackGoogleBackToken方法，该方法调用LinkBackCredential方法：

Cypress.Commands.add(
  'linkWithGoogle', 
  () => {
    cy.getGoogleToken()
      .then(token => {
        cy.get("@auth")
          .invoke("linkWithGoogleWithToken", token);
      });
});

在我的测试中，我调用几个函数来链接一个提供者，然后链接另一个提供者，然后取消链接提供者，依此类推。有时此命令按预期工作，但有时它永远处于挂起状态。我不知道为什么。搜索没有帮助，似乎没有人遇到过这个问题
所以，我正在寻找以编程方式链接OAuth提供程序的方法，而不是使用UI。我正在考虑Firebase Admin SDK，但在其文档中找不到链接提供程序的方法。如果有人遇到这个问题，我将不胜感激。

Answer 1

我发现了我为什么会有这个问题。关键是，在访问该页面后，我添加了一个别名来引用我的firebase函数：

Cypress.Commands.add(
  'init',
  () => {
    cy.visit("/");
    cy.window()
      .its("firebase")
      .its("auth").as("auth");
    cy.nullifyUsername();
});

第一次调用invoke方法时，一切正常。然后我重新加载了页面，因为我需要用这些信息更新页面。

cy.linkGoogle();
    cy.reload();
    cy.get("@googleButton")
      .contains(/^unlink$/i);

之后，下次我尝试链接另一个提供者时，invoke方法仍处于挂起状态。这是因为在重新加载页面后，我的别名被引用到一个不再存在的函数。我的解决方案是在重新加载页面后添加别名。因此，我为此创建了自定义命令：

Cypress.Commands.add(
  'refresh',
  () => {
    cy.reload();
    cy.window()
      .its("firebase")
      .its("auth").as("auth");
});