@elastic/synthetics 1.0.0-beta.25 → 1.0.0-beta.28

package/src/reporters/json.ts

@@ -47,8 +47,12 @@ import {
   PerfMetrics,
   Params,
   Screenshot,
+  StartEvent,
+  JourneyStartResult,
+  StepEndResult,
+  JourneyEndResult,
+  PageMetrics,
 } from '../common_types';
-import { PageMetrics } from '../plugins';
 
 /* eslint-disable @typescript-eslint/no-var-requires */
 const { version, name } = require('../../package.json');
@@ -296,179 +300,183 @@ export async function gatherScreenshots(
 }
 
 export default class JSONReporter extends BaseReporter {
-  override _registerListeners() {
+  onStart(params: StartEvent) {
     /**
      * report the number of journeys that exists on a suite which
      * could be used for better sharding
      */
-    this.runner.on('start', ({ numJourneys, networkConditions }) => {
-      this.writeJSON({
-        type: 'synthetics/metadata',
-        root_fields: {
-          num_journeys: numJourneys,
-        },
-        payload: networkConditions
-          ? {
-              network_conditions: networkConditions,
-            }
-          : undefined,
-      });
+    this.writeJSON({
+      type: 'synthetics/metadata',
+      root_fields: {
+        num_journeys: params.numJourneys,
+      },
+      payload: params.networkConditions
+        ? {
+            network_conditions: params.networkConditions,
+          }
+        : undefined,
     });
+  }
 
-    this.runner.on('journey:register', ({ journey }) => {
-      this.writeJSON({
-        type: 'journey/register',
-        journey,
-      });
+  onJourneyRegister(journey: Journey): void {
+    this.writeJSON({
+      type: 'journey/register',
+      journey,
     });
+  }
 
-    this.runner.on('journey:start', ({ journey, timestamp, params }) => {
-      this.writeJSON({
-        type: 'journey/start',
-        journey,
-        timestamp,
-        payload: { params, source: journey.callback.toString() },
-      });
+  override onJourneyStart(
+    journey: Journey,
+    { timestamp, params }: JourneyStartResult
+  ) {
+    this.writeJSON({
+      type: 'journey/start',
+      journey,
+      timestamp,
+      payload: { params, source: journey.callback.toString() },
     });
+  }
 
-    this.runner.on(
-      'step:end',
-      ({
-        journey,
-        step,
-        start,
-        end,
-        error,
-        url,
-        status,
-        pagemetrics,
-        traces,
-        metrics,
-        filmstrips,
-      }) => {
-        this.writeMetrics(journey, step, 'relative_trace', traces);
-        this.writeMetrics(journey, step, 'experience', metrics);
-        if (filmstrips) {
-          // Write each filmstrip separately so that we don't get documents that are too large
-          filmstrips.forEach((strip, index) => {
-            this.writeJSON({
-              type: 'step/filmstrips',
-              journey,
-              step,
-              payload: { index },
-              root_fields: {
-                browser: { relative_trace: { start: strip.start } },
-              },
-              blob: strip.blob,
-              blob_mime: strip.mime,
-            });
-          });
-        }
+  override onStepEnd(
+    journey: Journey,
+    step: Step,
+    {
+      start,
+      end,
+      error,
+      url,
+      status,
+      pagemetrics,
+      traces,
+      metrics,
+      filmstrips,
+    }: StepEndResult
+  ) {
+    this.writeMetrics(journey, step, 'relative_trace', traces);
+    this.writeMetrics(journey, step, 'experience', metrics);
+    if (filmstrips) {
+      // Write each filmstrip separately so that we don't get documents that are too large
+      filmstrips.forEach((strip, index) => {
         this.writeJSON({
-          type: 'step/end',
+          type: 'step/filmstrips',
           journey,
-          step: {
-            ...step,
-            duration: {
-              us: getDurationInUs(end - start),
-            },
-          },
-          url,
-          error,
-          payload: {
-            source: step.callback.toString(),
-            url,
-            status,
-            pagemetrics,
+          step,
+          payload: { index },
+          root_fields: {
+            browser: { relative_trace: { start: strip.start } },
           },
+          blob: strip.blob,
+          blob_mime: strip.mime,
         });
-      }
-    );
+      });
+    }
 
-    this.runner.on(
-      'journey:end',
-      async ({
-        journey,
-        timestamp,
-        start,
-        end,
-        networkinfo,
-        browserconsole,
+    this.writeJSON({
+      type: 'step/end',
+      journey,
+      step: {
+        ...step,
+        duration: {
+          us: getDurationInUs(end - start),
+        },
+      },
+      url,
+      error,
+      payload: {
+        source: step.callback.toString(),
+        url,
         status,
-        error,
-        options,
-      }) => {
-        const { ssblocks, screenshots } = options;
-        const writeScreenshots =
-          screenshots === 'on' ||
-          (screenshots === 'only-on-failure' && status === 'failed');
-        if (writeScreenshots) {
-          await gatherScreenshots(
-            join(CACHE_PATH, 'screenshots'),
-            async screenshot => {
-              const { data, timestamp, step } = screenshot;
-              if (!data) {
-                return;
-              }
-              if (ssblocks) {
-                await this.writeScreenshotBlocks(journey, screenshot);
-              } else {
-                this.writeJSON({
-                  type: 'step/screenshot',
-                  timestamp,
-                  journey,
-                  step,
-                  blob: data,
-                  blob_mime: 'image/jpeg',
-                });
-              }
-            }
-          );
-        }
+        pagemetrics,
+      },
+    });
+  }
 
-        if (networkinfo) {
-          networkinfo.forEach(ni => {
-            const { ecs, payload } = formatNetworkFields(ni);
-            this.writeJSON({
-              type: 'journey/network_info',
-              journey,
-              timestamp: ni.timestamp,
-              root_fields: snakeCaseKeys(ecs),
-              step: ni.step,
-              payload: snakeCaseKeys(payload),
-            });
-          });
-        }
-        if (browserconsole) {
-          browserconsole.forEach(({ timestamp, text, type, step, error }) => {
+  override async onJourneyEnd(
+    journey: Journey,
+    {
+      timestamp,
+      start,
+      end,
+      networkinfo,
+      browserconsole,
+      status,
+      error,
+      options,
+    }: JourneyEndResult
+  ) {
+    const { ssblocks, screenshots } = options;
+    const writeScreenshots =
+      screenshots === 'on' ||
+      (screenshots === 'only-on-failure' && status === 'failed');
+    if (writeScreenshots) {
+      await gatherScreenshots(
+        join(CACHE_PATH, 'screenshots'),
+        async screenshot => {
+          const { data, timestamp, step } = screenshot;
+          if (!data) {
+            return;
+          }
+          if (ssblocks) {
+            await this.writeScreenshotBlocks(journey, screenshot);
+          } else {
             this.writeJSON({
-              type: 'journey/browserconsole',
-              journey,
+              type: 'step/screenshot',
               timestamp,
+              journey,
               step,
-              error,
-              payload: {
-                text,
-                type,
-              } as Payload,
+              blob: data,
+              blob_mime: 'image/jpeg',
             });
-          });
+          }
         }
+      );
+    }
 
+    if (networkinfo) {
+      networkinfo.forEach(ni => {
+        const { ecs, payload } = formatNetworkFields(ni);
         this.writeJSON({
-          type: 'journey/end',
+          type: 'journey/network_info',
+          journey,
+          timestamp: ni.timestamp,
+          root_fields: snakeCaseKeys(ecs),
+          step: ni.step,
+          payload: snakeCaseKeys(payload),
+        });
+      });
+    }
+
+    if (browserconsole) {
+      browserconsole.forEach(({ timestamp, text, type, step, error }) => {
+        this.writeJSON({
+          type: 'journey/browserconsole',
           journey,
           timestamp,
+          step,
           error,
           payload: {
-            start,
-            end,
-            status,
-          },
+            text,
+            type,
+          } as Payload,
         });
-        process.nextTick(() => this.runner.emit('journey:end:reported', {}));
-      }
-    );
+      });
+    }
+
+    this.writeJSON({
+      type: 'journey/end',
+      journey,
+      timestamp,
+      error,
+      payload: {
+        start,
+        end,
+        status,
+      },
+    });
+  }
+
+  override onEnd() {
+    this.stream.flushSync();
   }
 
   async writeScreenshotBlocks(journey: Journey, screenshot: Screenshot) {

package/src/reporters/junit.ts

@@ -23,8 +23,14 @@
  *
  */
 
-import { mkdirSync, writeFileSync } from 'fs';
+import { mkdir, writeFile } from 'fs/promises';
 import { dirname } from 'path';
+import {
+  JourneyEndResult,
+  JourneyStartResult,
+  StepEndResult,
+} from '../common_types';
+import { Journey, Step } from '../dsl';
 import { formatError, indent, now } from '../helpers';
 import BaseReporter from './base';
 
@@ -51,104 +57,103 @@ export default class JUnitReporter extends BaseReporter {
   private totalTests = 0;
   private totalFailures = 0;
   private totalSkipped = 0;
+  #journeyMap = new Map<string, XMLEntry>();
 
-  override _registerListeners() {
-    const journeyMap = new Map<string, XMLEntry>();
+  override onJourneyStart(journey: Journey, {}: JourneyStartResult) {
+    if (!this.#journeyMap.has(journey.name)) {
+      const entry = {
+        name: 'testsuite',
+        attributes: {
+          name: journey.name,
+          tests: 0,
+          failures: 0,
+          skipped: 0,
+          errors: 0,
+        },
+        children: [],
+      };
+      this.#journeyMap.set(journey.name, entry);
+    }
+  }
 
-    this.runner.on('journey:start', ({ journey }) => {
-      if (!journeyMap.has(journey.name)) {
-        const entry = {
-          name: 'testsuite',
-          attributes: {
-            name: journey.name,
-            tests: 0,
-            failures: 0,
-            skipped: 0,
-            errors: 0,
-          },
-          children: [],
-        };
-        journeyMap.set(journey.name, entry);
-      }
-    });
+  override onStepEnd(
+    journey: Journey,
+    step: Step,
+    { status, error, start, end }: StepEndResult
+  ) {
+    if (!this.#journeyMap.has(journey.name)) {
+      return;
+    }
+    const entry = this.#journeyMap.get(journey.name);
+    const caseEntry = {
+      name: 'testcase',
+      attributes: {
+        name: step.name,
+        classname: journey.name + ' ' + step.name,
+        time: end - start,
+      },
+      children: [],
+    };
 
-    this.runner.on(
-      'step:end',
-      ({ journey, step, status, error, start, end }) => {
-        if (!journeyMap.has(journey.name)) {
-          return;
-        }
-        const entry = journeyMap.get(journey.name);
-        const caseEntry = {
-          name: 'testcase',
-          attributes: {
-            name: step.name,
-            classname: journey.name + ' ' + step.name,
-            time: end - start,
-          },
-          children: [],
-        };
+    entry.attributes.tests++;
+    if (status === 'failed') {
+      const { name, message, stack } = formatError(error);
+      caseEntry.children.push({
+        name: 'failure',
+        attributes: {
+          message,
+          type: name,
+        },
+        text: stack,
+      });
+      entry.attributes.failures++;
+    } else if (status === 'skipped') {
+      caseEntry.children.push({
+        name: 'skipped',
+        attributes: {
+          message: 'previous step failed',
+        },
+      });
+      entry.attributes.skipped++;
+    }
+    entry.children.push(caseEntry);
+  }
 
-        entry.attributes.tests++;
-        if (status === 'failed') {
-          const { name, message, stack } = formatError(error);
-          caseEntry.children.push({
-            name: 'failure',
-            attributes: {
-              message,
-              type: name,
-            },
-            text: stack,
-          });
-          entry.attributes.failures++;
-        } else if (status === 'skipped') {
-          caseEntry.children.push({
-            name: 'skipped',
-            attributes: {
-              message: 'previous step failed',
-            },
-          });
-          entry.attributes.skipped++;
-        }
-        entry.children.push(caseEntry);
-      }
-    );
+  override onJourneyEnd(journey: Journey, {}: JourneyEndResult) {
+    if (!this.#journeyMap.has(journey.name)) {
+      return;
+    }
+    const { attributes } = this.#journeyMap.get(journey.name);
+    this.totalTests += attributes.tests;
+    this.totalFailures += attributes.failures;
+    this.totalSkipped += attributes.skipped;
+  }
 
-    this.runner.on('journey:end', ({ journey }) => {
-      if (!journeyMap.has(journey.name)) {
-        return;
-      }
-      const { attributes } = journeyMap.get(journey.name);
-      this.totalTests += attributes.tests;
-      this.totalFailures += attributes.failures;
-      this.totalSkipped += attributes.skipped;
-    });
+  override async onEnd() {
+    const root: XMLEntry = {
+      name: 'testsuites',
+      attributes: {
+        name: '',
+        tests: this.totalTests,
+        failures: this.totalFailures,
+        skipped: this.totalSkipped,
+        errors: 0,
+        time: parseInt(String(now())) / 1000,
+      },
+      children: [...this.#journeyMap.values()],
+    };
 
-    this.runner.on('end', () => {
-      const root: XMLEntry = {
-        name: 'testsuites',
-        attributes: {
-          name: '',
-          tests: this.totalTests,
-          failures: this.totalFailures,
-          skipped: this.totalSkipped,
-          errors: 0,
-          time: parseInt(String(now())) / 1000,
-        },
-        children: [...journeyMap.values()],
-      };
-      const output = serializeEntries(root).join('\n');
-      /**
-       * write the xml output to a file if specified via env flag
-       */
-      const fileName = process.env['SYNTHETICS_JUNIT_FILE'];
-      if (fileName) {
-        mkdirSync(dirname(fileName), { recursive: true });
-        writeFileSync(fileName, output);
-      } else {
-        this.write(output);
-      }
-    });
+    const output = serializeEntries(root).join('\n');
+    /**
+     * write the xml output to a file if specified via env flag
+     */
+    const fileName = process.env['SYNTHETICS_JUNIT_FILE'];
+    if (fileName) {
+      await mkdir(dirname(fileName), { recursive: true });
+      await writeFile(fileName, output);
+    } else {
+      this.write(output);
+    }
   }
 }
 

package/templates/.github/workflows/run-synthetics.yml

@@ -0,0 +1,28 @@
+name: Synthetics Run
+on:
+  push:
+    branches: [main]
+  pull_request:
+  schedule:
+    - cron: '* 0 * * *'
+jobs:
+  todos_tests:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: 'todos/synthetics-tests'
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '12.22.3'
+      - run: npm install
+      - run: "SYNTHETICS_JUNIT_FILE='junit-synthetics.xml' npx @elastic/synthetics . --reporter=junit"
+        continue-on-error: true
+      - name: Publish Unit Test Results
+        uses: EnricoMi/publish-unit-test-result-action@v1.19
+        if: always()
+        with:
+          files: '**/junit-*.xml'
+          fail_on: "test failures"
+          check_name: Todos Unit Tests

package/templates/README.md

@@ -0,0 +1,21 @@
+## Get started with Elastic Synthetics!
+
+Browse the directory structure here to see an example skeleton of an [Elastic Synthetics](https://www.elastic.co/observability/synthetic-monitoring) project.
+Make sure to [read the docs](https://www.elastic.co/guide/en/observability/current/monitor-uptime-synthetics.html) as well if you're unfamiliar with Elastic Synthetics.
+
+This directory was created with the command `npx @elastic/synthetics <target-directory>`, with `<target-directory>` being the name of the directory you'd like it to make.
+You can always use this command to create new projects.
+
+Key places to look:
+
+- The `synthetics.config.ts` file contains configuration for your project.
+- The `journeys` directory contains both basic and more advanced examples of using synthetics. It tests a publicly hosted [Todos List](https://elastic.github.io/synthetics-demo/).
+- The `.github` directory contains an example github action, demonstrating the use of a CI service for automatically running tests on merges and PR creation.
+
+To run the tests here simply use the following command:
+
+```bash
+npx @elastic/synthetics .
+```
+
+Curious to learn more? [Read the docs](https://www.elastic.co/guide/en/observability/current/monitor-uptime-synthetics.html) to learn about pushing configurations to an Elastic cloud stack and more.

package/templates/journeys/advanced-example-helpers.ts

@@ -0,0 +1,54 @@
+import { step, Page, expect } from '@elastic/synthetics';
+
+// This file contains helper files for advanced-example.journey.ts
+// The functions here let you write more concise tests  and re-use functionality
+// across tests.
+
+export const loadAppStep = (page: Page, url: string) => {
+  step('launch app', async () => {
+    await page.goto(url);
+  });
+};
+
+export const addTaskStep = (page: Page, task: string) => {
+  step(`add task ${task}`, async () => {
+    const input = await page.$('input.new-todo');
+    await input.type(task);
+    await input.press('Enter');
+  });
+};
+
+const todosSelector = 'ul.todo-list li.todo';
+
+export const findTask = async (page: Page, task: string) => {
+  return await page.waitForSelector(`${todosSelector} >> text="${task}"`);
+};
+
+export const assertTaskListSizeStep = async (page: Page, size: number) => {
+  step(`check that task list has exactly ${size} elements`, async () => {
+    expect((await page.$$(todosSelector)).length).toBe(size);
+  });
+};
+
+export const checkForTaskStep = async (page: Page, task: string) => {
+  step(`check for task '${task}' in list`, async () => {
+    return findTask(page, task);
+  });
+};
+
+export const destroyTaskStep = async (page: Page, task: string) => {
+  step(`destroy task '${task}'`, async () => {
+    const label = await findTask(page, task);
+    // xpath indexes arrays starting at 1!!! Easy to forget!
+    const li = await label.$('xpath=ancestor::li[1]');
+    const destroyButton = await li.$('button');
+
+    // The destroy button is not visible until hovered. Setup a click test which
+    // will wait up to 30s for the button to be visible.
+    const clickFuture = destroyButton.click();
+    // now hover, making the destroy button clickable
+    li.hover();
+    // now we are done
+    await clickFuture;
+  });
+};