Can I force the browser size to a percentage?

[jonmhayden]

Hi all,

I searched the documentation and found that you can change the view port size to a specific height and width. But that doesn't change the size percentage of the Electron browser in the runner. It turns out that the percentage matters for my test. My test drags a leaflet map to a specific place. When I wrote the test, the size in the runner displayed:

1000x660 (88%)

My test was working great and moving the map where I wanted it. And at some point I dragged the browser to make it larger and the tests started failing. I spent hours trying to figure out why this was happening. Then I noticed that the size now showed:

1000x660 (95%)

When I dragged the browser back to 88%, my tests started working again. Can I force it to always be 88%? Side note, if I do a cypress run so it's headless, the video playback shows:

1000x660 (79%)

So obviously, my test fails when I do it headless too because I made all the mouse movements when it was at 88%.

Any idea about what I can do to fix this? I'm not sure if it matters, but I'm using the cypress-real-events library to move my mouse and drag the map.

Thanks,
Jon

[stavares843]

Hello 👋

i was able to reproduce the same issue with headless using electron

after adding the below on as suggested here

module.exports = (on, config) => {
  addMatchImageSnapshotPlugin(on, config)
  on('before:browser:launch', (browser = {}, launchOptions) => {
    if (browser.name === 'electron') {
      launchOptions.preferences['width'] = 1920;
      launchOptions.preferences['height'] = 1080;
      launchOptions.preferences['resizable'] = false;
      return launchOptions
    }
    if (browser.name === 'chrome' && browser.isHeadless) {
      launchOptions.push('--window-size=1920,1080')
      return launchOptions
    }
  })
}

the % value disappears

would this help? 🔨

[jonmhayden]

Thanks for your help stavares843. I'm on Cypress 10 so maybe things are a little different between our results. I added that code and noticed a couple interesting things. For my testing, the percentage didn't go away. It still showed the percentage. But it did prevent the screen from being resized. After multiple experiments, I found that if I set width to 1253 and height to 768, that made the percentage 88%. So that allowed me to consistently run my test and have it pass because the viewport always opened up to 88% and wouldn't allow resizing so it couldn't screw anything up. However, when I run headless, the 1253x768 made the size 77%, according to the video, for some reason. So I have to get the percentage to 88% in headless mode now.

So in summary, forcing dimensions to 1253x768 causes the viewport to show

Perfect!!

But when I run headless with those settings, the viewport shows:

And I should add that when I run headless, the logging verifies the widthxheight of 1253x768.

So I can't figure out why using the runner versus headless gives different size percentages.