I'm trying to take a screenshot of an element with the hover effect, but the screenshots always come out without the hover effect.
tableListMaps.lineWithText('Hello world', 'myLine');
cy.get('@myLine').realHover().within(() => {
highlightElement(commonMaps.BUTTON_DOWNLOAD_INLINE);
});
cy.screenshot('downloadScreenshot');
If I later on come back and hover over this element, I can see what I was trying to highlight was highlighted successfully, but it wasn't captured by the screenshot.
Is there a way I could "fixate" the hover effect?
Known limitation. See dmtrKovalenko/cypress-real-events docs:
- Why
cy.realHoverhovering state does not show in the visual regression services?Unfortunately, visual regression services like Happo and Percy do not solve this issue. Their architecture is based on saving dom snapshot, not the screenshot, and then rendering the snapshot on their machines. It means that the hover and focus state will be lost if it won't be serialized manually.
It means that if you will use plain
cy.screenshotit will take a screenshot with a hovering state because using the browser itself to make a screenshot. Testing hovering state is possible with, for example, Visual Regression Tracker and cypress-image-snapshot.
As pointed out by dmtrKovalenko in here:
Yeah this is likely impossible :) Cypress is doing some work in preparation between screenshot that will break hover
But I managed to do a workaround. The solution was to manually set the CSS expected in hovering state. Example:
tableListMaps.lineWithText('Hello world', 'myLine');
cy.get('@myLine').within(() => {
cy.get(commonMaps.BUTTON_DOWNLOAD_INLINE).then(($element) => {
$element.css('visibility', 'visible');
});
highlightElement(commonMaps.BUTTON_DOWNLOAD_INLINE);
});
cy.screenshot('downloadScreenshot');
Since hovering over myLine would set the button visibility to "visible", what I did was just set it myself via CSS.
This way, I can take the screenshot as if the element was actually hovered. Then I set visibility to hidden again and background color to the original as well.
TL;DR: just simulate a hovering effect with CSS and take the screenshot.
cy.get(myElement).then(($element) => {
$element.css('visibility', 'visible');
$element.css('background-color', '#F2F2F2');
});