Trying to test maps but have uggly cut offs.

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,
      });
   });
});

https://github.com/uktrade/cypress-image-diff/assets/100684771/fa361319-be48-4eaf-87b5-cd25acfeb85f

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.

haim-io / cypress-image-diff

Trying to test maps but have uggly cut offs. #212