cy.screenshot() not reflecting viewportWidth and viewportHeight settings, resulting in offset

[Silencesnow]

Current behavior

when using cy.screenshot(), the settings for viewportWidth and viewportHeight are not being reflected, leading to offset related issues.

Desired behavior

The images generated by cy.screenshot() should match the dimensions set by viewportWidth and viewportHeight, and should have no offset.

Test code to reproduce

My config:

import { defineConfig } from 'cypress'
export default defineConfig({
  viewportWidth: 2000,
  viewportHeight: 1320,
  e2e: {},
})

my test:

describe('test', () => {
  it('Does not do much!', () => {
    expect(true).to.equal(true)
    cy.screenshot()
  })
})

the screenshot:

Cypress Version

13.5.0

Node version

v16.15.1

Operating System

macOS 13.4

Debug Logs

cypress:server:project project has config { viewportWidth: 2000, viewportHeight: 1320, projectRoot: 'myPath', projectName: 'ling-web-vector-workbench', repoRoot: 'myPath', rawJson: { viewportWidth: 2000, viewportHeight: 1320, e2e: {}, envFile: {}, projectRoot: 'myPath', projectName: 'ling-web-vector-workbench', repoRoot: 'myPath' }, configFile: 'test.config.ts', morgan: false, isTextTerminal: true, socketId: 'wic92cyxkq', report: true, animationDistanceThreshold: 5, arch: 'arm64', baseUrl: null, blockHosts: null, chromeWebSecurity: true, clientCertificates: [], defaultCommandTimeout: 4000, downloadsFolder: 'myPath', env: {}, execTimeout: 60000, experimentalCspAllowList: false, experimentalFetchPolyfill: false, experimentalInteractiveRunEvents: false, experimentalRunAllSpecs: false, experimentalMemoryManagement: false, experimentalModifyObstructiveThirdPartyCode: false, experimentalSkipDomainInjection: null, experimentalOriginDependencies: false, experimentalSourceRewriting: false, experimentalSingleTabRunMode: false,...}
-------------------
cypress:server:browsers:electron browser window options { browser: { name: 'electron', channel: 'stable', family: 'chromium', displayName: 'Electron', version: '114.0.5735.289', path: '', majorVersion: 114, isHeadless: true, isHeaded: false }, url: 'http://localhost:55476/__/#/specs/runner?file=cypress/e2e/1.cy.js', browsers: [ { name: 'chrome', family: 'chromium', channel: 'stable', displayName: 'Chrome', version: '120.0.6099.109', path: '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome', minSupportedVersion: 64, majorVersion: '120' }, { name: 'firefox', family: 'firefox', channel: 'stable', displayName: 'Firefox', version: '113.0.2', path: '/Applications/Firefox.app/Contents/MacOS/firefox', minSupportedVersion: 86, majorVersion: '113' }, { name: 'electron', channel: 'stable', family: 'chromium', displayName: 'Electron', version: '114.0.5735.289', path: '', majorVersion: 114 } ], userAgent: null, proxyUrl: 'http://localhost:55476', proxyServer: 'http://localhost:55476', socketIoRoute: '/__socket', chromeWebSecurity: true, isTextTerminal: true, downloadsFolder: 'myPath', experimentalModifyObstructiveThirdPartyCode: false, experimentalWebKitSupport: false, protocolManager: undefined, projectRoot: 'myPath', shouldLaunchNewTab: false, videoApi: undefined, automationMiddleware: { onBeforeRequest: [Function: onBeforeRequest], onAfterResponse: [Function: onAfterResponse] }, x: null, y: null, width: 1280, height: 720, minWidth: 100, minHeight: 100, devTools: false, contextMenu: true, partition: 'persist:run-38876', trackState: { width: 'browserWidth', height: 'browserHeight', x: 'browserX', y: 'browserY', devTools: 'isBrowserDevToolsOpen' }, webPreferences: { sandbox: true, partition: null, webSecurity: true, nodeIntegration: false, backgroundThrottling: false }, show: false, resizable: false, frame: true, recordFrameRate: null } +0ms
-----------------------
 cypress:server:screenshot (s3) capturing screenshot { titles: [ 'test', 'Does not do much!' ], testId: 'r3', testAttemptIndex: 0, capture: 'fullPage', clip: { x: 0, y: 0, width: 1280, height: 720 }, viewport: { width: 1280, height: 720 }, scaled: false, blackout: [], overwrite: false, startTime: '2023-12-18T03:04:29.202Z', appOnly: true, hideRunnerUi: false, current: 1, total: 1, specName: '1.cy.js' } +0ms
  cypress:server:screenshot (s3) capture and check { tries: 1, totalDuration: 0 } +0ms
  cypress:server:screenshot (s3) received screenshot data from automation layer data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACgAAAAWgCAYAAACSABrfAAABHGlDQ1BTa2lhAAAokX2QsUrDUBSGP7 +143ms
  cypress:server:screenshot (s3) read buffer to image 2560 x 1440 +116ms
  cypress:server:screenshot (s3) helper pixels
  cypress:server:screenshot  {
  cypress:server:screenshot   topLeft: { r: 241, g: 242, b: 249, a: 255, isNotWhite: true },
  cypress:server:screenshot   topLeftRight: { r: 241, g: 242, b: 249, a: 255, isWhite: false },
  cypress:server:screenshot   topLeftDown: { r: 241, g: 242, b: 249, a: 255, isWhite: false },
  cypress:server:screenshot   bottomLeft: { r: 241, g: 242, b: 249, a: 255, isWhite: false },
  cypress:server:screenshot   topRight: { r: 241, g: 242, b: 249, a: 255, isWhite: false },
  cypress:server:screenshot   bottomRight: { r: 241, g: 242, b: 249, a: 255, isBlack: false }
  cypress:server:screenshot } +0ms
  cypress:server:screenshot (s3) pixelConditionFn { pixelRatio: 2, subject: 'app', hasPixels: false, expectedPixels: false } +0ms
  cypress:server:screenshot (s3) no previous image to compare +0ms
  cypress:server:screenshot (s3) resolving with image { tries: 1, totalDuration: 0 } +0ms
  cypress:server:screenshot (s3) pixel ratio is 2 +0ms
  cypress:server:screenshot (s3) multi-part 1/1 +0ms
  cypress:server:screenshot (s3) dimensions before are { x: 0, y: 0, width: 1280, height: 720 } +0ms
  cypress:server:screenshot (s3) dimensions for cropping are { x: 0, y: 0, width: 2560, height: 1440 } +0ms
  cypress:server:screenshot (s3) crop: from 0, 0 +0ms
  cypress:server:screenshot (s3)         to 2560 x 1440 +0ms

Other

No response

[jennifer-shehane]

@Silencesnow This is due to the screenshot always being restricted by the screen size. In --headless mode in Cypress, we set the screen size to 1280x720 by default (it will show as 2x in retina screens). #3324

I completely agree that it is confusing. You can override the screen size by following these directions. https://docs.cypress.io/api/plugins/browser-launch-api#Set-screen-size-when-running-headless

Closing as duplicate.

[Silencesnow]

The screenshots taken within the Cypress Test Runner also experience offset. What I expect is for them to accurately reflect the viewportWidth and viewportHeight.