Cy10 multi domain: redirect triggered keycloak login form is unresponsive

Current behavior

Dear Cypress Team,

first congratulations to the release of Cy10 was really looking forward to the multi domain support 🚀 and I am happy to report that it kinda works as expected 😃 meaning we are finally about to drop kcFakeLogin https://github.com/Fredx87/cypress-keycloak-commands

However, there seem to be some remaining edges not yet resolved: For us the keycloak login form is unresponsive when having the login page triggered by a redirect.

Desired behavior

For now the workaround is sufficient to pass the login to test features which require to be logged in Nevertheless, the current behavior blocks us to fully abandon kcFakeLogin because we still need it to make sure that the Keycloak login can be triggered and is working as expected.

So we would expect that the keycloak login form still remains responsive when triggered by a redirect and not by a button.

Keep up the good work ✌️

Test code to reproduce

Cypress.Commands.add("login", (user, redirect) => {
 const baseUrl = "http://localhost:4000";
 cy.visit(`${baseUrl}/#/${redirect}`)
 cy.origin(
     "https://sso.xy.dev",
     { args: { user } },
     ({ user }) => {
       cy.get("#username")
         .type(user)
         .get("#password")
         .type(Cypress.env("auth_password"));
       cy.get("#kc-login").click();
    }
   );
   cy.visit(`${baseUrl}/#/${redirect}`);
 });

Timed out retrying after 4000ms: Expected to find element: #username, but never found it.

Workaround: Trigger login form by login button

Cypress.Commands.add("login", (user, redirect) => {
 const baseUrl = "http://localhost:4000";
 
 // redirect triggered keycloak login window is unresponsive,
 // thus we need to trigger the login using the login button
 cy.visit(baseUrl);
 cy.get(".header-right > :nth-child(2)").click();

 cy.origin(
     "https://sso.xy.dev",
     { args: { user } },
     ({ user }) => {
       cy.get("#username")
         .type(user)
         .get("#password")
         .type(Cypress.env("auth_password"));
       cy.get("#kc-login").click();
    }
   );
   cy.visit(`${baseUrl}/#/${redirect}`);
 });

Cypress Version

10.1.0

Other

Tested Browsers:

• Electron v100
• Chrome v98

relevant versions of the package.json

• react: “^16.14.0”,
• keycloak-js: “^18.0.0”,
• cypress: “^10.1.0”,

[AtofStryker]

Hey @AtofStryker thank you for having a look into and setting up a reproduction repo so quickly. I have pulled it and can confirm that this is exactly the same bug we observe in our react app as well.

Just for completeness, in order to have the expected tests passed I had to modify the following:

README: ~*Set Valid Redirect URIs to http://localhost:8081/*~ Set Valid Redirect URIs to https://www.keycloak.org/app/* Set Web Origins to *

keycloak.cy.js: ~cy.get(‘#user-details’).contains(‘my user’)~ cy.get(‘#user-details’).contains(‘myuser’)

Good luck with fixing the issue ✌️

@IvoLeist perfect. I will update the readme and test file with your suggestions to make sure everything runs as expected. Thank you for pulling that down and verifying it!

[IvoLeist]

Hey @AtofStryker thank you for having a look into it and setting up a reproduction repo so quickly. I have pulled it and can confirm that this is exactly the same bug we observe in our react app as well.

Just for completeness, in order to have the expected tests passed I had to modify the following:

README: *Set Valid Redirect URIs to http://localhost:8081/* Set Valid Redirect URIs to https://www.keycloak.org/app/* Set Web Origins to *

keycloak.cy.js: cy.get(‘#user-details’).contains(‘my user’) cy.get(‘#user-details’).contains(‘myuser’)

Good luck with fixing the issue ✌️