Order the snapshots with Jest-image-snapshot 3

bpmn.navigation.test.ts

import { gotoPageWithBPMNContainer, getConfig } from './helpers/image-snapshot-config';

it(`no visual regression for drag & drop with the mouse of the BPMN content in the container`, async () => {
  const bpmnContainerElement = await gotoPageWithBPMNContainer();
  const bounding_box = await bpmnContainerElement.boundingBox();

  // Move the mouse pointer to the center of the BPMN Container
  const containerCenterX = bounding_box.x + bounding_box.width / 2;
  const containerCenterY = bounding_box.y + bounding_box.height / 2;
  await page.mouse.move(containerCenterX, containerCenterY);

  // Drag & Drop the BPMN content in the BPMN Container
  await page.mouse.down();
  await page.mouse.move(containerCenterX + 150, containerCenterY + 40);
  await page.mouse.up();

  // Take the screenshot of the page with Playwright
  const image = await page.screenshot({ fullPage: true });

  // Compare the taken screenshot with the baseline screenshot (if exists), or create it (else)
  const config = getConfig('__image_snapshots__/navigation');
  expect(image).toMatchImageSnapshot(config);
});