CypressError: cy.click() failed because this element is being covered by another element

user_6719819 0
Viewed 2656

So I am trying to run a Cypress test where the user goes to a dropdown at the top right and clicks on My Settings and then clicks on a link called Privacy Policy:

it.only('2.5 - Press "Privacy Policy" on the "My Settings" screen. - "Armadillo Privacy Policy" screen is displayed', () => {
  cy.login()

  cy.get('body div button[data-cy=usermenubutton]')
    .click()
    .get('body div ul li[data-cy=mySettings]')
    .contains('My Settings')
    .click()

  cy.get('a[href="/legal/privacy"]')
    .click()

  cy.screenshot()
})

However, no matter how I refactor this, I continue to get this error:

cy.click() failed because this element:

<a class='MuiTypography-root-bwkfm MuiTypography-root MuiTypography-inherit MuiTypography-root-dfghjk MuiLink-root MuiLink-underlineAlways" href="/legal/privacy">Privacy...</a>

is being covered by another element:

<div aria-hidden="true" class="MuiBackdrop-root-fghjkl hjk MuiBackdrop-root MuiBackdrop-invisible MuiModal-backdrop-klghjkhg tyutyu style="opacity: 1; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"></div>

Fix this problem, or use {force: true} to disable error checking.
cypress
1 Answers

Since your element is covered by another element, you can use click({force: true}), to disable the error checking and perform the click.

cy.get('a[href="/legal/privacy"]').click({force: true})
user_45712710
Related