Screenshots should ignore task/menu bar size when taking screenshots

joanrieu commented 4 years ago

Current behavior:

Screenshots are smaller than the requested viewport size. The width is correct but the height is less than expected (as if the Chrome UI or Windows taskbar were taking some space away from the requested viewport).

Desired behavior:

Screenshots should have the requested viewport size.

Steps to reproduce:

Ask for a 1080p viewport and run cypress on a 1080p screen. The screenshot ends up being smaller than 1080p unless the window is manually set to fullscreen by pressing F11 before the screenshot is taken.

(some code can be provided if the issue cannot be reproduced)

Versions

Latest Cypress (installed last week). Windows 10 Chrome (up to date)

jennifer-shehane commented 4 years ago

Please provide a reproducible example of the issue including the cypress code to run to see this exactly.

Related issues:

joanrieu commented 4 years ago

This issue is similar to #2102 but #2102 is about cypress run (Xvfb is too small for the viewport) whereas this is about cypress open (Chrome is too small for the viewport).

I haven't had time to extract minimal code to reproduce yet.

jennifer-shehane commented 4 years ago

Unfortunately we'll have to close this issue if no reproducible example is provided. Can you provide a way to reproduce this?

joanrieu commented 4 years ago

Hi,

Here's the minimal code to reproduce:

describe('page', () => {
    it('takes a screenshot', () => {
        cy.viewport(1920, 1080)
            .visit('localhost:8000')
            .screenshot()
    })
})

It does not matter what page is visited, I used a simple python2 -m SimpleHTTPServer for my test. Run cypress open and run the test.

The resulting screenshot is 1920x1045 instead of 1920x1080. I can reproduce it reliably and independently of the capture mode passed: both fullPage or viewport result in the same 1920x1045 png file.

EDIT: To be more specific, this is running on a 1920x1200 screen, with Windows taskbar visible and Chrome window maximised. Chrome has an additional "Chrome is being controlled by an automated test software" banner displayed under the tabs and above the Cypress page.

EDIT 2: screen.availHeight reports 1160px in the Chrome devtools of the Cypress window (but opening the dev tools made Chrome's automated test banner disappear).

EDIT 3: Using the "scale": true option produces a weird-looking 1920x1080 or 1920x1045 png file (in fullPage or viewport mode, respectively) where the app takes around 60% of the image with black borders left, right and below.

telbiyski commented 4 years ago

Same issue. Also cannot get screenshot bigger than 1920. When i set the viewport in 4k in the runner is ok, but the screenshot is 1920. And why the config viewport W/H is not respect in headless mode and i have to put code like this: on('before:browser:launch', (browser = {}, args) => {....?

JanEggers commented 4 years ago

@jennifer-shehane same issue here and a simple repro:

im using cypress 4.7 cypress-plugin-snapshots: 1.4.3

context('MessageList', () => {
  beforeEach(() => {
    cy.viewport(1280, 800);
  });
  it('google', () => {
    cy.visit('https://google.com');
    cy.document().toMatchImageSnapshot();
  });
});

"cy open" works fine but "cy run" gives 1280 / 720 instead of 1280 / 800

JanEggers commented 4 years ago

@jennifer-shehane are you able to reproduce? (How) can I provide any more details to get this sorted out?

sainthkh commented 3 years ago

I confirmed that cy.screenshot() doesn't respect the requested viewport size. I tested with the code below:

describe('page', () => {
  it('takes a screenshot', () => {
    cy.viewport(1920, 1080)
    .visit('https://backlinko.com/')
    .screenshot({
      capture: 'viewport',
    })
  })
})

There are a few things to note:

Cypress opens a new browser instance and takes the screenshot. Because of that, we cannot take a screenshot bigger than the current resolution of your monitor. For example, I'm using 1680x1050 screen. Because of that, I cannot take 1920-width screenshots.
Taskbar and menu areas are ignored. As Ubuntu 20.04 has taskbar on the left, my screenshots have the width of 1608, not 1680. And the height is 905. I guess 175px is the time bar at the top + Chrome UI (tab names + address bar).

I guess there are 2 things to solve:

Is there a way to ignore task bar when taking screenshots?
Is there a way to take screenshots bigger than the monitor resolution?

p.s. @JanEggers Your problem is the duplicate of #2102. But I don't close this issue, because this issue is about cypress open, not cypress run.

jennifer-shehane commented 3 years ago

I swear I've seen this issue mentioned somewhere else but I can't find the issue. I think that I'm remembering writing this recipe - and realizing that screenshots in Firefox are not the max width of the headless screen size because of the menubars there: https://on.cypress.io/browser-launch-api#Set-screen-size-when-running-headless

module.exports = (on, config) => {
  on('before:browser:launch', (browser, launchOptions) => {
    if (browser.name === 'firefox' && browser.isHeadless) {
      // menubars take up height on the screen
      // so fullPage screenshot size is 1400x1126
      launchOptions.args.push('--width=1400')
      launchOptions.args.push('--height=1200')
    }

    return launchOptions
  })
}

Let's leave this issue open to focus on the task bar / menu bar situation when taking screenshots and leave the 'take screenshots larger than monitor' for another issue. (Let me see if this is open somewhere)

@JanEggers You're problem is actually closer to https://github.com/cypress-io/cypress/issues/3324 the other issue is about having screenshot/video size configurable https://github.com/cypress-io/cypress/issues/587

cypress-app-bot commented 1 year ago

This issue has not had any activity in 180 days. Cypress evolves quickly and the reported behavior should be tested on the latest version of Cypress to verify the behavior is still occurring. It will be closed in 14 days if no updates are provided.

cypress-app-bot commented 1 year ago

This issue has been closed due to inactivity.

cypress-io / cypress