如何使用 Cypress 登录而不是在不同主机上运行的 Keycloak

Question

我正在使用 keycloak (21) 来管理 Angular (14) 应用程序的登录过程，并使用 keycloak-Angular 库来管理应用程序和 keycloak 之间的连接。 Keycloak 在不同的主机上运行，我重定向到 keycloak 登录页面以填写凭据。 当我尝试使用 Cypress (13) 在 e2e 上下文中测试登录时，问题就出现了。应用程序在本地启动（localhost），登录部分被重定向到 keycloak url，此时 cypress 无法找到我的应用程序重定向到的页面。

经过一些研究，我发现 cy.origin 应该可以解决问题，我尝试了以下代码：

cy.origin(thirdPartyServerUrl, {args: {username, password}}, ({username, password}) => {
cy.get('[id=username]').click().type(username);
cy.get('[id=password]').click().type(password);
cy.get('#kc-login').click();
});

不幸的是，这并没有找到keycloak登录页面。

附加信息：

• 如果应用程序与 keycloak 在同一主机上启动，则登录过程工作正常，但我也需要在不同的主机上运行设置。
• keycloak-angular 库正在使用 iFrame，据我所知，这可能会导致 Cypress 出现问题
• 我设法通过 KC API 登录，但没有找到一种方法来“告诉”浏览器我已经登录了

任何建议将不胜感激，如果您有任何疑问，请告诉我。

Answer 1

origin 命令是正确的方法，假设

thirdPartyServerUrl

实际上正在为您正在填写的表格提供服务。如果应用程序没有自动带你去那里，你可以明确地访问，像这样

cy.origin(thirdPartyServerUrl, {args: {username, password}}, ({username, password}) => {
  cy.visit(`${thirdPartyServerUrl}/login`)       // url that invokes login form
  cy.get('[id=username]').click().type(username);
  cy.get('[id=password]').click().type(password);
  cy.get('#kc-login').click();
})

您可能想添加一个

cy.session()

命令来在多个测试中保留凭据

Cypress.Commands.add('login', (username, password) => {
  const args = { username, password }
  cy.session(args, () => {
    cy.origin('cypress.io', { args }, ({ username, password }) => {
    cy.visit(`${thirdPartyServerUrl}/login`)
    cy.get('[id=username]').type(username)
    cy.get('[id=password]').type(password)
    cy.get('#kc-login').click()
  })
  cy.url().should('contain', '/home')
})

beforeEach(() => {
  cy.login(username, password)
})

it('tests as logged-in user', () => {
  ...