cypress.io不会持续为Angular应用程序进行Auth0登录

如何解决cypress.io不会持续为Angular应用程序进行Auth0登录

我遵循了使用Cypress.io的Auth0教程（https://auth0.com/blog/end-to-end-testing-with-cypress-and-auth0/），但是我无法让Cypress保持成功的登录。

我能够使用Cypress登录命令登录，但是一旦我重定向到另一个页面，我的auth.guard（检查Auth0登录状态）会提示再次登录，并且在Cypress中出现此错误：

myapp.auth0.com refused to connect.

在控制台中：Refused to frame 'https://myapp.auth0.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'none'".

因此，身份验证防护未找到登录名。我怀疑这可能是因为赛普拉斯正在清除Cookie和本地存储，但是我没有找到解决方法。

我尝试将其（从我以前的一些旧代码中添加）到测试文件的顶部，但这没有帮助。

const clear = Cypress.LocalStorage.clear
Cypress.LocalStorage.clear = function (keys,ls,rs) {
  if (keys) {  }
}

在测试中：

beforeEach(() => {
    cy.restoreLocalStorageCache();
  });

...

afterEach(() => {
    cy.saveLocalStorageCache();
  });

解决方法

我有一个目前正在使用的解决方法。这并不完美，但足以继续前进。 （编辑：我无法使代码格式正常工作）

1. 我在 Auth0 中设置了一个单独的应用程序进行测试，并允许此应用程序的用户名/密码登录。 （我的 prod 应用不允许该选项。）

2. 从要运行的第一个测试（基于 Auth0 示例）以编程方式登录并将 auth0 令牌写入 cookie。

   describe('登录',() => { beforeEach(() => { cy.restoreLocalStorageCache(); });

   it('应该成功登录',() => { cy.login() .then((resp) => { 返回响应； }) .then((身体) => { const {access_token,expires_in,id_token} = body; const auth0State = { 随机数：'',状态：'一些随机状态' };

        // write access token to user-token cookie
        cy.setCookie('user-token',access_token);
   
        const callbackUrl = `/callback#access_token=${access_token}&scope=openid&id_token=${id_token}&expires_in=${expires_in}&token_type=Bearer&state=${auth0State.state}`;
        cy.visit(callbackUrl,{
          onBeforeLoad(win) {
            win.document.cookie = 'com.auth0.auth.some-random-state=' + JSON.stringify(auth0State);
          }
        });
      })
   

   });

   afterEach(() => { cy.saveLocalStorageCache(); }); });

3. 对于每个测试，保留令牌 cookie：

   // cypress 默认清除 localStorage 但我们希望用户数据如此覆盖 const clear = Cypress.LocalStorage.clear Cypress.LocalStorage.clear = function (keys,ls,rs) { 如果（键）{} }; // 在每次测试运行之前不会清除具有这些名称的 cookie Cypress.Cookies.defaults({ 保留：'用户令牌' });

   ...

   describe('加载页面',function() { beforeEach(() => { cy.restoreLocalStorageCache(); // 在每次测试之前自动保存一个 cookie。在 NEXT 测试开始之前它不会被清除 Cypress.Cookies.preserveOnce('user_token'); });

   it('页面加载',function() { cy.visit(testUrl); cy.contains('测试词'); cy.url().should('include',testUrl); })

   afterEach(() => { cy.saveLocalStorageCache(); }); })

顺便说一句 - 我也尝试将登录添加到 auth 守卫，但我认为它不起作用

// @ts-ignore
    if (window.Cypress) {
      const auth0credentials = JSON.parse(localStorage.getItem("auth0Cypress")!);
      const user = auth0credentials.body.decodedToken.user;
      const access_token = auth0credentials.body.access_token;

      // debugging output
      console.log('Cypress user:',user.name);
      console.log('Cypress access_token:',access_token);
      this._cookie.put('user-token',access_token);

      if(user.name === 'test' && access_token) {
        return true;
      } else {
        return this.auth.isAuthenticated$.pipe(
          tap(loggedIn => {
            if (!loggedIn) {
              } else {
                this.auth.login(state.url);
              }
            })
          );
      };
    }