Improve screenshots

.gitignore

@@ -94,6 +94,8 @@ npm-debug.log*
 ## @cypress/snapshot from apm plugin
 /snapshots.js
 /apm-diagnostics*.json
+/x-pack/plugins/apm/ftr_e2e/cypress/e2e/service_map/snapshots/*.actual.png
+/x-pack/plugins/apm/ftr_e2e/cypress/e2e/service_map/snapshots/*.diff.png
 
 # transpiled cypress config
 x-pack/plugins/fleet/cypress.config.d.ts

x-pack/plugins/apm/ftr_e2e/cypress/e2e/service_map/service_map.cy.ts

@@ -55,25 +55,35 @@ describe('service map', () => {
     it('shows nodes in service map', () => {
       cy.visitKibana(serviceMapHref);
       cy.wait('@serviceMap');
-      cy.wait(500);
-      cy.getByTestSubj('serviceMap').matchImage({
-        imagesPath: '{spec_path}/snapshots',
-        matchAgainstPath: 'cypress/e2e/service_map/snapshots/service_map.png',
-        maxDiffThreshold: 0.05, // maximum threshold above which the test should fail
-      });
+      cy.getByTestSubj('apmServiceGroupsTourDismissButton').click();
+
+      prepareCanvasForScreenshot();
+
+      cy.withHidden('[data-test-subj="headerGlobalNav"]', () =>
+        cy.getByTestSubj('serviceMap').matchImage({
+          imagesPath: '{spec_path}/snapshots',
+          title: 'global_service_map',
+          matchAgainstPath: 'cypress/e2e/service_map/snapshots/service_map.png',
+          maxDiffThreshold: 0.02, // maximum threshold above which the test should fail
+        })
+      );
     });
 
     it('shows nodes in detailed service map', () => {
       cy.visitKibana(detailedServiceMap);
       cy.wait('@serviceMap');
       cy.contains('h1', 'opbeans-java');
-      cy.wait(500);
-      cy.getByTestSubj('serviceMap').matchImage({
-        imagesPath: '{spec_path}/snapshots',
-        matchAgainstPath:
-          'cypress/e2e/service_map/snapshots/detailed_service_map.png',
-        maxDiffThreshold: 0.05, // maximum threshold above which the test should fail
-      });
+
+      prepareCanvasForScreenshot();
+
+      cy.withHidden('[data-test-subj="headerGlobalNav"]', () =>
+        cy.getByTestSubj('serviceMap').matchImage({
+          imagesPath: '{spec_path}/snapshots',
+          matchAgainstPath:
+            'cypress/e2e/service_map/snapshots/detailed_service_map.png',
+          maxDiffThreshold: 0.02, // maximum threshold above which the test should fail
+        })
+      );
     });
 
     describe('when there is no data', () => {
@@ -89,3 +99,18 @@ describe('service map', () => {
     });
   });
 });
+
+function prepareCanvasForScreenshot() {
+  cy.get('html, body').invoke(
+    'attr',
+    'style',
+    'height: auto; scroll-behavior: auto;'
+  );
+
+  cy.wait(300);
+  cy.getByTestSubj('centerServiceMap').click();
+  cy.scrollTo('top');
+  cy.wait(300);
+  cy.getByTestSubj('centerServiceMap').click();
+  cy.wait(300);
+}

x-pack/plugins/apm/ftr_e2e/cypress/support/commands.ts

@@ -153,6 +153,12 @@ Cypress.Commands.add('dismissServiceGroupsTour', () => {
   );
 });
 
+Cypress.Commands.add('withHidden', (selector, callback) => {
+  cy.get(selector).invoke('attr', 'style', 'display: none');
+  callback();
+  cy.get(selector).invoke('attr', 'style', '');
+});
+
 // A11y configuration
 
 const axeConfig = {

x-pack/plugins/apm/ftr_e2e/cypress/support/types.d.ts

@@ -28,5 +28,6 @@ declare namespace Cypress {
     updateAdvancedSettings(settings: Record<string, unknown>): void;
     getByTestSubj(selector: string): Chainable<JQuery<Element>>;
     dismissServiceGroupsTour(): void;
+    withHidden(selector: string, callback: () => void): void;
   }
 }

x-pack/plugins/apm/public/components/app/service_map/controls.tsx

@@ -212,6 +212,7 @@ export function Controls() {
       <Panel hasShadow={true} paddingSize="none">
         <EuiToolTip anchorClassName="eui-displayInline" content={centerLabel}>
           <Button
+            data-test-subj="centerServiceMap"
             aria-label={centerLabel}
             color="text"
             iconType="crosshairs"