@elastic/synthetics 1.0.0-beta.4 → 1.0.0-beta.41

package/src/dsl/journey.ts

@@ -23,10 +23,17 @@
  *
  */
 
-import { Browser, Page, BrowserContext, CDPSession } from 'playwright-chromium';
+import {
+  Browser,
+  Page,
+  BrowserContext,
+  CDPSession,
+  APIRequestContext,
+} from 'playwright-chromium';
 import micromatch, { isMatch } from 'micromatch';
 import { Step } from './step';
-import { VoidCallback, HooksCallback, Params } from '../common_types';
+import { VoidCallback, HooksCallback, Params, Location } from '../common_types';
+import { Monitor, MonitorConfig } from './monitor';
 
 export type JourneyOptions = {
   name: string;
@@ -42,6 +49,7 @@ export type JourneyCallback = (options: {
   browser: Browser;
   client: CDPSession;
   params: Params;
+  request: APIRequestContext;
 }) => void;
 
 export class Journey {
@@ -49,18 +57,26 @@ export class Journey {
   id?: string;
   tags?: string[];
   callback: JourneyCallback;
+  location?: Location;
   steps: Step[] = [];
   hooks: Hooks = { before: [], after: [] };
+  monitor: Monitor;
 
-  constructor(options: JourneyOptions, callback: JourneyCallback) {
+  constructor(
+    options: JourneyOptions,
+    callback: JourneyCallback,
+    location?: Location
+  ) {
     this.name = options.name;
-    this.id = options.id;
+    this.id = options.id || options.name;
     this.tags = options.tags;
     this.callback = callback;
+    this.location = location;
+    this.updateMonitor({});
   }
 
-  addStep(name: string, callback: VoidCallback) {
-    const step = new Step(name, this.steps.length + 1, callback);
+  addStep(name: string, callback: VoidCallback, location?: Location) {
+    const step = new Step(name, this.steps.length + 1, callback, location);
     this.steps.push(step);
     return step;
   }
@@ -68,6 +84,23 @@ export class Journey {
   addHook(type: HookType, callback: HooksCallback) {
     this.hooks[type].push(callback);
   }
+
+  updateMonitor(config: MonitorConfig) {
+    /**
+     * Use defaults values from journey for monitor object (id, name and tags)
+     */
+    this.monitor = new Monitor({
+      name: this.name,
+      id: this.id,
+      type: 'browser',
+      tags: this.tags ?? [],
+      ...config,
+    });
+    this.monitor.setSource(this.location);
+    this.monitor.setContent(this.callback.toString());
+    this.monitor.setFilter({ match: this.name });
+  }
+
   /**
    * Matches journeys based on the provided args. Proitize tags over match
    * - tags pattern that matches only tags

package/src/dsl/monitor.ts

@@ -0,0 +1,140 @@
+/**
+ * MIT License
+ *
+ * Copyright (c) 2020-present, Elastic NV
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ *
+ */
+
+import { createHash } from 'crypto';
+import merge from 'deepmerge';
+import { bold, red } from 'kleur/colors';
+import {
+  ThrottlingOptions,
+  Location,
+  ScreenshotOptions,
+  Params,
+  PlaywrightOptions,
+} from '../common_types';
+import { indent } from '../helpers';
+import { LocationsMap } from '../locations/public-locations';
+
+export type SyntheticsLocationsType = keyof typeof LocationsMap;
+export const SyntheticsLocations = Object.keys(
+  LocationsMap
+) as SyntheticsLocationsType[];
+export const ALLOWED_SCHEDULES = [1, 3, 5, 10, 15, 30, 60] as const;
+
+export type MonitorConfig = {
+  id?: string;
+  name?: string;
+  type?: string;
+  tags?: string[];
+  schedule?: typeof ALLOWED_SCHEDULES[number];
+  enabled?: boolean;
+  locations?: SyntheticsLocationsType[];
+  privateLocations?: string[];
+  throttling?: boolean | ThrottlingOptions;
+  screenshot?: ScreenshotOptions;
+  params?: Params;
+  playwrightOptions?: PlaywrightOptions;
+};
+
+type MonitorFilter = {
+  match: string;
+  tags?: string[];
+};
+
+export class Monitor {
+  content?: string;
+  source?: Location;
+  filter: MonitorFilter;
+  constructor(public config: MonitorConfig = {}) {}
+  /**
+   * Treat the creation time config with `monitor.use` as source of truth by
+   * merging the values coming from CLI and Synthetics config file
+   */
+  update(globalOpts: MonitorConfig = {}) {
+    this.config = merge(globalOpts, this.config, {
+      arrayMerge(target, source) {
+        return [...new Set(source)];
+      },
+    });
+  }
+
+  get type() {
+    return this.config.type;
+  }
+
+  setSource(source: Location) {
+    this.source = source;
+  }
+
+  /**
+   * The underlying journey code of the monitor
+   */
+  setContent(content = '') {
+    this.content = content;
+  }
+
+  /**
+   * If journey files are colocated within the same file during
+   * push command, when we invoke synthetics from HB we rely on
+   * this filter for running that specific journey alone instead of
+   * all journeys on the file
+   */
+  setFilter(filter: MonitorFilter) {
+    this.filter = filter;
+  }
+
+  /**
+   * Hash is used to identify if the monitor has changed since the last time
+   * it was pushed to Kibana. Change is based on three factors:
+   * - Monitor configuration
+   * - Code changes
+   * - File path changes
+   */
+  hash(): string {
+    const hash = createHash('sha256');
+    return hash
+      .update(JSON.stringify(this.config))
+      .update(this.content || '')
+      .update(this.source?.file || '')
+      .digest('base64');
+  }
+
+  validate() {
+    const schedule = this.config.schedule;
+    if (ALLOWED_SCHEDULES.includes(schedule)) {
+      return;
+    }
+    const { config, source } = this;
+    let outer = bold(
+      `Invalid schedule: ${schedule}, allowed values are ${ALLOWED_SCHEDULES.join(
+        ','
+      )}\n`
+    );
+    if (source) {
+      const inner = `* ${config.id} - ${source.file}:${source.line}:${source.column}\n`;
+      outer += indent(inner);
+    }
+    throw red(outer);
+  }
+}

package/src/dsl/step.ts

@@ -23,16 +23,23 @@
  *
  */
 
-import { VoidCallback } from '../common_types';
+import { Location, VoidCallback } from '../common_types';
 
 export class Step {
   name: string;
   index: number;
   callback: VoidCallback;
+  location?: Location;
 
-  constructor(name: string, index: number, callback: VoidCallback) {
+  constructor(
+    name: string,
+    index: number,
+    callback: VoidCallback,
+    location: Location
+  ) {
     this.name = name;
     this.index = index;
     this.callback = callback;
+    this.location = location;
   }
 }

package/src/formatter/javascript.ts

@@ -0,0 +1,367 @@
+/**
+ * MIT License
+ *
+ * Copyright (c) 2020-present, Elastic NV
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ *
+ */
+
+import {
+  JavaScriptLanguageGenerator,
+  JavaScriptFormatter,
+} from 'playwright-core/lib/server/recorder/javascript';
+
+export type Step = {
+  actions: ActionInContext[];
+  name?: string;
+};
+
+export type Steps = Step[];
+
+export type ActionInContext = {
+  pageAlias: string;
+  frameName?: string;
+  frameUrl: string;
+  isMainFrame: boolean;
+  action: Action;
+  committed?: boolean;
+  modified?: boolean;
+  title?: string;
+};
+
+export type Action = {
+  name: string;
+  selector?: string;
+  url?: string;
+  key?: string;
+  signals: Signal[];
+  modifiers?: number;
+  button?: 'left' | 'middle' | 'right';
+  clickCount?: number;
+  text?: string;
+  value?: string;
+  isAssert?: boolean;
+  command?: string;
+  files?: string[];
+  options?: string[];
+};
+
+export type Signal = {
+  name: string;
+  url?: string;
+  isAsync?: boolean;
+  popupAlias?: string;
+  downloadAlias?: string;
+  dialogAlias?: string;
+};
+
+export class SyntheticsGenerator extends JavaScriptLanguageGenerator {
+  private previousContext: ActionInContext;
+  private insideStep: boolean;
+
+  constructor(private isSuite: boolean) {
+    super(true);
+    this.insideStep = false;
+    this.previousContext = undefined;
+  }
+
+  /**
+   * Generate code for an action.
+   * @param actionInContext The action to create code for.
+   * @returns the strings generated for the action.
+   */
+  generateAction(actionInContext: ActionInContext) {
+    const { action, pageAlias } = actionInContext;
+    if (action.name === 'openPage') {
+      return '';
+    }
+    // Don't cleanup page object managed by Synthetics
+    const isCleanUp = action.name === 'closePage' && pageAlias === 'page';
+    if (isCleanUp) {
+      return '';
+    }
+
+    const stepIndent = this.insideStep ? 2 : 0;
+    const offset = this.isSuite ? 2 + stepIndent : 0 + stepIndent;
+    const formatter = new JavaScriptFormatter(offset);
+
+    const subject = actionInContext.isMainFrame
+      ? pageAlias
+      : actionInContext.frameName
+      ? `${pageAlias}.frame(${formatObject({
+          name: actionInContext.frameName,
+        })})`
+      : `${pageAlias}.frame(${formatObject({
+          url: actionInContext.frameUrl,
+        })})`;
+
+    const signals = toSignalMap(action);
+
+    if (signals.dialog) {
+      formatter.add(`  ${pageAlias}.once('dialog', dialog => {
+    console.log(\`Dialog message: $\{dialog.message()}\`);
+    dialog.dismiss().catch(() => {});
+  });`);
+    }
+
+    const emitPromiseAll =
+      signals.waitForNavigation || signals.popup || signals.download;
+    if (emitPromiseAll) {
+      // Generate either await Promise.all([]) or
+      // const [popup1] = await Promise.all([]).
+      let leftHandSide = '';
+      if (signals.popup)
+        leftHandSide = `const [${signals.popup.popupAlias}] = `;
+      else if (signals.download) leftHandSide = `const [download] = `;
+      formatter.add(`${leftHandSide}await Promise.all([`);
+    }
+
+    // Popup signals.
+    if (signals.popup) formatter.add(`${pageAlias}.waitForEvent('popup'),`);
+
+    // Navigation signal.
+    if (signals.waitForNavigation)
+      formatter.add(
+        `${pageAlias}.waitForNavigation(/*{ url: ${quote(
+          signals.waitForNavigation.url
+        )} }*/),`
+      );
+
+    // Download signals.
+    if (signals.download)
+      formatter.add(`${pageAlias}.waitForEvent('download'),`);
+
+    const prefix =
+      signals.popup || signals.waitForNavigation || signals.download
+        ? ''
+        : 'await ';
+    const actionCall = super._generateActionCall(action);
+    // Add assertion from Synthetics.
+    const isAssert = action.name === 'assert' && action.isAssert;
+
+    if (!isAssert) {
+      const suffix = signals.waitForNavigation || emitPromiseAll ? '' : ';';
+      formatter.add(`${prefix}${subject}.${actionCall}${suffix}`);
+
+      if (emitPromiseAll) {
+        formatter.add(`]);`);
+      } else if (signals.assertNavigation) {
+        formatter.add(
+          `  expect(${pageAlias}.url()).toBe(${quote(
+            signals.assertNavigation.url
+          )});`
+        );
+      }
+    } else if (action.command) {
+      formatter.add(toAssertCall(pageAlias, action));
+    }
+
+    this.previousContext = actionInContext;
+    return formatter.format();
+  }
+
+  isNewStep(actioninContext: ActionInContext) {
+    const { action, frameUrl } = actioninContext;
+    if (action.name === 'navigate') {
+      return true;
+    } else if (action.name === 'click') {
+      return (
+        this.previousContext?.frameUrl === frameUrl && action.signals.length > 0
+      );
+    }
+    return false;
+  }
+
+  generateStepStart(name) {
+    this.insideStep = true;
+    const formatter = new JavaScriptFormatter(this.isSuite ? 2 : 0);
+    formatter.add(`step(${quote(name)}, async () => {`);
+    return formatter.format();
+  }
+
+  generateStepEnd() {
+    if (!this.insideStep) {
+      return '';
+    }
+    this.insideStep = false;
+    const formatter = new JavaScriptFormatter(this.isSuite ? 2 : 0);
+    formatter.add(`});`);
+    return formatter.format();
+  }
+
+  generateHeader() {
+    const formatter = new JavaScriptFormatter(0);
+    formatter.add(`
+      const { journey, step, expect } = require('@elastic/synthetics');
+
+      journey('Recorded journey', async ({ page, context }) => {`);
+    return formatter.format();
+  }
+
+  generateFooter() {
+    return `});`;
+  }
+
+  /**
+   * Generates JavaScript code from a custom set of steps and nested actions.
+   *
+   * This function makes no assumptions about where steps should be created,
+   * and instead follows the step definitions the caller has defined.
+   * @param steps IR to use for code generation
+   * @returns a list of the code strings outputted by the generator
+   */
+  generateFromSteps(steps: Steps): string {
+    const text = [];
+    if (this.isSuite) {
+      text.push(this.generateHeader());
+    }
+    for (const step of steps) {
+      if (step.actions.length === 0)
+        throw Error('Cannot process an empty step');
+      text.push(
+        this.generateStepStart(
+          step.name ??
+            step.actions[0].title ??
+            actionTitle(step.actions[0].action)
+        )
+      );
+
+      for (const action of step.actions) {
+        const actionText = this.generateAction(action);
+        if (actionText.length) text.push(actionText);
+      }
+
+      text.push(this.generateStepEnd());
+    }
+    if (this.isSuite) {
+      text.push(this.generateFooter());
+    }
+    return text.filter(s => !!s).join('\n');
+  }
+}
+
+// TODO: Replace once Playwright releases new version
+export function quote(text: string, char = "'") {
+  const stringified = JSON.stringify(text);
+  const escapedText = stringified
+    .substring(1, stringified.length - 1)
+    .replace(/\\"/g, '"');
+  if (char === "'") return char + escapedText.replace(/[']/g, "\\'") + char;
+  if (char === '"') return char + escapedText.replace(/["]/g, '\\"') + char;
+  if (char === '`') return char + escapedText.replace(/[`]/g, '`') + char;
+  throw new Error('Invalid escape char');
+}
+
+function toSignalMap(action) {
+  let waitForNavigation;
+  let assertNavigation;
+  let popup;
+  let download;
+  let dialog;
+  for (const signal of action.signals) {
+    if (signal.name === 'navigation' && signal.isAsync)
+      waitForNavigation = signal;
+    else if (signal.name === 'navigation' && !signal.isAsync)
+      assertNavigation = signal;
+    else if (signal.name === 'popup') popup = signal;
+    else if (signal.name === 'download') download = signal;
+    else if (signal.name === 'dialog') dialog = signal;
+  }
+  return {
+    waitForNavigation,
+    assertNavigation,
+    popup,
+    download,
+    dialog,
+  };
+}
+
+function toAssertCall(pageAlias, action) {
+  const { command, selector, value } = action;
+  switch (command) {
+    case 'textContent':
+    case 'innerText':
+      return `expect(await ${pageAlias}.${command}(${quote(
+        selector
+      )})).toMatch(${quote(value)});`;
+    case 'isVisible':
+    case 'isHidden':
+    case 'isChecked':
+    case 'isEditable':
+    case 'isEnabled':
+    case 'isDisabled':
+      return `expect(await ${pageAlias}.${command}(${quote(
+        selector
+      )})).toBeTruthy();`;
+  }
+}
+
+function formatObject(value, indent = '  ') {
+  if (typeof value === 'string') return quote(value);
+  if (Array.isArray(value))
+    return `[${value.map(o => formatObject(o)).join(', ')}]`;
+  if (typeof value === 'object') {
+    const keys = Object.keys(value);
+    if (!keys.length) return '{}';
+    const tokens = [];
+    for (const key of keys) tokens.push(`${key}: ${formatObject(value[key])}`);
+    return `{\n${indent}${tokens.join(`,\n${indent}`)}\n}`;
+  }
+  return String(value);
+}
+
+/**
+ * Generates an appropriate title string based on the action type/data.
+ * @param action Playwright action IR
+ * @returns title string
+ */
+export function actionTitle(action: Action) {
+  switch (action.name) {
+    case 'openPage':
+      return `Open new page`;
+    case 'closePage':
+      return `Close page`;
+    case 'check':
+      return `Check ${action.selector}`;
+    case 'uncheck':
+      return `Uncheck ${action.selector}`;
+    case 'click': {
+      if (action.clickCount === 1) return `Click ${action.selector}`;
+      if (action.clickCount === 2) return `Double click ${action.selector}`;
+      if (action.clickCount === 3) return `Triple click ${action.selector}`;
+      return `${action.clickCount}× click`;
+    }
+    case 'fill':
+      return `Fill ${action.selector}`;
+    case 'setInputFiles':
+      if (action.files.length === 0) return `Clear selected files`;
+      else return `Upload ${action.files.join(', ')}`;
+    case 'navigate':
+      return `Go to ${action.url}`;
+    case 'press':
+      return (
+        `Press ${action.key}` + (action.modifiers ? ' with modifiers' : '')
+      );
+    case 'select':
+      return `Select ${action.options.join(', ')}`;
+    case 'assert':
+      return `Assert ${action.selector} ${action.command}`;
+  }
+}