Cypress visual regression testing breaks because of JavaScript code that hides the page

[krisztianb]

Search terms

cypress cypress-visual-regression

Question

I'm trying to use cypress in combination with the cypress-visual-regression plugin for visual regression testing, like so:

cy.visit("./output/classes/someClass.html");
cy.get(".tsd-member-group").compareSnapshot("someClass-members");

This code visits the someClass.html page and takes a screenshot of the div with the class .tsd-member-group comparing it with an expected screenshot.

However I keep getting the following error message no matter what I want to screenshot with cypress:

CypressError: cy.screenshot() only works with a screenshot area with a height greater than zero.

I traced this down to the following JavaScript code that is located within the HTML file:

<script>document.documentElement.dataset.theme = localStorage.getItem("tsd-theme") || "os";document.body.style.display="none";setTimeout(() => app?app.showPage():document.body.style.removeProperty("display"),500)</script>

This code hides the content of the page and shows it after 500 milliseconds.

So my question is: Why do we need this code?

[Gerrit0]

This is from #2491

[krisztianb]

Thank you for the link. I guess this will stay the way it is for now.

Here is what I did to bypass this problem in case anybody has the same issue:

// remove script tags from page because they modify the HTML view
cy.intercept("your page URL", (req) => {
    req.continue((res) => {
        res.body = res.body.replace(/<script[^<]*<\/script>/gi, "");
    });
});

// hide stickily positioned page header because it messes up the cypress screenshot captures
cy.get("header").invoke("attr", "style", "display:none");