Cypress UI automated login with Keycloak fails

Question

I am attempting to automate an e-commerce store front using Cypress but I'm running into an issue with login.

The auth and identity tool being used is keycloak and the Cypress test is unable to login or register successfully. The flow is as follows: visit siteundertest.com > Click login/register > redirects to keycloak > enter valid login info > click login. Expected result: Login is successful and user is redirected to authenticated home page (siteundertest.com). Actual: An error occurred processing your request.

Notes:

This test works using Selenium
POST requests are not enabled for keycloak in the current domain (a decision out of my control) so I can't bypass login/register with an API call: Bypass UI Login using Cypress
I suspect a cookie/header information is lost but I'm not sure how to determine what information needs to be provided with Cypress
I have tried disabling web security in cypress.json (config) and various other suggestions: Unable to signup using Keycloak through Cypress
Error occurs in both headless (electron) and Chrome/FF/Edge
Manual login works fine and various user accounts were used
Same error occurs when Cypress clicks the keycloak registration button
Have tried also tried: Cypress.Cookies.preserveOnce('session_id', 'remember_token') Cypress.Cookies.preserveOnce('session_code', 'remember_token') Cypress.Cookies.preserveOnce('client_id', 'remember_token') Cypress.Cookies.preserveOnce('clientsession') but I will admit I'm running a bit blind here so I''m trying anything.

Courtesy of a helpful dev I was able to get some information from keycloak with regards to cookies, Cypress > Selenium > Manual Web:

The test:

describe('Login to Keycloak with Email', function(){ 

  before(function () {
    cy.fixture('logindata').then(function (data) {
      this.data = data;           
    })
  })

  it('Open Homepage', function(){
    cy.visit(this.data.OccTestHmepageUrl)
  })
 
  it('Click Log In', function(){
   cy.get('[data-bind="visible: !(loggedInUserName() && (loggedIn() || isUserSessionExpired()))"] > #CC-loginHeader-login').click()
  });
  
  it('Verify Redirect to Keycloak', function(){
    cy.get('.auth-land-page > :nth-child(1) > .text-center')
  });

  it('Click login button', function(){
    cy.get('.emailLogin > .auth-button-content').click()    
  })

  it('Enter valid email address', function(){
    cy.fixture('logindata').then(function (data) {
    this.data = data;
    cy.get('#emailUsername')
    .type(this.data.LoginEmail)}
    )}
  )

  it('Enter valid password', function(){
    cy.fixture('logindata').then(function (data) {
      this.data = data;
      cy.get('#password')
      .type(this.data.LoginPassword)}
      )}
    )

  it('Click login button', function(){
    cy.get('#loginBtn').click()
    // Error occurs here
  })

  it('Verify successful login', function(){
    //Redirect fails
    cy.get('#CC-loginHeader-logout')
    })
  })

Thanks in advance to whomever can help!

Have you solved this problem already? Would you share the solution? — Georgi, Mar 10 '21 at 18:46

score 0 · Answer 1 · answered Sep 29 '21 at 12:52

The problem could be caused by the split login. Maybe you could try and put the whole login into one "it". Just for testing purposes I split my working login test into several tests and then it didn't work, so I assume it should be one test. Maybe you found a fix or the topic isn't still important to you, since it has been asked 8 months ago :) But I would be interested in hearing from you, if this fixes your problem, or if it doesn't change a thing, or if you found another way to make it work.

New code could look like this:

describe('Login to Keycloak with Email', function () {

  before(function () {
    cy.fixture('logindata').then(function (data) {
      this.data = data;
    })
  })

  it('Login', function () {
    cy.visit(this.data.OccTestHmepageUrl)
    cy.get(
        '[data-bind="visible: !(loggedInUserName() && (loggedIn() || isUserSessionExpired()))"] > #CC-loginHeader-login').click()
    cy.get('.auth-land-page > :nth-child(1) > .text-center')
    cy.get('.emailLogin > .auth-button-content').click()
    cy.fixture('logindata').then(function (data) {
      this.data = data;
      cy.get('#emailUsername')
      .type(this.data.LoginEmail)
    })
    cy.fixture('logindata').then(function (data) {
      cy.get('#password')
      .type(this.data.LoginPassword)
    })
    cy.get('#loginBtn').click()
    //Error occured here, maybe the tests shouldn't be seperated, let me know if it works.
    //Redirect fails
    cy.get('#CC-loginHeader-logout')
  })
})

Cypress UI automated login with Keycloak fails

1 Answers1