I’m create tests in Cypress to test my main menu. I have a step to check if a drop-down menu appears.
The drop-down menu is triggered with CSS and so I am using Cypress Real Events plugin. My code is:
When('I hover over the About menu item a drop down should appear', () => {
cy.get('.main-menu_primary-item').contains('About').realHover();
cy.get('.drop-down--about').should('be.visible');
});
When I run the test I can see the .drop-down--about
menu appear, but I still get an error:
This element '<div.drop-down--about>' is not visible because it has CSS property:'display: none'
Would anyone know how I can ammend this?