[APM] Add snapshots to visual regression tests (#165834)

Added snapshots to the service map e2e test and other improvements.

Due to flakiness of the visual regression tests, we leave them skipped,
and we can continue investigating, this issue
https://github.com/elastic/kibana/issues/166050 was created with this
porpoise.

---------

Co-authored-by: Søren Louv-Jansen <soren.louv@elastic.co>

.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

@@ -50,27 +50,48 @@ describe('service map', () => {
   describe('when navigating to service map', () => {
     beforeEach(() => {
       cy.intercept('GET', '/internal/apm/service-map?*').as('serviceMap');
+    });
+
+    it.skip('shows nodes in service map', () => {
       cy.visitKibana(serviceMapHref);
-
       cy.wait('@serviceMap');
+      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 service map', { retries: 3 }, () => {
-      cy.wait(500);
-      cy.getByTestSubj('serviceMap').matchImage();
-    });
-
-    it('shows nodes in detailed service map', () => {
+    it.skip('shows nodes in detailed service map', () => {
       cy.visitKibana(detailedServiceMap);
+      cy.wait('@serviceMap');
       cy.contains('h1', 'opbeans-java');
-      cy.wait(500);
-      cy.getByTestSubj('serviceMap').matchImage();
+
+      prepareCanvasForScreenshot();
+
+      cy.withHidden('[data-test-subj="headerGlobalNav"]', () =>
+        cy.getByTestSubj('serviceMap').matchImage({
+          imagesPath: '{spec_path}/snapshots',
+          title: 'detailed_service_map',
+          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', () => {
       it('shows empty state', () => {
+        cy.visitKibana(serviceMapHref);
         // we need to dismiss the service-group call out first
-        cy.contains('Dismiss').click();
+        cy.getByTestSubj('apmServiceGroupsTourDismissButton').click();
         cy.getByTestSubj('apmUnifiedSearchBar').type('_id : foo{enter}');
         cy.contains('No services available');
         // search bar is still visible
@@ -79,3 +100,15 @@ 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');
+}

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"