I’m using Cypress to test the logout functionality of my UI. However, I’m encountering an error that doesn’t seem accurate to me because I only have one element with the specified attribute. Here’s the code I’m using:

Cypress.Commands.add('logOut', () => {
    cy.get('button[data-cy="account-menu-button"]').click();
    cy.get('button[data-cy="account-menu-logout-button"]').click();
});

When I run my tests, I receive the following error:

   cy.click() can only be called on a single element. Your subject contained 2 elements. Pass { multiple: true } if you want to serially click each element.

I tried modifying the code to ensure only one element is selected:

Cypress.Commands.add('logOut', () => {
    cy.get('button[data-cy="account-menu-button"]').eq(0).click();
    cy.get('button[data-cy="account-menu-logout-button"]').click();
});

Timed out retrying after 4050ms: cy.click() failed because this element is not visible:
<button class="flex h-7 w-7 items-center justify-center rounded-full bg-flow-turquoise text-sm font-medium text-flow-purple md:bg-flow-purple md:bg-opacity-20" data-cy="account-menu-button" type="button">AU</button>
This element <button.flex.h-7.w-7.items-center.justify-center.rounded-full.bg-flow-turquoise.text-sm.font-medium.text-flow-purple.md:bg-flow-purple.md:bg-opacity-20> is not visible because its parent <div.flex.items-center.gap-x-4.md:hidden> has CSS property: display: none
Fix this problem, or use {force: true} to disable error checking.

It seems like the element is not visible because its parent has display: none. Here are the relevant parts of my HTML:

<div class="flex items-center gap-x-4 md:hidden">
    <button class="flex h-7 w-7 items-center justify-center rounded-full bg-flow-turquoise text-sm font-medium text-flow-purple md:bg-flow-purple md:bg-opacity-20" data-cy="account-menu-button" type="button">AU</button>
</div>