Different image quality while using cy.get('<locator>').screenshot() command

[tarasMarieiev]

Current behavior

When I attempt to capture a screenshot of an element using cy.get('').screenshot(), the screenshot quality varies depending on the browser and mode used during the test run:

1. High-quality screenshots:

• In headed mode for both Chrome and Electron (npx cypress open).
• In headless mode, but only when using Electron (npx cypress run --browser electron).
  Example with dimension 780 × 413:
  

2. Low-quality screenshots:

• In headless mode with the Chrome browser (npx cypress run --browser chrome).
• When running the test in a Docker container, regardless of the browser (Chrome or Electron)
  Example -- Dimension 390 × 207:
  

Please let me know how to avoid this problem. I need to have the screenshots in a highest quality especially in docker and headless runs.

Desired behavior

I need to have the screenshots with the highest quality for the future parsing and testing.

Test code to reproduce

my test -- test.cy.ts:

describe('OCR testing', () => {
  beforeEach(() => {
    cy.visit('https://www.saucedemo.com/')
  });

  it('parse data with improved error handling', () => {
    const screenshotName = 'screenshot-electron'
    cy.wait(7000)
    cy.get('#login_credentials').screenshot(screenshotName)
    cy.wait(120 * 1000)
  })
})

dockerfile:

FROM cypress/browsers:node-22.12.0-chrome-131.0.6778.108-1-ff-133.0-edge-131.0.2903.70-1

WORKDIR /test-project

# Copy package.json and optionally lock file
COPY *.json ./

# Install dependencies
RUN npm install

# Copy Cypress config and source files
COPY cypress cypress/

# Compile the project
RUN npx tsc

# Copy Git history for Cypress metadata
COPY .git ./

# Set default command
ENTRYPOINT ["/usr/local/bin/npm", "run"]
CMD ["cy:run"]

Cypress Version

13.15.1

Node version

22.8.4

Operating System

macOS 15.1.1

Debug Logs

No response

Other

No response

[tarasMarieiev]

The issue was solved by adding the code into the cypress config:

export default defineConfig({
  ....
  viewportWidth: 1290,
  viewportHeight: 800,
  ......

  e2e: {
    ......
    setupNodeEvents(on, config) {
        on('before:browser:launch', (browser, launchOptions) => {
            if (browser.name === 'chrome' && browser.isHeadless) {
            launchOptions.args.push('--window-size=1400,1200')
            launchOptions.args.push('--force-device-scale-factor=2')
          }
          if (browser.name === 'electron' && browser.isHeadless) {
            launchOptions.preferences.width = 1400
            launchOptions.preferences.height = 1200
          }
          return launchOptions
        })
....

more details are here:
https://docs.cypress.io/api/node-events/browser-launch-api#Set-screen-size-when-running-headless