@elastic/synthetics 1.0.0-beta.2 → 1.0.0-beta.22

package/src/formatter/javascript.ts

@@ -0,0 +1,330 @@
+/**
+ * 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-chromium/lib/server/supplements/recorder/javascript';
+
+export type ActionInContext = {
+  pageAlias: string;
+  frameName?: string;
+  frameUrl: string;
+  isMainFrame: boolean;
+  action: Action;
+  committed?: boolean;
+  modified?: boolean;
+  title?: string;
+};
+
+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;
+};
+
+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;
+  }
+
+  generateAction(actionInContext: ActionInContext) {
+    const { action, pageAlias, title } = actionInContext;
+    if (action.name === 'openPage') {
+      return '';
+    }
+    // Don't cleanup page object managed by Synthetics
+    const isCleanUp = action.name === 'closePage' && pageAlias === 'page';
+    if (isCleanUp) {
+      return '';
+    }
+
+    let formatter = new JavaScriptFormatter(this.isSuite ? 2 : 0);
+    // Check if it's a new step
+    const isNewStep = this.isNewStep(actionInContext);
+    if (isNewStep) {
+      if (this.insideStep) {
+        formatter.add(this.generateStepEnd());
+      }
+      formatter.add(this.generateStepStart(title || actionTitle(action)));
+    } else {
+      formatter = new JavaScriptFormatter(this.isSuite ? 4 : 2);
+    }
+
+    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;
+    return `step(${quote(name)}, async () => {`;
+  }
+
+  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 `});`;
+  }
+
+  generateText(actions: Array<ActionInContext>) {
+    const text = [];
+    if (this.isSuite) {
+      text.push(this.generateHeader());
+    }
+    for (let i = 0; i < actions.length; i++) {
+      text.push(this.generateAction(actions[i]));
+      if (i === actions.length - 1) text.push(this.generateStepEnd());
+    }
+    if (this.isSuite) {
+      text.push(this.generateFooter());
+    }
+    return text.filter(t => Boolean(t)).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);
+}
+
+function actionTitle(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(', ')}`;
+  }
+}

package/src/helpers.ts

@@ -26,12 +26,18 @@
 import { red, green, yellow, cyan } from 'kleur/colors';
 import os from 'os';
 import { resolve, join, dirname } from 'path';
-import fs, { statSync } from 'fs';
+import fs from 'fs';
 import { promisify } from 'util';
 import { performance } from 'perf_hooks';
+import { HooksArgs, HooksCallback, NetworkConditions } from './common_types';
+
+const lstatAsync = promisify(fs.lstat);
+const readdirAsync = promisify(fs.readdir);
+
+export const readFileAsync = promisify(fs.readFile);
+export const writeFileAsync = promisify(fs.writeFile);
+export const mkdirAsync = promisify(fs.mkdir);
 
-const statAsync = promisify(fs.lstat);
-const readAsync = promisify(fs.readdir);
 const SEPARATOR = '\n';
 
 export function noop() {}
@@ -40,37 +46,47 @@ export function indent(lines: string, tab = '   ') {
   return lines.replace(/^/gm, tab);
 }
 
+/**
+ *  Disable unicode symbols for windows, the underlying
+ *  FS stream has a known issue in windows
+ */
+const NO_UTF8_SUPPORT = process.platform === 'win32';
 export const symbols = {
-  warning: yellow('⚠'),
+  warning: yellow(NO_UTF8_SUPPORT ? '!' : '⚠'),
   skipped: cyan('-'),
-  succeeded: green('✓'),
-  failed: red('✖'),
+  succeeded: green(NO_UTF8_SUPPORT ? 'ok' : '✓'),
+  failed: red(NO_UTF8_SUPPORT ? 'x' : '✖'),
 };
 
+export function generateUniqueId() {
+  return `${Date.now() + Math.floor(Math.random() * 1e13)}`;
+}
+
 export function generateTempPath() {
-  return join(os.tmpdir(), `synthetics-${process.hrtime().toString()}`);
+  return join(os.tmpdir(), `synthetics-${generateUniqueId()}`);
 }
 
 /**
- * We internally use the clock timing similar to the
- * chrome devtools protocol network events for
- * journey and step start/end fields to make
- * querying in the UI easier
+ * Get Monotonically increasing time in seconds since
+ * an arbitrary point in the past.
+ *
+ * We internally use the monotonically increasing clock timing
+ * similar to the chrome devtools protocol network events for
+ * journey,step start/end fields to make querying in the UI easier
  */
