升级Cypress后Chrome/Electron环境下Keycloak登录测试失败

问题现象 #

升级Cypress到v11.10.0后，测试初始阶段就失败。我们基于Keycloak实现登录功能，通过cypress-keycloak-commands编写测试用例：

测试套件核心逻辑：

beforeEach(() => {
    cy.clearCookies();
    cy.kcLogout();
    cy.kcLogin('admin');
});

it('navigation should be displayed completely', () => {
    cy.visit('/');
    // 断言逻辑
});

执行cy.visit('/')时，页面按预期重定向到http://localhost:4200/tenant-id/domain，但URL会自动附加后缀&error=login_required&state=some-unique-id，随后登录页面被展示，后续断言全部失败，说明Angular应用未识别到已登录状态。

关键差异点：

• 仅Firefox浏览器中测试可成功运行，Chrome和Electron均失败
• 退回至Cypress v8.7.0版本时，Electron浏览器下测试恢复正常

环境信息 #

• Cypress: v10.11.0（注：用户提及升级至v11.10.0后出现问题，当前配置文件为v10.11.0，可能存在版本记录偏差）
• Angular: v14.2.2
• OS: macOS Monterey (12.5.1)

依赖配置（package.json开发依赖片段） #

"cypress": "10.11.0",
"cypress-keycloak-commands": "1.2.0",
"cypress-plugin-tab": "1.0.5",

Cypress配置（cypress.config.ts） #

import { defineConfig } from 'cypress'

export default defineConfig({
  fixturesFolder: 'cypress/fixtures',
  screenshotsFolder: 'cypress/screenshots',
  videosFolder: 'cypress/videos',
  downloadsFolder: 'cypress/downloads',
  chromeWebSecurity: false,
  defaultCommandTimeout: 6000,
  apiUrl: 'http://api.develop.my-company.xy',
  viewportWidth: 1600,
  viewportHeight: 900,
  video: false,
  env: {
    login_url: 'http://login.develop.my-company.xy',
    username: 'p7s1-admin',
    password: '12345',
    api_url: 'http://api.develop.my-company.xy',
    auth_base_url: 'http://login.develop.my-company.xy/auth',
    auth_realm: 'my-company-xy',
    auth_client_id: 'booking-gui',
  },
  retries: {
    runMode: 2,
    openMode: 0,
  },
  e2e: {
    setupNodeEvents(on, config) {
      return require('./cypress/plugins/index.js')(on, config)
    },
    specPattern: 'cypress/tests/**/*.{spec.js,feature,features}',
    baseUrl: 'http://my.develop.my-company.xy/en/',
    experimentalSessionAndOrigin: true,
  },
})

已尝试但无效的方案 #

• 使用cy.session()封装登录逻辑
• 尝试重置localStorage：

let accessToken = null;
Cypress.Commands.add('resetLocalStorage', () => {
    if (!accessToken) {
        accessToken = localStorage.getItem('access_token');
    }
    window.localStorage.setItem('access_token', accessToken);
});

• 设置chromeWebSecurity: false

解决建议 #

1. 关闭experimentalSessionAndOrigin特性 #

当前开启的experimentalSessionAndOrigin是Cypress v10+引入的跨域会话隔离特性，可能与cypress-keycloak-commands的登录逻辑冲突，尤其是在Chrome/Electron浏览器中。临时关闭该配置后重新运行测试：

e2e: {
  // 保留其他配置
  experimentalSessionAndOrigin: false,
}

2. 升级cypress-keycloak-commands到最新版本 #

当前使用的v1.2.0版本可能未适配Cypress v10+的会话机制，升级至最新稳定版（当前最新为v2.x），验证跨浏览器兼容性问题是否解决。

3. 手动同步登录后的Token/Cookie #

cypress-keycloak-commands可能在Chrome/Electron中未正确将登录状态同步到应用域名，可在登录后手动处理：

beforeEach(() => {
  cy.clearCookies({ domain: null }); // 清除所有域名的Cookie
  cy.clearLocalStorage();
  cy.kcLogin('admin').then(() => {
    cy.window().then((win) => {
      const keycloakToken = win.localStorage.getItem('access_token');
      if (keycloakToken) {
        cy.visit('/'); // 触发一次重定向后再设置Token
        cy.window().then((appWin) => {
          appWin.localStorage.setItem('access_token', keycloakToken);
        });
      }
    });
  });
});

4. 调整浏览器Cookie策略 #

Chrome/Electron的SameSite Cookie策略比Firefox更严格，可在Cypress启动浏览器时禁用相关限制：

export default defineConfig({
  // 保留其他配置
  e2e: {
    setupNodeEvents(on, config) {
      on('before:browser:launch', (browser = {}, launchOptions) => {
        if (browser.name === 'chrome' || browser.name === 'electron') {
          launchOptions.args.push('--disable-features=SameSiteByDefaultCookies,CookiesWithoutSameSiteMustBeSecure');
          return launchOptions;
        }
      });
      return require('./cypress/plugins/index.js')(on, config);
    },
  },
});

5. 确认版本一致性 #

确保实际运行的Cypress版本与升级目标v11.10.0一致，或尝试降级到v10.x稳定版本，同时验证cypress-keycloak-commands的版本适配情况。

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