Capture screenshot of an element without resizing the viewport of cypress

Question

I have set up viewport as below.

Cy.viewport(1440,700)

Then taking the screenshot

Cy.get('xxxx').toMatchImageSnapshot()

But when taking screenshot, the browser is resizing to fit to the browser window size. How to control the browser resizing.

Cypres package v- 8.3.1

Answer 1

Either override the default fullPage capture option when taking the screenshot like this:

cy.get('xxxx').toMatchImageSnapshot({capture: 'viewport'});

Or set it globally in cypress/support/index.js file like this:

Cypress.Screenshot.defaults({
  capture: 'viewport'
});

Reference: https://docs.cypress.io/api/commands/screenshot#Arguments