Cypress sets the height of the size-container to 0px

[konekoya]

Hi there,

Current behavior:

I'm working on a single page web app that is built with React, React router 3.x and Redux. I use Cypress to test login, signup, create posts pages, etc. It all works well. But when I'm testing two particular pages. Their page height(on .size-container element) is sometimes set to 0px(see the screenshot, click on the screenshot to get a bigger view). And so the page cannot be seen. The test can be passed when I reset the viewport with cy.viewport() after visiting the page with cy.visit() but then I ended up with so many cy.viewport() in my test suites.

Desired behavior:

The height of the .size-container should not be 0px.

Steps to reproduce:

I've been trying to reproduce this bug but without success.
These two particular pages are a bit different when compare with others:

• They redirect from another route via react-router: when you go to the route forum/list, it will redirect you to forum/list/:category/:sort/.
• They use Chinese characters in the URL: something like forum/list/中文/中文

Versions

Cypress: 3.0.1
OS: macOS High Sierra 10.13.5
Browser: Google Chorme 67.0.3396.99 (Official Build) (64-bit)

Sorry, I know this is not a valid bug report since I cannot reproduce the bug. But I've been battling with this bug for two days and cannot find any directions from Google or stackoverflow.

Thanks for the help!

[jennifer-shehane]

This should definitely not be happening. A lot of the height calculations are done in this file: https://github.com/cypress-io/cypress/blob/develop/packages/runner/src/lib/state.js#L3

So, it's initially set to 660 and then adjusted depending on the scale/resizing of the window.

Do you have anything in your config.json, env variables on cypress open or any use of Cypress.env that is setting the viewportHeight property?

Also - this is likely unrelated, but could you try setting modifyObstructiveCode to false in your cypress.json config - see if that changes anything?

[konekoya]

Thanks for the quick reply, Jennifer!

Do you have anything in your config.json, env variables on cypress open or any use of Cypress.env that is setting the viewportHeight property?

Nope, I only use baseUrl in my cypress.json, following is my config file:

{
  "baseUrl": "http://localhost:3000/"
}

And I'm not usning env variables when running cypress open with npm scripts.

Also - this is likely unrelated, but could you try setting modifyObstructiveCode to false in your cypress.json config - see if that changes anything?

No, it's not changing anything.

Thanks for the help :)

[jennifer-shehane]

@konekoya Do you have any code within your application that does deal with setting the height of this element or other elements on the page?

This one is a weird one to track down and would be best if we could get a public url or reproducible example to try this on. I know that's difficult sometimes though.

[ghost]

@konekoya hello, we're also experiencing this issue in our tests and it's super hard to reproduce (next to impossible).

However, today I've noticed a particular case and I wonder if that's also true for you.

I have single test running in two suits on different versions of my site. In one test passes without any problems and I cannot see any exceptions or errors in JS console. On the other, however, I see that one of the script files failed to load with 404 and in this particular case Cypress constantly (!) loads page in 0px height container.

[jennifer-shehane]

@tkociemba-olx Could you try blacklisting the googletagmanager consistently and see if this happens due to that? https://on.cypress.io/configuration#blacklistHosts

So in your cypress.json config:

{
  "blacklistHosts": ["www.googletagmanager.com"]
}

[ghost]

@jennifer-shehane I've tried what you suggested and the test has passed. Unfortunately it also passed without this entry, so I guess it wasn't the reason after all. What I noticed though, is that today my page loads different set of advertisements than yesterday, which makes me to believe that the problem isn't with gtm but with some external scripts being loaded through one of our various ad partners.

I can try to blacklist them all and see if we still have this problem. I wonder if there would be a way to blacklist all external domains and maybe whitelist ones relevant to the page I'm testing.

Edit: I've done exactly that, blacklisted every single external host and what do you know - no grey screen (no 0px height container). Our test suites are as green as they should be.

[jennifer-shehane]

@tkociemba-olx Someone has opened a PR to pass a whitelist options for hosts #1451

[jennifer-shehane]

Closing as resolved. Please comment if you are still having this issue and we will consider reopening.

[konekoya]

@jennifer-shehane sorry, I'm not working on the project anymore. So it's difficult for me to provide a reproducible example 😅