Dealing with problematic hover behaviors in Cypress: A guide

I encountered an issue with Cypress hover functionality while trying to access a sub menu that appears after hovering over a main menu item. The error message I received was 

This element is not visible because it has CSS property: position: fixed and it's being covered by another element:
. Despite following the workarounds suggested by Cypress mentioned in https://docs.cypress.io/api/commands/hover#Workarounds, I did not find success. According to the Cypress documentation, "Using .trigger() will only affect events in JavaScript and will not trigger any effects in CSS", so I attempted to modify the CSS property of the element first before using the .trigger command:

        cy.get('.header-module--subMenu--1TF98.header-module--menuLevel2--2QGyh').eq(0).invoke('attr', 'style', 'position: absolute');
        cy.get('.header-module--subMenu--1TF98.header-module--menuLevel2--2QGyh').eq(0).should('have.attr', 'style', 'position:
absolute');
        cy.get('.header-module--subMenu--1TF98.header-module--menuLevel2--2QGyh').eq(0).invoke('show');
        cy.get('.header-module--subMenu--1TF98.header-module--menuLevel2--2QGyh').eq(0).trigger('mouseover');

Unfortunately, this approach did not resolve the issue. Even though the confirmation 

 expected <ul.header-module--subMenu--1TF98.header-module--menuLevel2--2QGyh> to have attribute style with the value **position: absolute**
was obtained, the same error persisted during the final step 
This element <ul.header-module--subMenu--1TF98.header-module--menuLevel2--2QGyh> is not visible because it has CSS property: **position: fixed** and it's being covered by another element:
. How can I access the hidden submenu without resorting to using the { force: true } argument?

javascriptjquerycsscypress

Answer №1

There could be a potential issue with the CSS selector being used, as you have set position: absolute but are still getting references to position: fixed.

If the selector is correct, you may want to consider using the .realHover() function from the cypress-real-events library to trigger the "show" effect.

This function utilizes the Chrome Devtools Protocol to automate actions within the Chrome browser's devtools.

Answer №2

Dealing with a similar issue, I found a solution that worked for me. Follow the steps below:

  1. Start by installing cypress-real-events using npm i cypress-real-events or npm i cypress-real-events --f.
  2. Next, import this statement -> import "cypress-real-events"; into either your commands.js or index.js located in your support folder.
  3. To use it, follow this syntax -> cy.get(".cssmenu > :nth-child(1)").realHover();

I hope this helps those of you facing a similar challenge.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Modifying the Vue.js Vue3-slider component for custom color schemes

Currently, I am using the vue-slider component and would like to customize the color of the slider itself. The specific class that needs to be styled is "vue-slider-dot-tooltip-inner". Below is a screenshot displaying the original CSS styling for vue-slid ...

javascripthtmlcssvue.jssass

Select multiple options by checking checkboxes in each row using React

Is it possible to display multiple select checkboxes with more than one per row? For example, I have four options [a, b, c, d]. How can I arrange it to have 2 options per row, totaling 2 rows instead of having 1 option per row for 4 rows? ☑a ☑b ☑c ...

javascriptcssreactjsmaterial-ui

Having trouble with making a POST request in Node.js using Express.js and Body-parser?

Just starting out with nodejs and currently in the learning phase. I've encountered an issue where my POST request is not functioning as expected. I set up a basic html form to practice using both GET and POST requests. Surprisingly, the GET request w ...

javascriptnode.jsexpresspostget

A guide to creating a personalized horizontal dashed separator in Material UI

I'm looking to customize a divider template by turning it into a horizontal dashed divider, but I'm struggling to override it. Even when attempting an sx edit with a borderRadius, the divider doesn't change as expected. source code: import ...

cssreactjsmaterial-uidividersx

Sharing stickers with Discord.js version 13

I have encountered an issue while trying to forward messages sent to my bot via DM. Everything is functioning smoothly, except for sending stickers. Whenever I attempt to send a message with a sticker, an Error DiscordAPIError: Cannot use this sticker is ...

javascriptnode.jsdiscord.js

The UseEffect Async Function fails to execute the await function when the page is refreshed

Having trouble calling the await function on page refresh? Can't seem to find a solution anywhere. Here's the useEffect Code - useEffect(() => { fetchWalletAddress() .then((data) => { setWalletAddress(data); setLoa ...

javascriptnode.jsreactjs

By leveraging the require module, programmatically load the content of a JSON file in Node.js and Mocha by passing

Utilizing mocha, node js, and the cypress tool for writing test scripts has been successful in loading data from a json file with the following statement: var data = require('../../fixtures/TestData/JsonData/ABC_DEF.json'); However, attempting ...

javascriptnode.js

What could be the reason for my new course not being recognized?

Looking to modify the behavior of a button where, when clicked, it hides a specific div element, changes its text display, and toggles between classes using addClass/removeClass for subsequent click events. Unfortunately, the intended functionality is not ...

jquerycsshtml

Changing a string to uppercase and lowercase

I am currently working on a software that takes a string, divides it, capitalizes the first letter of the first string, and capitalizes all letters in the second string. Below is the code snippet: var fullName = "ThEoDORe RoOseVElT"; function nameEditor( ...

javascriptstring

Show text using AJAX when the form is submitted

I'm in the process of creating a basic form with a submit button (see below). My objective is to allow users to enter text into the input box, click submit, and have the page refresh while displaying the entered text in a div element. The user's ...

javascriptmysqlajax

modal dropdown with overflow in ui-select

Currently, I am encountering an issue with the display of a ui-select dropdown inside a ui bootstrap modal that has overflow css set up. Whenever the ui-select dropdown is opened, the list of options appears within the modal but is partially obscured by t ...

cssangularjsoverflowangular-ui-bootstrapangular-ui-select

I'm encountering an error when trying to use makeStyles

Something seems off with MUI. I was working on my project yesterday and makeStyles was functioning properly, but now it's suddenly stopped working. I'm encountering an error when calling it here: I suspect the issue lies in the import statement ...

javascripttypescriptmaterial-ui

Rotating SVG images with ease at any center point

I attempted to remove the unsupported animateTransform element: <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 20 20" to="360 20 20" dur="1.2s" repeatCount="indefinite" /> and replaced it with CS ...

htmlcsssvg

Well, it appears that I am having trouble establishing a connection between the users in this chatting application

I'm encountering a problem with establishing a connection between two users. I have already installed express and socket.io, but for some reason, the message is not getting through to the receiver's end. The code seems to be running fine as I can ...

javascripthtmlcssjson

How can you identify when a Vuetify radio button is re-selected?

Currently, I am developing a wizard that involves triggering navigation when a radio button is selected. Users should also be able to go back and change their previous choices. However, one issue I have encountered is the difficulty in detecting a re-selec ...

javascriptvue.jsvuetify.js

Issue with child rows not functioning properly in DataTables when utilizing Datetime-moment

I've successfully integrated this data into live.datatables.net and almost have it running smoothly. However, I am encountering an issue with displaying the last detail as a child element. The final part of the row should be shown with the label "Mes ...

javascriptjquerydatetimedatatables

Using a UUID as the default ID in a Postgres database system is a straightforward process

As I transition to postgres from mongodb due to the recent announcement, I've noticed that the IDs are simply numerical and auto-incremented. I've attempted a few solutions: Setting the default ID to a UUID with a lifecycle hook - Unfortunately, ...

javascriptpostgresqlnext.jsstrapibookshelf.js

Developing a collection of reusable components in a Javascript bundle for enhanced efficiency

I currently have a backend rendered page (using Django) that I want to enhance by incorporating components from PrimeVue and a markdown editor wrapped as a Vue component. Previously, we utilized some simple animations with jQuery which we included directly ...

javascriptvue.jsnpmwebpackyarnpkg

Animate the coloring process with dynamic motion

Is there a way to dynamically fill a canvas with color and apply animation? I have successfully created a canvas cylinder that fills with color, but I'm hoping for a slow animation effect when the color is filled. I've tried searching on Google ...

jquerycsshtmlcanvashtml5-canvas

employing this for the second parameter

Utilizing this.value for $(".selector") is my goal with $("#style_background") serving as my save button. However, when I implement this code, the value coming through is 'save'. How can I achieve this using dania and seablue? $("#style_backgrou ...

javascriptjquery