search

cypress-io / cypress

Fast, easy and reliable testing for anything that runs in a browser.
https://cypress.io
MIT License
47.08k stars 3.19k forks source link

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

Closed Silencesnow closed 11 months ago

Silencesnow commented 11 months ago

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: test -- Does not do much!

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 commented 11 months ago

@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). https://github.com/cypress-io/cypress/issues/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 commented 11 months ago

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