[APM] Record e2e tests to Cypress dashboard and enable screenshots, videos and test retries (#142398)

* Record e2e tests to Cypress dashboard and enable screenshots and videos

* Delete videos that have no failures or retries

* Set browser witdh and height for tests

* Fix flaky test for storage explorer

* Remove cypress plugin file

* Fix typo in spec name

* Enable test retries

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

.buildkite/scripts/steps/functional/apm_cypress.sh

@@ -4,6 +4,8 @@ set -euo pipefail
 
 source .buildkite/scripts/common/util.sh
 
+APM_CYPRESS_RECORD_KEY="$(retry 5 5 vault read -field=CYPRESS_RECORD_KEY secret/kibana-issues/dev/apm-cypress-dashboard-record-key)"
+
 .buildkite/scripts/bootstrap.sh
 .buildkite/scripts/download_build_artifacts.sh
 
@@ -15,4 +17,6 @@ cd "$XPACK_DIR"
 
 checks-reporter-with-killswitch "APM Cypress Tests" \
   node plugins/apm/scripts/test/e2e.js \
-  --kibana-install-dir "$KIBANA_BUILD_LOCATION"
+  --kibana-install-dir "$KIBANA_BUILD_LOCATION" \
+  --record \
+  --key "$APM_CYPRESS_RECORD_KEY"

x-pack/plugins/apm/ftr_e2e/cypress.config.ts

@@ -6,9 +6,10 @@
  */
 
 import { defineConfig } from 'cypress';
-import { plugin } from './cypress/plugins';
+import { setupNodeEvents } from './setup_cypress_node_events';
 
 module.exports = defineConfig({
+  projectId: 'omwh6f',
   fileServerFolder: './cypress',
   fixturesFolder: './cypress/fixtures',
   screenshotsFolder: './cypress/screenshots',
@@ -18,16 +19,16 @@ module.exports = defineConfig({
   defaultCommandTimeout: 30000,
   execTimeout: 120000,
   pageLoadTimeout: 120000,
-  viewportHeight: 900,
+  viewportHeight: 1800,
   viewportWidth: 1440,
-  video: false,
-  screenshotOnRunFailure: false,
+  video: true,
+  videoUploadOnPasses: false,
+  screenshotOnRunFailure: true,
+  retries: {
+    runMode: 1,
+  },
   e2e: {
-    // We've imported your old cypress plugins here.
-    // You may want to clean this up later by importing these.
-    setupNodeEvents(on, config) {
-      plugin(on, config);
-    },
+    setupNodeEvents,
     baseUrl: 'http://localhost:5601',
     supportFile: './cypress/support/e2e.ts',
     specPattern: './cypress/e2e/**/*.cy.{js,jsx,ts,tsx}',

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

@@ -89,14 +89,27 @@ describe('Storage Explorer', () => {
     });
 
     it('has a list of services and environments', () => {
-      cy.contains('opbeans-node');
-      cy.contains('opbeans-java');
-      cy.contains('opbeans-rum');
+      cy.contains(
+        '[data-test-subj="apmStorageExplorerServiceLink"]',
+        'opbeans-node'
+      );
+      cy.contains(
+        '[data-test-subj="apmStorageExplorerServiceLink"]',
+        'opbeans-java'
+      );
+      cy.contains(
+        '[data-test-subj="apmStorageExplorerServiceLink"]',
+        'opbeans-rum'
+      );
       cy.get('td:contains(production)').should('have.length', 3);
     });
 
     it('when clicking on a service it loads the service overview for that service', () => {
-      cy.contains('opbeans-node').click({ force: true });
+      cy.contains(
+        '[data-test-subj="apmStorageExplorerServiceLink"]',
+        'opbeans-node'
+      ).click();
+
       cy.url().should('include', '/apm/services/opbeans-node/overview');
       cy.contains('h1', 'opbeans-node');
     });

x-pack/plugins/apm/ftr_e2e/setup_cypress_node_events.ts

@@ -11,28 +11,13 @@ import {
   LogLevel,
 } from '@kbn/apm-synthtrace';
 import { createEsClientForTesting } from '@kbn/test';
+import { some } from 'lodash';
+import del from 'del';
 
-// ***********************************************************
-// This example plugins/index.ts can be used to load plugins
-//
-// You can change the location of this file or turn off loading
-// the plugins file with the 'pluginsFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/plugins-guide
-// ***********************************************************
-
-// This function is called when a project is opened or re-opened (e.g. due to
-// the project's config changing)
-
-/**
- * @type {Cypress.PluginConfig}
- */
-
-export const plugin: Cypress.PluginConfig = (on, config) => {
-  // `on` is used to hook into various events Cypress emits
-  // `config` is the resolved Cypress config
-
+export function setupNodeEvents(
+  on: Cypress.PluginEvents,
+  config: Cypress.PluginConfigOptions
+) {
   const client = createEsClientForTesting({
     esUrl: config.env.ES_NODE,
     requestTimeout: config.env.ES_REQUEST_TIMEOUT,
@@ -65,4 +50,24 @@ export const plugin: Cypress.PluginConfig = (on, config) => {
       return null;
     },
   });
-};
+
+  on('after:spec', (spec, results) => {
+    // Delete videos that have no failures or retries
+    if (results && results.video) {
+      const failures = some(results.tests, (test) => {
+        return some(test.attempts, { state: 'failed' });
+      });
+      if (!failures) {
+        del(results.video);
+      }
+    }
+  });
+
+  on('before:browser:launch', (browser, launchOptions) => {
+    if (browser.name === 'electron' && browser.isHeadless) {
+      launchOptions.preferences.width = 1440;
+      launchOptions.preferences.height = 1600;
+    }
+    return launchOptions;
+  });
+}