Click method is not clicking the intended web element rather application logs out

Question

I am trying to navigate to a screen and have created an automation script in Cypress using Javascript for the same. Following is the code -

describe("Login Test",function(){
  it("Sign In", function(){
   cy.visit("abc.com/login")
   cy.get('input[id = userName]').type('admin')
   cy.get('input[id = userPassword]').type('P@ssword01')
   cy.get('.btn-primary').should('be.visible').click()
   cy.contains('Home', { timeout: 10000 }).should('be.visible')
  })
  it("User Management Test", function(){
    cy.get('a[id = settings]').click()
    cy.contains('User Management').click({force:true},{timeout : 3000})
    cy.contains('Manage Users').should('be.visible')
  })
})

login test case works fine. I am able to click on 'Settings' option. When I try to click on 'User Management' sub-menu option in settings drop-down it does not work. I am adding application screenshot and dom.

HTML of application Application screen Cypress runner - before 2 Cypress runner - after

If you see carefully click method is not clicking on 'User Management', rather 'User Management' disappears and cypress clicks on screen below it and eventually application logs out without hitting log out link/button. I have tried multiple ways for example -

   cy.contains('User Management').click({force:true},{timeout : 3000})
   OR
   cy.contains('User Management').click({force:true})
   OR
   cy.contains('User Management').click()
   OR
   cy.contains('User Management').should('be.visible').click()
   OR
   cy.contains('User Management').wait(3000).click()

I request cypress community to please have a look and help me resolve this issue. Thanks

Answer 1

You can install the cypress-real-events. And then add import "cypress-real-events/support"; under cypress/support/index.js. And in your test you can:

it('User Management Test', function () {
  cy.get('a[id = settings]').realHover()
  cy.contains('User Management').realClick()
  cy.contains('Manage Users').should('be.visible')
})

Answer 2

The href of the 'User Management' menu item is /posadmin/tigerge1/users and that appears well down in the log. Perhaps you should wait for it

it("User Management Test", function() {
  cy.intercept('POST', '**/posadmin/tigerge1/users/*').as('userManagement')

  cy.get('a[id = settings]').click()
  cy.contains('User Management').click({force:true})
  cy.wait('@userManagement')

  cy.contains('Manage Users', {timeout: 10000})   // put the timeout here
    .should('be.visible')                         // and decrease it if it works
})

The other thing to check is the preceding part of that route. It shows /api/auth/login, but is that correct? You should be navigating on the main site when the link is clicked.

Run the steps manually in the browser and see if the same URL's come up on the network tab.

If not, then it seems like the login is not succeeding.