-export function getMonotonicTime() {
+export function monotonicTimeInSeconds() {
   const hrTime = process.hrtime(); // [seconds, nanoseconds]
   return hrTime[0] * 1 + hrTime[1] / 1e9;
 }
 
 /**
- * Converts the trace events timestamp field from the
- * format -  hrTime[0] * 1e6 + Math.round(hrTime[1] / 1000) to
- * the internal timestamp similar to other event types (journey, step, etc)
+ * Converts the trace events timestamp field from microsecond
+ * resolution to monotonic seconds timestamp similar to other event types (journey, step, etc)
  * Reference - https://github.com/samccone/chrome-trace-event/blob/d45bc8af3b5c53a3adfa2c5fc107b4fae054f579/lib/trace-event.ts#L21-L22
  *
  * Tested and verified on both Darwin and Linux
  */
-export function convertTraceTimestamp(ts: number) {
+export function microSecsToSeconds(ts: number) {
   return ts / 1e6;
 }
 
@@ -90,10 +106,13 @@ export function now() {
 }
 
 /**
- * Execute all the callbacks in parallel using Promise.all
+ * Execute all the hooks callbacks in parallel using Promise.all
  */
-export async function runParallel(callbacks) {
-  const promises = callbacks.map(cb => cb());
+export async function runParallel(
+  callbacks: Array<HooksCallback>,
+  args: HooksArgs
+) {
+  const promises = callbacks.map(cb => cb(args));
   return await Promise.all(promises);
 }
 
@@ -105,12 +124,12 @@ export function isDepInstalled(dep) {
   }
 }
 
-export async function isDirectory(path) {
-  return (await statAsync(path)).isDirectory();
+export function isDirectory(path) {
+  return fs.existsSync(path) && fs.statSync(path).isDirectory();
 }
 
 export function isFile(filePath) {
-  return fs.existsSync(filePath) && statSync(filePath).isFile();
+  return fs.existsSync(filePath) && fs.statSync(filePath).isFile();
 }
 
 /**
@@ -150,11 +169,11 @@ export async function totalist(
   pre = ''
 ) {
   dir = resolve('.', dir);
-  await readAsync(dir).then(arr => {
+  await readdirAsync(dir).then(arr => {
     return Promise.all(
       arr.map(str => {
         const abs = join(dir, str);
-        return statAsync(abs).then(stats =>
+        return lstatAsync(abs).then(stats =>
           stats.isDirectory()
             ? totalist(abs, callback, join(pre, str))
             : callback(join(pre, str), abs)
@@ -225,3 +244,74 @@ export function formatError(error: Error) {
     stack: rewriteErrorStack(stack, indexes),
   };
 }
+
+const cwd = process.cwd();
+/**
+ * Synthetics cache path that is based on the process id to make sure
+ * each process does not modify the caching layer used by other process
+ * once we move to executing journeys in parallel
+ */
+export const CACHE_PATH = join(cwd, '.synthetics', process.pid.toString());
+
+export function getDurationInUs(duration: number) {
+  return Math.trunc(duration * 1e6);
+}
+
+export function megabitsToBytes(megabytes: number) {
+  return (megabytes * 1024 * 1024) / 8;
+}
+
+export function bytesToMegabits(bytes: number) {
+  return (bytes / 1024 / 1024) * 8;
+}
+
+export const DEFAULT_NETWORK_CONDITIONS: NetworkConditions = {
+  downloadThroughput: megabitsToBytes(5), // Devtools CDP expects format to be in bytes/second
+  uploadThroughput: megabitsToBytes(3), // Devtools CDP expects format to be in bytes/second
+  latency: 20, // milliseconds,
+  offline: false,
+};
+
+// Tranforms CDP dev tools format back to cli args format
+export function formatNetworkConditionsArgs(
+  networkConditions: NetworkConditions
+) {
+  const d = bytesToMegabits(networkConditions.downloadThroughput);
+  const u = bytesToMegabits(networkConditions.uploadThroughput);
+  const l = networkConditions.latency;
+  return `${d}d/${u}u/${l}l`;
+}
+
+export const DEFAULT_NETWORK_CONDITIONS_ARG = formatNetworkConditionsArgs(
+  DEFAULT_NETWORK_CONDITIONS
+);
+
+export function parseNetworkConditions(args: string): NetworkConditions {
+  const uploadToken = 'u';
+  const downloadToken = 'd';
+  const latencyToken = 'l';
+  const networkConditions = {
+    ...DEFAULT_NETWORK_CONDITIONS,
+  };
+
+  const conditions = args.split('/');
+
+  conditions.forEach(condition => {
+    const value = condition.slice(0, condition.length - 1);
+    const token = condition.slice(-1);
+
+    switch (token) {
+      case uploadToken:
+        networkConditions.uploadThroughput = megabitsToBytes(Number(value));
+        break;
+      case downloadToken:
+        networkConditions.downloadThroughput = megabitsToBytes(Number(value));
+        break;
+      case latencyToken:
+        networkConditions.latency = Number(value);
+        break;
+    }
+  });
+
+  return networkConditions;
+}

package/src/index.ts

@@ -25,7 +25,6 @@
 
 import { runner } from './core';
 import { RunOptions } from './core/runner';
-import { setLogger } from './core/logger';
 import sourceMapSupport from 'source-map-support';
 
 export async function run(options: RunOptions) {
@@ -35,11 +34,6 @@ export async function run(options: RunOptions) {
   sourceMapSupport.install({
     environment: 'node',
   });
-  /**
-   * set up logger with appropriate file descriptor
-   * to capture all the DEBUG logs when run through heartbeat
-   */
-  setLogger(options.outfd);
 
   try {
     return await runner.run(options);
@@ -49,7 +43,11 @@ export async function run(options: RunOptions) {
   }
 }
 
+/**
+ * Export all core module functions
+ */
 export { beforeAll, afterAll, journey, step, before, after } from './core';
+export { expect } from './core/expect';
 /**
  * Export all the driver related types to be consumed
  * and used by suites
@@ -66,3 +64,6 @@ export type {
  */
 export type { default as Runner } from './core/runner';
 export type { Reporter, ReporterOptions } from './reporters';
+
+export type { SyntheticsConfig } from './common_types';
+export type { ActionInContext } from './formatter/javascript';