The be.visible assertion is not passing because the element is positioned as fixed and is currently overlapped by another element

Here is the assertion in question:

cy.get('[data-cy="myElement"] > path')
.should('be.visible')

The error encountered is as follows:

After waiting for 12000ms, the following error occurred: expected '' to be 'visible'

This element is not visible due to its CSS property: position: fixed and it being covered by another element:

<svg class="coveringElement" focusable="false" 
 aria-hidden="true" viewBox="0 0 24 24" name="large">...</svg>

Past solutions have tackled issues with .get and .click, but none specifically addressed the failure caused by the position: fixed property.

Objective:

To successfully assert that the element is visibly present within the application.

Additional insights:

  • The element I am validating is typically visible when using the app and is not obscured visually.
  • These elements are contained within a dialog box.
  • If I use 'exists' instead of 'visible', the assertion passes.
  • Efforts to utilize .invoke to conceal the covering element yielded no results.

Answer №1

When executing a Cypress test, it is not recommended to use the <path> element for actions like .click().

The main purpose of this element is to specify the image to draw for the parent <svg> element.

Instead, consider clicking on the <svg> itself (i.e., the icon).

cy.get('[data-cy="myElement"]')
  .should('be.visible')
  .click()

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

What are some effective strategies for designing the HTML/CSS layout when utilizing Electron?

Are people usually keying in the values manually, or is there a user interface (UI) builder available that works like the drag-and-drop UI builders found in Android and iOS? Just like how many websites today utilize site builders rather than requiring ma ...

Utilizing shared enums in Angular services

My services contain an enum that I need to share with another service's method. How can I pass this enum as a parameter effectively? home.factory('myService', ['$dialogs', '$resource', function ($dialogs, $resource) { ...

Retrieving the maximum number and its corresponding name from an object using JavaScript

Check out my cool react app at this link: https://i.stack.imgur.com/9VpCd.jpg I've been working on a function to find the highest and lowest latitude along with the corresponding city names. Currently, I have successfully retrieved the latitudes but ...

What mechanisms do frameworks use to update the Document Object Model (DOM) without relying on a

After delving into the intricate workings of React's virtual DOM, I have come to comprehend a few key points: The virtual DOM maintains an in-memory representation of the actual DOM at all times When changes occur within the application or compo ...

Update the grand total based on the values of the checkboxes

I have a code snippet that successfully calculates the total value based on the checkboxes that are selected. Each checkbox has a data attribute value, and I want the total to update dynamically as checkboxes are ticked or unticked. Currently, the code ju ...

Cordova's FileReader takes precedence over TypeScript's FileReader functionality

I encountered an issue when adding the cordova-plugin-file-transfer plugin, where I received the error message: reader.addEventListener is not a function. This problem arises due to Cordova FileReader class overriding typescript FileReader. How can this ...

Adjust the jQuery.ScrollTo plugin to smoothly scroll an element to the middle of the page both vertically and horizontally, or towards the center as much as possible

Visit this link for more information Have you noticed that when scrolling to an element positioned to the left of your current scroll position, only half of the element is visible? It would be ideal if the entire element could be visible and even centere ...

Tips for obtaining validation errors on input elements in React when the input field is of type "file"

Currently, I am utilizing Material UI to cover the input component with icons. However, I have encountered an issue where there is an input element hidden and as a result, validation errors are not being displayed. The library I am using for validation i ...

Encountering an out of memory error when using cypress to validate a zip file with adm-zip

While attempting to validate the contents of a zip file using adm-zip and cypress, I encountered an out of memory error in cypress. The Zip file may contain .txt, .pdf, .ppt, or .docx files. I am interested in validating the following within the zip file: ...

Identical manipulator distinct infusion

I am looking to create multiple controllers that share the same logic, with only differences in injections. One way to achieve this is by creating controllers using a common function like so: var controllerFunc = function($scope, service) { $scope.se ...

Inject some content into the page with the power of jQuery

Currently working with jQuery, I have a div containing H2 tags. <div id="preload"><h2></h2></div> I'm looking to understand how to use jQuery to insert text inside the <h2> tags The expected outcome should be: <div ...

Tips for avoiding derived class properties from overshadowing base class properties

Upon examining the following typescript code, my expectation was that it would lead to a compile error. The reason being, the property in the derived class shares the same name as the property in the base class but with a different type. Surprisingly, th ...

Using JSON data in an ArrayBuffer with TypeScript

I am currently struggling with converting the received ArrayBuffer data from a server via Websocket into another format. Below is the WebSocket code snippet: let ws = new WebSocket('wss://api.example.com/websocket'); ws.binaryType = 'arrayb ...

The recommended filename in Playwright within a Docker environment is incorrectly configured and automatically defaults to "download."

Trying to use Playwright to download a file and set the filename using download.suggestedFilename(). Code snippet: const downloadPromise = page.waitForEvent('download', {timeout:100000}) await page.keyboard.down('Shift') await p ...

Interpolation is not available for my Angular application

I am having trouble with using interpolation on my input in this code. I tried setting the value of the input to be the same as the User's username, but it doesn't seem to work. <ion-header> <ion-toolbar> <ion-buttons slot=&q ...

Avoid the default behavior when employing jQuery for Ajax requests

I am facing an issue with preventing the default action when submitting a form using ajax. It seems that my code is causing a page refresh and clearing the form without sending any data to the database. I tried including the php processing script link in t ...

Accessing HTML generated from a PHP file through AJAX

I'm currently attempting to retrieve the file content of an HTML rendering from a specific URL. Below is the code I am utilizing, which consistently results in an error: $.ajax({ type: 'POST', url: 'http://www.withhold ...

Having trouble connecting angular repository data with promise

I have been trying to implement the repository pattern in my Angular application. I can see that the JSON data is successfully retrieved over the network when I call my repository, but I am facing issues with binding it to my view. I have injected the rep ...

HTML pages are free from any visible banner ads

There is a file named banners.js function addEvent(object, evName, fnName, cap) { if (object.attachEvent) object.attachEvent("on" + evName, fnName); else if (object.addEventListener) object.addEventListener(evName, fnName, cap); } ...

Easiest way to find what you need with Meteor

As a newcomer to Meteor, I am attempting to incorporate a straightforward search feature into the website. While similar inquiries exist on Stack Overflow, none of the solutions have proven to be suitable for my situation. The search bar is located in the ...