Trying to test maps but have uggly cut offs.

[tester-at-bmi]

So i'm trying to test and make a screenshot of the map as shown below.

I have the following config:

const config = {
    ROOT_DIR: 'src/tests/e2e/cypress/test-results',
    CYPRESS_SCREENSHOT_OPTIONS: {
        capture: 'fullPage'
    }
};

module.exports = config;

The result of the screenshot/comparison as follows

Test case:

it('Snapshot', () => {
  cy.scrollTo('bottom');
  cy.get('div[data-testid="entities-map"]')
    .should('be.visible')
    .then(() => {
      cy.wait(1000);
      cy.get('div[data-testid="entities-map"]').compareSnapshot({
         name: 'map',
	 testThreshold: 0.2,
      });
   });
});

image-diff-test.mp4

Does anyone has a clue why this is happening and if this somehow can be sorted?

edit: So the screenshot functionality always seems to make a screenshort of the viewport above the fold. Even when you want to take a screenshot of a page that have been scrolled down.

[tester-at-bmi]

I found a solution for my problem and now it seems to be working as expected and would leave it here if more people walk into this.

cypress-io/cypress#2681 (comment)