My html element is not detected as visible although it appeared on GUI

[Laith-Budairi]

So I basically have a save button in the GUI that sends a save request to the backend server, every time you save something it displays a 'saved successfully' message in a div element that appears as a popup on top.

now out of nowhere and at some point in any of the tests that I have, I check for div that is visible and the message displayed, and it doesn't find it at all although the message already appeared on the UI and it times out and the test fails.

This happens randomly and can happen at any given test at random when I click on save, I am not sure what could the problem be to be honest, but normally I start by logging in and saving cookies when I run the tests, there are some tests that can logout and login to a different user account and back to the original account I was logged in after.

Please note that I am on Cypress v8.4.0
This is how I click on the save button in case anyone is wondering:

const saveSettings = (msg = INFORMATION_MSG.saveSuccessful, shouldMsgDisappear = false, checkSaveMessage = true, msgIsInsideContainer = false, verifySaveBtnIsDisabledAfterSaving = false) => {
  cy.get(LOCATORS.saveBtn, { timeout: 12000 })
    .first()
    .scrollIntoView()
    .should('be.enabled')
    .click({ force: true })

  if (verifySaveBtnIsDisabledAfterSaving) {
    cy.get(LOCATORS.saveBtn, { timeout: 12000 })
      .first()
      .should('be.disabled')
  }

  if (checkSaveMessage) {
    cy.then(() => {
      if (Array.isArray(msg)) {
        msg.forEach((msg) => {
          verifySaveMessage(msg, shouldMsgDisappear, msgIsInsideContainer)
        })
      } else { verifySaveMessage(msg, shouldMsgDisappear, msgIsInsideContainer) }
    })
  }
}