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

Ways to modify the height of a button without impacting other buttons?

My goal is to create a calculator that looks like the image attached below: However, I'm having trouble aligning the equal button properly. How can I adjust it to match the equal button in the image? Here's the code snippet I'm currently w ...

htmlcsstwitter-bootstrap

How to properly format credit card input using JavaScript or jQuery

I need to implement a feature where users input their credit card information, and once they complete the form, I want to display the credit card number in this format: xxxxxxxxxxxx1111 or xxxx-xxxx-xxxx-1111, without altering the actual input value. Is ...

javascriptjqueryhtmlinput

What causes the appearance of an HTTP header error and how can we identify the bug?

I tried to convert XML to JSON using two files which are included here. However, I keep encountering an error. Despite searching on SO for solutions, I haven't been able to find the answers. main.js /** SET ENGINE TO PUG */ app.set("views", ...

javascriptnode.jsexpresspug

What could be causing the issue of DataTables not functioning properly when using data from a new partial view?

After adding new data to a table via ajax using a partial view, the DataTable options like show entries, search, and pagination do not work with the new data. Instead, these options still display the old data. How can I refresh the datatables options with ...

jqueryajaxasp.net-mvc

The State in the useEffect hook does not update instantly

After conducting some research, I discovered that useState operates asynchronously. However, I am still struggling to resolve my specific issue. My task involves fetching data from an API, but the state is only updated during the second render. Furthermore ...

javascriptreactjsreact-hooks

increasing the `WeakSet` size while simultaneously causing a memory overload

There's something strange I observed. Despite using a WeakSet which should not retain any references, the code below still manages to exhaust memory: 'use strict'; require('babel-polyfill'); const s = new WeakSet(); for (let i = ...

javascriptnode.jsecmascript-6babeljs

Does Next.js pre-render every page, or does it only pre-render the initial page?

As I dive into the world of nextjs, I'm coming across conflicting information. Some sources claim that nextjs only prerenders the first page, while others suggest that all pages are prerendered by default. This contradiction has left me confused about ...

javascriptnext.jsfrontendserver-side-renderingpre-rendering

How can you determine if an API method call has completed in Angular and proceed to the next task?

Two methods are being used for api calls in my code. Method one is calling out method two and needs to wait for method two's api call to finish before continuing with its own process. I attempted to achieve this using the complete function inside a su ...

javascriptangulartypescript

Ways to organize JSON data from a fetch request into multiple divisions

I have written a JavaScript code to fetch JSON information. I plan on storing this JSON file locally (I downloaded an example file and added a birthdate object for my usage example from https://jsonplaceholder.typicode.com/users) My goal is to parse the r ...

javascriptjsonajaxfetchinnerhtml

The Pino error log appears to be clear of any errors, despite the error object carrying important

After making an AXIOS request, I have implemented a small error handling function that is called as shown below: try { ... } catch (error) { handleAxiosError(error); } The actual error handling function looks like this: function handleAxiosError(er ...

javascriptnode.jsloggingaxios

Using footable js will eliminate all form elements within the table

After incorporating the Footable jQuery library to create a responsive table, I encountered an issue with input tags and select boxes being removed by the Footable JavaScript. It turns all these tags into empty <td> elements. <table id="accordi ...

javascriptjqueryhtmlresponsivefootable

Ending a timer from a different function in a React component

Currently, I am delving into the world of React and attempting to create a timer component. While I have successfully implemented the start function for my timer, I am now faced with the challenge of stopping the timer using an onclick handler from another ...

javascriptreactjs

When making a variable call outside of a subscriber function, the returned value is 'undefined'

I find myself in a situation where I have to assign a value to a variable inside a subscriber function in Angular. The issue is that the variable returns 'undefined' when called outside of the Subscribe function. Here's what I'm encount ...

javascriptangulartypescriptangular-componentsangular9

Guide on setting a JSON object using the getJSON method

In my coding project, I am trying to assign values of lat and lng from a JSON object named branch to a variable called jsonData. When I use console.log to check jsonData.responseJSON.positions.length or jsonData.responseJSON.positions[0].lat, etc. I c ...

javascriptjqueryjsongetjson

Finished drawing remains on the iPad canvas within the browser

When it comes to clearing sketches on a canvas, I am experiencing some confusion. Despite successfully clearing the sketch from the canvas, as soon as I click to draw something new, the cleared sketch reappears in its original position. It seems like the ...

javascriptjqueryipadcanvas

Searching an array object inside another array object using JavaScript/AngularJS

Here is my issue: I am facing a situation where I have two Array objects as follows var array1 = [{ "id": 1, "name": "potatoe", photo="photo"}, {"id": 2, "name": "budget"}] var array2 = [{ "id": 1, "name": "potatoeModified"},{ "id": 3, "name": "UhOhA ...

javascriptangularjs

What is the correct way to update an array of objects using setState in React?

I am facing an issue where I have an array of objects that generates Close buttons based on the number of items in it. When I click a Close button, my expectation is that the array should be updated (removed) and the corresponding button element should dis ...

javascriptarraysreactjs

When all y values are zero, Highcharts.js will shift the line to the bottom of the chart

Is there a way to move the 0 line on the y axis to the bottom of the chart when all values are 0? I attempted the solution provided in this post without success. Highcharts: Ensure y-Axis 0 value is at chart bottom http://jsfiddle.net/tZayD/58/ $(functi ...

javascriptjquerycsschartshighcharts

Determining whether a PFUser is being created or updated with the AfterSave function

Struggling to differentiate between whether a PFUser is being updated or saved for the first time? I tried implementing a solution from parse.com here, but it's not working as expected. No matter what, I always end up with a false value, be it an init ...

javascriptiosswiftparse-platformparse-cloud-code

The seamless integration of React.js with HTML

My friend and I are beginners in the world of programming, with a solid grasp of html, CSS, and JavaScript. We're currently collaborating on a small project where we aim to create a chat system. While researching resources for our project, we came acr ...

javascripthtmlreactjs