[Synthetics] Custom reporter for e2e testing (#148251)

.buildkite/pipelines/pull_request/observability_plugin.yml

@@ -5,6 +5,8 @@ steps:
       queue: n2-4-spot
     depends_on: build
     timeout_in_minutes: 120
+    artifact_paths:
+      - 'x-pack/plugins/observability/e2e/.journeys/**/*'
     retry:
       automatic:
         - exit_status: '-1'

.buildkite/pipelines/pull_request/synthetics_plugin.yml

@@ -5,6 +5,8 @@ steps:
       queue: n2-4-spot
     depends_on: build
     timeout_in_minutes: 120
+    artifact_paths:
+      - 'x-pack/plugins/synthetics/e2e/.journeys/**/*'
     retry:
       automatic:
         - exit_status: '-1'

.buildkite/pipelines/pull_request/ux_plugin_e2e.yml

@@ -5,6 +5,8 @@ steps:
       queue: n2-4-spot
     depends_on: build
     timeout_in_minutes: 120
+    artifact_paths:
+      - 'x-pack/plugins/ux/e2e/.journeys/**/*'
     retry:
       automatic:
         - exit_status: '-1'

x-pack/plugins/observability/e2e/journeys/exploratory_view.ts

@@ -6,10 +6,13 @@
  */
 
 import { journey, step, before } from '@elastic/synthetics';
+import { recordVideo } from '../record_video';
 import { createExploratoryViewUrl } from '../../public/components/shared/exploratory_view/configurations/exploratory_view_url';
 import { loginToKibana, TIMEOUT_60_SEC, waitForLoadingToFinish } from '../utils';
 
 journey('Exploratory view', async ({ page, params }) => {
+  recordVideo(page);
+
   before(async () => {
     await waitForLoadingToFinish({ page });
   });

x-pack/plugins/observability/e2e/journeys/single_metric.journey.ts

@@ -6,10 +6,13 @@
  */
 
 import { journey, step, before } from '@elastic/synthetics';
+import { recordVideo } from '../record_video';
 import { createExploratoryViewUrl } from '../../public/components/shared/exploratory_view/configurations/exploratory_view_url';
 import { loginToKibana, TIMEOUT_60_SEC, waitForLoadingToFinish } from '../utils';
 
 journey('SingleMetric', async ({ page, params }) => {
+  recordVideo(page);
+
   before(async () => {
     await waitForLoadingToFinish({ page });
   });

x-pack/plugins/observability/e2e/journeys/step_duration.journey.ts

@@ -5,15 +5,23 @@
  * 2.0.
  */
 
-import { journey, step, before } from '@elastic/synthetics';
+import { journey, step, before, after } from '@elastic/synthetics';
+import { recordVideo } from '../record_video';
 import { createExploratoryViewUrl } from '../../public/components/shared/exploratory_view/configurations/exploratory_view_url';
 import { loginToKibana, TIMEOUT_60_SEC, waitForLoadingToFinish } from '../utils';
 
 journey('Exploratory view', async ({ page, params }) => {
+  recordVideo(page);
+
   before(async () => {
     await waitForLoadingToFinish({ page });
   });
 
+  after(async () => {
+    // eslint-disable-next-line no-console
+    console.log(await page.video()?.path());
+  });
+
   const expUrl = createExploratoryViewUrl({
     reportType: 'kpi-over-time',
     allSeries: [

x-pack/plugins/observability/e2e/record_video.ts

@@ -0,0 +1,29 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import fs from 'fs';
+import Runner from '@elastic/synthetics/src/core/runner';
+import { after, Page } from '@elastic/synthetics';
+
+const SYNTHETICS_RUNNER = Symbol.for('SYNTHETICS_RUNNER');
+
+// @ts-ignore
+export const runner: Runner = global[SYNTHETICS_RUNNER];
+
+export const recordVideo = (page: Page) => {
+  after(async () => {
+    try {
+      const videoFilePath = await page.video()?.path();
+      const pathToVideo = videoFilePath?.replace('.journeys/videos/', '').replace('.webm', '');
+      const newVideoPath = videoFilePath?.replace(pathToVideo!, runner.currentJourney!.name);
+      fs.renameSync(videoFilePath!, newVideoPath!);
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.log('Error while renaming video file', e);
+    }
+  });
+};

x-pack/plugins/observability/e2e/synthetics_runner.ts

@@ -13,6 +13,7 @@ import { PromiseType } from 'utility-types';
 import { createApmUsers } from '@kbn/apm-plugin/server/test_helpers/create_apm_users/create_apm_users';
 
 import { esArchiverUnload } from './tasks/es_archiver';
+import { TestReporter } from './test_reporter';
 
 export interface ArgParams {
   headless: boolean;
@@ -103,10 +104,14 @@ export class SyntheticsRunner {
           height: 900,
           width: 1600,
         },
+        recordVideo: {
+          dir: '.journeys/videos',
+        },
       },
       match: match === 'undefined' ? '' : match,
       pauseOnError,
       screenshots: 'only-on-failure',
+      reporter: TestReporter,
     });
 
     await this.assertResults(results);
@@ -115,7 +120,8 @@ export class SyntheticsRunner {
   assertResults(results: PromiseType<ReturnType<typeof syntheticsRun>>) {
     Object.entries(results).forEach(([_journey, result]) => {
       if (result.status !== 'succeeded') {
-        throw new Error('Tests failed');
+        process.exitCode = 1;
+        process.exit();
       }
     });
   }

x-pack/plugins/observability/e2e/test_reporter.ts

@@ -0,0 +1,222 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { Journey, Step } from '@elastic/synthetics/dist/dsl';
+import { Reporter, ReporterOptions } from '@elastic/synthetics';
+import {
+  JourneyEndResult,
+  JourneyStartResult,
+  StepEndResult,
+} from '@elastic/synthetics/dist/common_types';
+
+import { yellow, green, cyan, red, bold } from 'chalk';
+
+// eslint-disable-next-line no-console
+const log = console.log;
+
+import { performance } from 'perf_hooks';
+import * as fs from 'fs';
+import { gatherScreenshots } from '@elastic/synthetics/dist/reporters/json';
+import { CACHE_PATH } from '@elastic/synthetics/dist/helpers';
+import { join } from 'path';
+
+function renderError(error: any) {
+  let output = '';
+  const outer = indent('');
+  const inner = indent(outer);
+  const container = outer + '---\n';
+  output += container;
+  let stack = error.stack;
+  if (stack) {
+    output += inner + 'stack: |-\n';
+    stack = rewriteErrorStack(stack, findPWLogsIndexes(stack));
+    const lines = String(stack).split('\n');
+    for (const line of lines) {
+      output += inner + '  ' + line + '\n';
+    }
+  }
+  output += container;
+  return red(output);
+}
+
+function renderDuration(durationMs: number) {
+  return Number(durationMs).toFixed(0);
+}
+
+export class TestReporter implements Reporter {
+  metrics = {
+    succeeded: 0,
+    failed: 0,
+    skipped: 0,
+  };
+
+  journeys: Map<string, Array<StepEndResult & { name: string }>> = new Map();
+
+  constructor(options: ReporterOptions = {}) {}
+
+  onJourneyStart(journey: Journey, {}: JourneyStartResult) {
+    if (process.env.CI) {
+      this.write(`\n--- Journey: ${journey.name}`);
+    } else {
+      this.write(bold(`\n Journey: ${journey.name}`));
+    }
+  }
+
+  onStepEnd(journey: Journey, step: Step, result: StepEndResult) {
+    const { status, end, start, error } = result;
+    const message = `${symbols[status]}  Step: '${step.name}' ${status} (${renderDuration(
+      (end - start) * 1000
+    )} ms)`;
+    this.write(indent(message));
+    if (error) {
+      this.write(renderError(error));
+    }
+    this.metrics[status]++;
+    if (!this.journeys.has(journey.name)) {
+      this.journeys.set(journey.name, []);
+    }
+    this.journeys.get(journey.name)?.push({ name: step.name, ...result });
+  }
+
+  async onJourneyEnd(journey: Journey, { error, start, end, status }: JourneyEndResult) {
+    const { failed, succeeded, skipped } = this.metrics;
+    const total = failed + succeeded + skipped;
+    if (total === 0 && error) {
+      this.write(renderError(error));
+    }
+    const message = `${symbols[status]} Took  (${renderDuration(end - start)} seconds)`;
+    this.write(message);
+
+    await fs.promises.mkdir('.journeys/failed_steps', { recursive: true });
+
+    await gatherScreenshots(join(CACHE_PATH, 'screenshots'), async (screenshot) => {
+      const { data, step } = screenshot;
+
+      if (status === 'failed') {
+        await (async () => {
+          await fs.promises.writeFile(join('.journeys/failed_steps/', `${step.name}.jpg`), data, {
+            encoding: 'base64',
+          });
+        })();
+      }
+    });
+  }
+
+  onEnd() {
+    const failedJourneys = Array.from(this.journeys.entries()).filter(([, steps]) =>
+      steps.some((step) => step.status === 'failed')
+    );
+
+    if (failedJourneys.length > 0) {
+      failedJourneys.forEach(([journeyName, steps]) => {
+        if (process.env.CI) {
+          const name = red(`Journey: ${journeyName} 🥵`);
+          this.write(`\n+++ ${name}`);
+          steps.forEach((stepResult) => {
+            const { status, end, start, error, name: stepName } = stepResult;
+            const message = `${symbols[status]}  Step: '${stepName}' ${status} (${renderDuration(
+              (end - start) * 1000
+            )} ms)`;
+            this.write(indent(message));
+            if (error) {
+              this.write(renderError(error));
+            }
+          });
+        }
+      });
+    }
+
+    const successfulJourneys = Array.from(this.journeys.entries()).filter(([, steps]) =>
+      steps.every((step) => step.status === 'succeeded')
+    );
+
+    successfulJourneys.forEach(([journeyName, steps]) => {
+      // fs.unlinkSync('.journeys/videos/' + journeyName + '.webm');
+    });
+
+    const { failed, succeeded, skipped } = this.metrics;
+    const total = failed + succeeded + skipped;
+
+    let message = '\n';
+    if (total === 0) {
+      message = 'No tests found!';
+      message += ` (${renderDuration(now())} ms) \n`;
+      this.write(message);
+      return;
+    }
+
+    message += succeeded > 0 ? green(` ${succeeded} passed`) : '';
+    message += failed > 0 ? red(` ${failed} failed`) : '';
+    message += skipped > 0 ? cyan(` ${skipped} skipped`) : '';
+    message += ` (${renderDuration(now() / 1000)} seconds) \n`;
+    this.write(message);
+  }
+
+  write(message: any) {
+    if (typeof message === 'object') {
+      message = JSON.stringify(message);
+    }
+    log(message + '\n');
+  }
+}
+
+const SEPARATOR = '\n';
+
+function indent(lines: string, tab = '   ') {
+  return lines.replace(/^/gm, tab);
+}
+
+const NO_UTF8_SUPPORT = process.platform === 'win32';
+const symbols = {
+  warning: yellow(NO_UTF8_SUPPORT ? '!' : '⚠'),
+  skipped: cyan('-'),
+  progress: cyan('>'),
+  succeeded: green(NO_UTF8_SUPPORT ? 'ok' : '✓'),
+  failed: red(NO_UTF8_SUPPORT ? 'x' : '✖'),
+};
+
+function now() {
+  return performance.now();
+}
+
+function findPWLogsIndexes(msgOrStack: string): [number, number] {
+  let startIndex = 0;
+  let endIndex = 0;
+  if (!msgOrStack) {
+    return [startIndex, endIndex];
+  }
+  const lines = String(msgOrStack).split(SEPARATOR);
+  const logStart = /[=]{3,} logs [=]{3,}/;
+  const logEnd = /[=]{10,}/;
+  lines.forEach((line, index) => {
+    if (logStart.test(line)) {
+      startIndex = index;
+    } else if (logEnd.test(line)) {
+      endIndex = index;
+    }
+  });
+  return [startIndex, endIndex];
+}
+
+function rewriteErrorStack(stack: string, indexes: [number, number]) {
+  const [start, end] = indexes;
+  /**
+   * Do not rewrite if its not a playwright error
+   */
+  if (start === 0 && end === 0) {
+    return stack;
+  }
+  const linesToKeep = start + 3;
+  if (start > 0 && linesToKeep < end) {
+    const lines = stack.split(SEPARATOR);
+    return lines
+      .slice(0, linesToKeep)
+      .concat(...lines.slice(end))
+      .join(SEPARATOR);
+  }
+  return stack;
+}

x-pack/plugins/synthetics/e2e/helpers/record_video.ts

@@ -0,0 +1,29 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import fs from 'fs';
+import Runner from '@elastic/synthetics/src/core/runner';
+import { after, Page } from '@elastic/synthetics';
+
+const SYNTHETICS_RUNNER = Symbol.for('SYNTHETICS_RUNNER');
+
+// @ts-ignore
+export const runner: Runner = global[SYNTHETICS_RUNNER];
+
+export const recordVideo = (page: Page) => {
+  after(async () => {
+    try {
+      const videoFilePath = await page.video()?.path();
+      const pathToVideo = videoFilePath?.replace('.journeys/videos/', '').replace('.webm', '');
+      const newVideoPath = videoFilePath?.replace(pathToVideo!, runner.currentJourney!.name);
+      fs.renameSync(videoFilePath!, newVideoPath!);
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.log('Error while renaming video file', e);
+    }
+  });
+};

x-pack/plugins/synthetics/e2e/journeys/synthetics/add_monitor.journey.ts

@@ -6,6 +6,7 @@
  */
 import uuid from 'uuid';
 import { journey, step, expect, Page } from '@elastic/synthetics';
+import { recordVideo } from '@kbn/observability-plugin/e2e/record_video';
 import { FormMonitorType } from '../../../common/runtime_types';
 import { syntheticsAppPageProvider } from '../../page_objects/synthetics/synthetics_app';
 
@@ -146,6 +147,8 @@ const createMonitorJourney = ({
   journey(
     `SyntheticsAddMonitor - ${monitorName}`,
     async ({ page, params }: { page: Page; params: any }) => {
+      recordVideo(page);
+
       const syntheticsApp = syntheticsAppPageProvider({ page, kibanaUrl: params.kibanaUrl });
 
       step('Go to monitor management', async () => {

x-pack/plugins/synthetics/e2e/journeys/synthetics/alert_rules/default_status_alert.journey.ts

@@ -9,11 +9,14 @@ import { journey, step, before, after, expect } from '@elastic/synthetics';
 import { byTestId } from '@kbn/ux-plugin/e2e/journeys/utils';
 import { RetryService } from '@kbn/ftr-common-functional-services';
 import uuid from 'uuid';
+import { recordVideo } from '@kbn/observability-plugin/e2e/record_video';
 import { getReasonMessage } from '../../../../server/legacy_uptime/lib/alerts/status_check';
 import { syntheticsAppPageProvider } from '../../../page_objects/synthetics/synthetics_app';
 import { SyntheticsServices } from '../services/synthetics_services';
 
 journey(`DefaultStatusAlert`, async ({ page, params }) => {
+  recordVideo(page);
+
   page.setDefaultTimeout(60 * 1000);
   const syntheticsApp = syntheticsAppPageProvider({ page, kibanaUrl: params.kibanaUrl });
 

x-pack/plugins/synthetics/e2e/journeys/synthetics/alerting_default.journey.ts

@@ -7,10 +7,13 @@
 
 import { journey, step, expect, before, after } from '@elastic/synthetics';
 import { byTestId } from '@kbn/observability-plugin/e2e/utils';
+import { recordVideo } from '@kbn/observability-plugin/e2e/record_video';
 import { syntheticsAppPageProvider } from '../../page_objects/synthetics/synthetics_app';
 import { cleanSettings } from './services/settings';
 
 journey('AlertingDefaults', async ({ page, params }) => {
+  recordVideo(page);
+
   const syntheticsApp = syntheticsAppPageProvider({ page, kibanaUrl: params.kibanaUrl });
 
   page.setDefaultTimeout(60 * 1000);

x-pack/plugins/synthetics/e2e/journeys/synthetics/getting_started.journey.ts

@@ -6,10 +6,13 @@
  */
 
 import { journey, step, expect, before, Page } from '@elastic/synthetics';
+import { recordVideo } from '@kbn/observability-plugin/e2e/record_video';
 import { syntheticsAppPageProvider } from '../../page_objects/synthetics/synthetics_app';
 import { cleanTestMonitors } from './services/add_monitor';
 
 journey(`Getting Started Page`, async ({ page, params }: { page: Page; params: any }) => {
+  recordVideo(page);
+
   const syntheticsApp = syntheticsAppPageProvider({ page, kibanaUrl: params.kibanaUrl });
 
   const createBasicMonitor = async () => {

x-pack/plugins/synthetics/e2e/journeys/synthetics/global_parameters.journey.ts

@@ -6,10 +6,13 @@
  */
 
 import { journey, step, before, after, expect } from '@elastic/synthetics';
+import { recordVideo } from '@kbn/observability-plugin/e2e/record_video';
 import { cleanTestParams } from './services/add_monitor';
 import { syntheticsAppPageProvider } from '../../page_objects/synthetics/synthetics_app';
 
 journey(`GlobalParameters`, async ({ page, params }) => {
+  recordVideo(page);
+
   const syntheticsApp = syntheticsAppPageProvider({ page, kibanaUrl: params.kibanaUrl });
 
   before(async () => {

x-pack/plugins/synthetics/e2e/journeys/synthetics/management_list.journey.ts

@@ -6,6 +6,7 @@
  */
 
 import { journey, step, expect, before, after } from '@elastic/synthetics';
+import { recordVideo } from '@kbn/observability-plugin/e2e/record_video';
 import {
   addTestMonitor,
   cleanTestMonitors,
@@ -14,6 +15,8 @@ import {
 import { syntheticsAppPageProvider } from '../../page_objects/synthetics/synthetics_app';
 
 journey(`MonitorManagementList`, async ({ page, params }) => {
+  recordVideo(page);
+
   const syntheticsApp = syntheticsAppPageProvider({ page, kibanaUrl: params.kibanaUrl });
   const testMonitor1 = 'Test monitor 1';
   const testMonitor2 = 'Test monitor 2';

x-pack/plugins/synthetics/e2e/journeys/synthetics/monitor_selector.journey.ts

@@ -6,6 +6,7 @@
  */
 
 import { journey, step, expect, before, after } from '@elastic/synthetics';
+import { recordVideo } from '@kbn/observability-plugin/e2e/record_video';
 import {
   addTestMonitor,
   cleanTestMonitors,
@@ -14,6 +15,8 @@ import {
 import { syntheticsAppPageProvider } from '../../page_objects/synthetics/synthetics_app';
 
 journey(`MonitorSelector`, async ({ page, params }) => {
+  recordVideo(page);
+
   const syntheticsApp = syntheticsAppPageProvider({ page, kibanaUrl: params.kibanaUrl });
   const testMonitor1 = 'Test monitor 1';
   const testMonitor2 = 'Test monitor 2';

x-pack/plugins/synthetics/e2e/journeys/synthetics/overview_scrolling.journey.ts

@@ -6,6 +6,7 @@
  */
 
 import { before, after, expect, journey, step } from '@elastic/synthetics';
+import { recordVideo } from '@kbn/observability-plugin/e2e/record_video';
 import {
   addTestMonitor,
   cleanTestMonitors,
@@ -14,6 +15,8 @@ import {
 import { syntheticsAppPageProvider } from '../../page_objects/synthetics/synthetics_app';
 
 journey('Overview Scrolling', async ({ page, params }) => {
+  recordVideo(page);
+
   const syntheticsApp = syntheticsAppPageProvider({ page, kibanaUrl: params.kibanaUrl });
 
   before(async () => {

x-pack/plugins/synthetics/e2e/journeys/synthetics/overview_search.journey.ts

@@ -6,6 +6,7 @@
  */
 
 import { before, expect, journey, step } from '@elastic/synthetics';
+import { recordVideo } from '@kbn/observability-plugin/e2e/record_video';
 import {
   addTestMonitor,
   cleanTestMonitors,
@@ -14,6 +15,8 @@ import {
 import { syntheticsAppPageProvider } from '../../page_objects/synthetics/synthetics_app';
 
 journey('Overview Search', async ({ page, params }) => {
+  recordVideo(page);
+
   const syntheticsApp = syntheticsAppPageProvider({ page, kibanaUrl: params.kibanaUrl });
   const testMonitor1 = 'Elastic journey';
   const testMonitor2 = 'CNN journey';

x-pack/plugins/synthetics/e2e/journeys/synthetics/overview_sorting.journey.ts

@@ -6,6 +6,7 @@
  */
 
 import { before, expect, journey, step } from '@elastic/synthetics';
+import { recordVideo } from '@kbn/observability-plugin/e2e/record_video';
 import {
   addTestMonitor,
   cleanTestMonitors,
@@ -14,6 +15,8 @@ import {
 import { syntheticsAppPageProvider } from '../../page_objects/synthetics/synthetics_app';
 
 journey('OverviewSorting', async ({ page, params }) => {
+  recordVideo(page);
+
   const syntheticsApp = syntheticsAppPageProvider({ page, kibanaUrl: params.kibanaUrl });
   const testMonitor1 = 'acb'; // second alpha, first created
   const testMonitor2 = 'aCd'; // third alpha, second created

x-pack/plugins/synthetics/e2e/journeys/synthetics/private_locations.journey.ts

@@ -8,6 +8,7 @@
 import { journey, step, before, after, expect } from '@elastic/synthetics';
 import { byTestId } from '@kbn/observability-plugin/e2e/utils';
 import { waitForLoadingToFinish } from '@kbn/ux-plugin/e2e/journeys/utils';
+import { recordVideo } from '@kbn/observability-plugin/e2e/record_video';
 import {
   addTestMonitor,
   cleanPrivateLocations,
@@ -17,6 +18,8 @@ import {
 import { syntheticsAppPageProvider } from '../../page_objects/synthetics/synthetics_app';
 
 journey(`PrivateLocationsSettings`, async ({ page, params }) => {
+  recordVideo(page);
+
   const syntheticsApp = syntheticsAppPageProvider({ page, kibanaUrl: params.kibanaUrl });
 
   page.setDefaultTimeout(2 * 30000);

x-pack/plugins/synthetics/e2e/journeys/synthetics/project_api_keys.journey.ts

@@ -6,8 +6,11 @@
  */
 
 import { journey, step, expect, before } from '@elastic/synthetics';
+import { recordVideo } from '@kbn/observability-plugin/e2e/record_video';
 
 journey('ProjectAPIKeys', async ({ page }) => {
+  recordVideo(page);
+
   let apiKey = '';
 
   page.setDefaultTimeout(3 * 30000);

x-pack/plugins/synthetics/e2e/journeys/uptime/alerts/default_email_settings.ts

@@ -19,9 +19,12 @@ import {
   byTestId,
   waitForLoadingToFinish,
 } from '@kbn/observability-plugin/e2e/utils';
+import { recordVideo } from '@kbn/observability-plugin/e2e/record_video';
 import { settingsPageProvider } from '../../../page_objects/uptime/settings';
 
 journey('DefaultEmailSettings', async ({ page, params }) => {
+  recordVideo(page);
+
   const settings = settingsPageProvider({ page, kibanaUrl: params.kibanaUrl });
 
   before(async () => {

x-pack/plugins/synthetics/e2e/journeys/uptime/alerts/status_alert_flyouts_in_alerting_app.ts

@@ -8,9 +8,12 @@
 import { journey, step, expect, before } from '@elastic/synthetics';
 import { assertText, byTestId, waitForLoadingToFinish } from '@kbn/observability-plugin/e2e/utils';
 import { RetryService } from '@kbn/ftr-common-functional-services';
+import { recordVideo } from '@kbn/observability-plugin/e2e/record_video';
 import { loginPageProvider } from '../../../page_objects/login';
 
 journey('StatusFlyoutInAlertingApp', async ({ page, params }) => {
+  recordVideo(page);
+
   const login = loginPageProvider({ page });
   before(async () => {
     await waitForLoadingToFinish({ page });

x-pack/plugins/synthetics/e2e/journeys/uptime/alerts/tls_alert_flyouts_in_alerting_app.ts

@@ -7,9 +7,12 @@
 
 import { journey, step, before } from '@elastic/synthetics';
 import { assertText, byTestId, waitForLoadingToFinish } from '@kbn/observability-plugin/e2e/utils';
+import { recordVideo } from '@kbn/observability-plugin/e2e/record_video';
 import { loginPageProvider } from '../../../page_objects/login';
 
 journey('TlsFlyoutInAlertingApp', async ({ page, params }) => {
+  recordVideo(page);
+
   const login = loginPageProvider({ page });
   before(async () => {
     await waitForLoadingToFinish({ page });

x-pack/plugins/synthetics/e2e/journeys/uptime/data_view_permissions.ts

@@ -12,9 +12,12 @@ import {
   waitForLoadingToFinish,
 } from '@kbn/observability-plugin/e2e/utils';
 import { callKibana } from '@kbn/apm-plugin/server/test_helpers/create_apm_users/helpers/call_kibana';
+import { recordVideo } from '@kbn/observability-plugin/e2e/record_video';
 import { loginPageProvider } from '../../page_objects/login';
 
 journey('DataViewPermissions', async ({ page, params }) => {
+  recordVideo(page);
+
   const login = loginPageProvider({ page });
   before(async () => {
     await waitForLoadingToFinish({ page });

x-pack/plugins/synthetics/e2e/journeys/uptime/locations/locations.ts

@@ -6,10 +6,13 @@
  */
 
 import { journey, step, before, Page } from '@elastic/synthetics';
+import { recordVideo } from '@kbn/observability-plugin/e2e/record_video';
 import { makeChecksWithStatus } from '../../../helpers/make_checks';
 import { monitorDetailsPageProvider } from '../../../page_objects/uptime/monitor_details';
 
 journey('Observer location', async ({ page, params }: { page: Page; params: any }) => {
+  recordVideo(page);
+
   const monitorDetails = monitorDetailsPageProvider({ page, kibanaUrl: params.kibanaUrl });
 
   const NO_LOCATION_MONITOR_ID = 'location-testing-id';

x-pack/plugins/synthetics/e2e/journeys/uptime/monitor_details.journey.ts

@@ -5,17 +5,14 @@
  * 2.0.
  */
 
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
 import uuid from 'uuid';
 import { journey, step, expect, after, Page } from '@elastic/synthetics';
+import { recordVideo } from '@kbn/observability-plugin/e2e/record_video';
 import { monitorManagementPageProvider } from '../../page_objects/uptime/monitor_management';
 
 journey('MonitorDetails', async ({ page, params }: { page: Page; params: any }) => {
+  recordVideo(page);
+
   const uptime = monitorManagementPageProvider({ page, kibanaUrl: params.kibanaUrl });
   const name = `Test monitor ${uuid.v4()}`;
 

x-pack/plugins/synthetics/e2e/journeys/uptime/monitor_details/monitor_alerts.journey.ts

@@ -8,6 +8,7 @@
 import { journey, step, expect, before, Page } from '@elastic/synthetics';
 import { noop } from 'lodash';
 import { byTestId, delay } from '@kbn/observability-plugin/e2e/utils';
+import { recordVideo } from '@kbn/observability-plugin/e2e/record_video';
 import { monitorDetailsPageProvider } from '../../../page_objects/uptime/monitor_details';
 
 const dateRangeStart = '2019-09-10T12:40:08.078Z';
@@ -18,6 +19,8 @@ const alertId = 'uptime-anomaly-alert';
 const alertThreshold = 'major';
 
 journey('MonitorAlerts', async ({ page, params }: { page: Page; params: any }) => {
+  recordVideo(page);
+
   const monitorDetails = monitorDetailsPageProvider({ page, kibanaUrl: params.kibanaUrl });
 
   before(async () => {

x-pack/plugins/synthetics/e2e/journeys/uptime/monitor_details/monitor_details.journey.ts

@@ -7,6 +7,7 @@
 
 import { journey, step, before, Page } from '@elastic/synthetics';
 import { byTestId } from '@kbn/observability-plugin/e2e/utils';
+import { recordVideo } from '@kbn/observability-plugin/e2e/record_video';
 import { monitorDetailsPageProvider } from '../../../page_objects/uptime/monitor_details';
 
 const dateRangeStart = '2019-09-10T12:40:08.078Z';
@@ -14,6 +15,8 @@ const dateRangeEnd = '2019-09-11T19:40:08.078Z';
 const monitorId = '0000-intermittent';
 
 journey('MonitorDetails', async ({ page, params }: { page: Page; params: any }) => {
+  recordVideo(page);
+
   const monitorDetails = monitorDetailsPageProvider({ page, kibanaUrl: params.kibanaUrl });
 
   before(async () => {

x-pack/plugins/synthetics/e2e/journeys/uptime/monitor_details/ping_redirects.journey.ts

@@ -7,10 +7,13 @@
 
 import { journey, step, expect, before, Page } from '@elastic/synthetics';
 import { byTestId, delay } from '@kbn/observability-plugin/e2e/utils';
+import { recordVideo } from '@kbn/observability-plugin/e2e/record_video';
 import { makeChecksWithStatus } from '../../../helpers/make_checks';
 import { monitorDetailsPageProvider } from '../../../page_objects/uptime/monitor_details';
 
 journey('MonitorPingRedirects', async ({ page, params }: { page: Page; params: any }) => {
+  recordVideo(page);
+
   const monitorDetails = monitorDetailsPageProvider({ page, kibanaUrl: params.kibanaUrl });
   const testMonitor = {
     id: '0000-intermittent',

x-pack/plugins/synthetics/e2e/journeys/uptime/monitor_management.journey.ts

@@ -8,6 +8,7 @@
 import uuid from 'uuid';
 import { journey, step, expect, after, Page } from '@elastic/synthetics';
 import { byTestId } from '@kbn/observability-plugin/e2e/utils';
+import { recordVideo } from '@kbn/observability-plugin/e2e/record_video';
 import { monitorManagementPageProvider } from '../../page_objects/uptime/monitor_management';
 import { DataStream } from '../../../common/runtime_types/monitor_management';
 
@@ -96,6 +97,8 @@ const createMonitorJourney = ({
   journey(
     `MonitorManagement-monitor-${monitorType}`,
     async ({ page, params }: { page: Page; params: any }) => {
+      recordVideo(page);
+
       const uptime = monitorManagementPageProvider({ page, kibanaUrl: params.kibanaUrl });
       const isRemote = process.env.SYNTHETICS_REMOTE_ENABLED;
 

x-pack/plugins/synthetics/e2e/journeys/uptime/monitor_management_enablement.journey.ts

@@ -5,11 +5,14 @@
  * 2.0.
  */
 import { journey, step, expect, after, Page } from '@elastic/synthetics';
+import { recordVideo } from '@kbn/observability-plugin/e2e/record_video';
 import { monitorManagementPageProvider } from '../../page_objects/uptime/monitor_management';
 
 journey(
   'Monitor Management-enablement-superuser',
   async ({ page, params }: { page: Page; params: any }) => {
+    recordVideo(page);
+
     const uptime = monitorManagementPageProvider({ page, kibanaUrl: params.kibanaUrl });
 
     after(async () => {
@@ -34,6 +37,8 @@ journey(
 journey(
   'MonitorManagement-enablement-obs-admin',
   async ({ page, params }: { page: Page; params: any }) => {
+    recordVideo(page);
+
     const uptime = monitorManagementPageProvider({ page, kibanaUrl: params.kibanaUrl });
 
     step('Go to monitor-management', async () => {

x-pack/plugins/synthetics/e2e/journeys/uptime/monitor_name.journey.ts

@@ -7,9 +7,12 @@
 import uuid from 'uuid';
 import { journey, step, expect, Page } from '@elastic/synthetics';
 import { byTestId } from '@kbn/observability-plugin/e2e/utils';
+import { recordVideo } from '@kbn/observability-plugin/e2e/record_video';
 import { monitorManagementPageProvider } from '../../page_objects/uptime/monitor_management';
 
 journey(`MonitorName`, async ({ page, params }: { page: Page; params: any }) => {
+  recordVideo(page);
+
   const name = `Test monitor ${uuid.v4()}`;
   const uptime = monitorManagementPageProvider({ page, kibanaUrl: params.kibanaUrl });
 

x-pack/plugins/synthetics/e2e/journeys/uptime/private_locations/add_monitor_private_location.ts

@@ -6,9 +6,12 @@
  */
 import { journey, step, expect, before } from '@elastic/synthetics';
 import { assertText, byTestId, TIMEOUT_60_SEC } from '@kbn/observability-plugin/e2e/utils';
+import { recordVideo } from '@kbn/observability-plugin/e2e/record_video';
 import { monitorManagementPageProvider } from '../../../page_objects/uptime/monitor_management';
 
 journey('AddPrivateLocationMonitor', async ({ page, params: { kibanaUrl } }) => {
+  recordVideo(page);
+
   const uptime = monitorManagementPageProvider({ page, kibanaUrl });
 
   before(async () => {

x-pack/plugins/synthetics/e2e/journeys/uptime/private_locations/manage_locations.ts

@@ -4,16 +4,17 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import { journey, step, expect, before } from '@elastic/synthetics';
+import { journey, step, expect } from '@elastic/synthetics';
 import { byTestId, TIMEOUT_60_SEC } from '@kbn/observability-plugin/e2e/utils';
+import { recordVideo } from '../../../helpers/record_video';
 import { monitorManagementPageProvider } from '../../../page_objects/uptime/monitor_management';
 
 journey('ManagePrivateLocation', async ({ page, params: { kibanaUrl } }) => {
+  recordVideo(page);
+
   const uptime = monitorManagementPageProvider({ page, kibanaUrl });
 
-  before(async () => {
-    await uptime.waitForLoadingToFinish();
-  });
+  recordVideo(page);
 
   step('Go to monitor-management', async () => {
     await uptime.navigateToMonitorManagement();

x-pack/plugins/synthetics/e2e/journeys/uptime/read_only_user/monitor_management.ts

@@ -7,11 +7,14 @@
 
 import { expect, journey, Page, step } from '@elastic/synthetics';
 import { byTestId } from '@kbn/observability-plugin/e2e/utils';
+import { recordVideo } from '@kbn/observability-plugin/e2e/record_video';
 import { monitorManagementPageProvider } from '../../../page_objects/uptime/monitor_management';
 
 journey(
   'Monitor Management read only user',
   async ({ page, params }: { page: Page; params: any }) => {
+    recordVideo(page);
+
     const uptime = monitorManagementPageProvider({ page, kibanaUrl: params.kibanaUrl });
 
     step('Go to monitor-management', async () => {

x-pack/plugins/synthetics/e2e/journeys/uptime/step_duration.journey.ts

@@ -6,9 +6,12 @@
  */
 
 import { journey, step, expect } from '@elastic/synthetics';
+import { recordVideo } from '@kbn/observability-plugin/e2e/record_video';
 import { loginPageProvider } from '../../page_objects/login';
 
 journey('StepsDuration', async ({ page, params }) => {
+  recordVideo(page);
+
   const login = loginPageProvider({ page });
 
   const queryParams = new URLSearchParams({

x-pack/plugins/synthetics/e2e/journeys/uptime/uptime.journey.ts

@@ -7,8 +7,11 @@
 
 import { journey, step, before } from '@elastic/synthetics';
 import { byTestId, waitForLoadingToFinish } from '@kbn/observability-plugin/e2e/utils';
+import { recordVideo } from '@kbn/observability-plugin/e2e/record_video';
 
 journey('uptime', ({ page, params }) => {
+  recordVideo(page);
+
   before(async () => {
     await waitForLoadingToFinish({ page });
   });

x-pack/plugins/ux/e2e/journeys/core_web_vitals.ts

@@ -6,10 +6,13 @@
  */
 
 import { journey, step, expect, before } from '@elastic/synthetics';
+import { recordVideo } from '@kbn/observability-plugin/e2e/record_video';
 import { UXDashboardDatePicker } from '../page_objects/date_picker';
 import { loginToKibana, waitForLoadingToFinish } from './utils';
 
 journey('Core Web Vitals', async ({ page, params }) => {
+  recordVideo(page);
+
   before(async () => {
     await waitForLoadingToFinish({ page });
   });

x-pack/plugins/ux/e2e/journeys/page_views.ts

@@ -6,10 +6,13 @@
  */
 
 import { journey, step, expect, before } from '@elastic/synthetics';
+import { recordVideo } from '@kbn/observability-plugin/e2e/record_video';
 import { UXDashboardDatePicker } from '../page_objects/date_picker';
 import { byTestId, loginToKibana, waitForLoadingToFinish } from './utils';
 
 journey('Page Views Chart', async ({ page, params }) => {
+  recordVideo(page);
+
   before(async () => {
     await waitForLoadingToFinish({ page });
   });

x-pack/plugins/ux/e2e/journeys/url_ux_query.journey.ts

@@ -6,10 +6,13 @@
  */
 
 import { journey, step, expect, before } from '@elastic/synthetics';
+import { recordVideo } from '@kbn/observability-plugin/e2e/record_video';
 import { UXDashboardDatePicker } from '../page_objects/date_picker';
 import { byTestId, loginToKibana, waitForLoadingToFinish } from './utils';
 
 journey('UX URL Query', async ({ page, params }) => {
+  recordVideo(page);
+
   before(async () => {
     await waitForLoadingToFinish({ page });
   });

x-pack/plugins/ux/e2e/journeys/ux_client_metrics.journey.ts

@@ -6,6 +6,7 @@
  */
 
 import { journey, step, expect, before } from '@elastic/synthetics';
+import { recordVideo } from '@kbn/observability-plugin/e2e/record_video';
 import { UXDashboardDatePicker } from '../page_objects/date_picker';
 import { byTestId, loginToKibana, waitForLoadingToFinish } from './utils';
 
@@ -24,6 +25,8 @@ const pageViewsLabel = `Total page views
 524`;
 
 journey('UX ClientMetrics', async ({ page, params }) => {
+  recordVideo(page);
+
   before(async () => {
     await waitForLoadingToFinish({ page });
   });

x-pack/plugins/ux/e2e/journeys/ux_js_errors.journey.ts

@@ -6,6 +6,7 @@
  */
 
 import { journey, step, expect, before } from '@elastic/synthetics';
+import { recordVideo } from '@kbn/observability-plugin/e2e/record_video';
 import { UXDashboardDatePicker } from '../page_objects/date_picker';
 import { byTestId, loginToKibana, waitForLoadingToFinish } from './utils';
 
@@ -15,6 +16,8 @@ const jsErrorLabel = `Total errors
 ${jsErrorCount}`;
 
 journey('UX JsErrors', async ({ page, params }) => {
+  recordVideo(page);
+
   before(async () => {
     await waitForLoadingToFinish({ page });
   });

x-pack/plugins/ux/e2e/journeys/ux_long_task_metric_journey.ts

@@ -6,6 +6,7 @@
  */
 
 import { journey, step, before, expect } from '@elastic/synthetics';
+import { recordVideo } from '@kbn/observability-plugin/e2e/record_video';
 import { UXDashboardDatePicker } from '../page_objects/date_picker';
 import { byTestId, loginToKibana, waitForLoadingToFinish } from './utils';
 
@@ -24,6 +25,8 @@ const sumMetricValue = `Total long tasks duration
 428 ms`;
 
 journey('UX LongTaskMetrics', async ({ page, params }) => {
+  recordVideo(page);
+
   before(async () => {
     await waitForLoadingToFinish({ page });
   });

x-pack/plugins/ux/e2e/journeys/ux_visitor_breakdown.journey.ts

@@ -6,6 +6,7 @@
  */
 
 import { journey, step, before } from '@elastic/synthetics';
+import { recordVideo } from '@kbn/observability-plugin/e2e/record_video';
 import { UXDashboardDatePicker } from '../page_objects/date_picker';
 import { byLensTestId, loginToKibana, waitForLoadingToFinish } from './utils';
 
@@ -15,6 +16,8 @@ const uaNameMetric = 'ux-visitor-breakdown-user_agent-name';
 const chartIds = [osNameMetric, uaNameMetric];
 
 journey('UX Visitor Breakdown', async ({ page, params }) => {
+  recordVideo(page);
+
   before(async () => {
     await waitForLoadingToFinish({ page });
   });