@elastic/synthetics 1.0.0-beta.14 → 1.0.0-beta.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elastic/synthetics",
-  "version": "1.0.0-beta.14",
+  "version": "1.0.0-beta.18",
   "description": "Elastic synthetic monitoring agent",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -46,7 +46,7 @@
     "kleur": "^4.1.3",
     "micromatch": "^4.0.4",
     "playwright-chromium": "=1.14.0",
-    "sharp": "^0.28.3",
+    "sharp": "^0.29.3",
     "snakecase-keys": "^3.2.1",
     "sonic-boom": "^2.1.0",
     "source-map-support": "^0.5.19",
@@ -54,23 +54,23 @@
     "typescript": "^4.3.5"
   },
   "devDependencies": {
-    "@types/jest": "^26.0.19",
+    "@types/jest": "^27.4.0",
     "@types/micromatch": "^4.0.1",
     "@types/node": "^14.14.14",
     "@types/sharp": "^0.28.2",
-    "@typescript-eslint/eslint-plugin": "^3.10.1",
-    "@typescript-eslint/parser": "^3.10.1",
-    "eslint": "^7.15.0",
+    "@typescript-eslint/eslint-plugin": "^5.0.0",
+    "@typescript-eslint/parser": "^5.0.0",
+    "eslint": "^8.0.1",
     "husky": "^4.3.6",
-    "jest": "^26.6.3",
+    "jest": "^27.4.5",
     "lint-staged": "^10.5.3",
     "npm-pack-all": "^1.12.7",
-    "prettier": "^2.2.1",
-    "ts-jest": "^26.4.4",
-    "rimraf": "^3.0.2"
+    "prettier": "^2.4.1",
+    "rimraf": "^3.0.2",
+    "ts-jest": "^27.1.2"
   },
   "engines": {
-    "node": ">12.0.0",
+    "node": ">14.14.0",
     "npm": "6"
   }
 }

package/src/cli.ts

@@ -37,6 +37,7 @@ import {
   isDepInstalled,
   isDirectory,
   totalist,
+  parseNetworkConditions,
 } from './helpers';
 import { run } from './';
 import { readConfig } from './config';
@@ -125,6 +126,25 @@ async function prepareSuites(inputs: string[]) {
 }
 
 (async () => {
+  /**
+   * Transform `.ts` files out of the box by invoking
+   * the `ts-node` via `transpile-only` mode that compiles
+   * TS files without doing any extensive type checks.
+   *
+   * We must register `ts-node` _before_ loading inline
+   * scripts too because otherwise we will not be able to
+   * require `.ts` configuration files.
+   */
+  /* eslint-disable-next-line @typescript-eslint/no-var-requires */
+  require('ts-node').register({
+    transpileOnly: true,
+    compilerOptions: {
+      esModuleInterop: true,
+      allowJs: true,
+      target: 'es2018',
+    },
+  });
+
   if (options.inline) {
     const source = await readStdin();
     loadInlineScript(source);
@@ -140,20 +160,6 @@ async function prepareSuites(inputs: string[]) {
         throw new Error(`cannot find module '${name}'`);
       }
     }
-    /**
-     * Transform `.ts` files out of the box by invoking
-     * the `ts-node` via `transpile-only` mode that compiles
-     * TS files without doing any extensive type checks
-     */
-    /* eslint-disable-next-line @typescript-eslint/no-var-requires */
-    require('ts-node').register({
-      transpileOnly: true,
-      compilerOptions: {
-        esModuleInterop: true,
-        allowJs: true,
-        target: 'es2018',
-      },
-    });
     /**
      * Handle piped files by reading the STDIN
      * ex: ls example/suites/*.js | npx @elastic/synthetics
@@ -173,19 +179,30 @@ async function prepareSuites(inputs: string[]) {
   /**
    * Validate and handle configs
    */
-  const config = readConfig(environment, options.config);
-  const params = merge(
-    config.params,
-    options.suiteParams || {},
-    options.params || {}
-  );
-  const playwrightOptions = merge(config.playwrightOptions, {
-    headless: options.headless,
-    chromiumSandbox: options.sandbox,
-    ignoreHTTPSErrors: options.ignoreHttpsErrors,
-  });
+  const config =
+    options.config || !options.inline
+      ? readConfig(environment, options.config)
+      : {};
+  const params = merge(config.params, options.params || {});
+
+  /**
+   * Favor playwright options passed via cli to inline playwright options
+   */
+  const playwrightOptions = merge.all([
+    config.playwrightOptions || {},
+    options.playwrightOptions || {},
+    {
+      headless: options.headless,
+      chromiumSandbox: options.sandbox,
+      ignoreHTTPSErrors: options.ignoreHttpsErrors,
+    },
+  ]);
+
   const results = await run({
     params: Object.freeze(params),
+    networkConditions: options.throttling
+      ? parseNetworkConditions(options.throttling as string)
+      : undefined,
     environment,
     playwrightOptions,
     ...options,

package/src/common_types.ts

@@ -37,6 +37,12 @@ import { reporters } from './reporters';
 
 export type VoidCallback = () => void;
 export type Params = Record<string, any>;
+export type NetworkConditions = {
+  offline: boolean;
+  downloadThroughput: number;
+  uploadThroughput: number;
+  latency: number;
+};
 export type HooksArgs = {
   env: string;
   params: Params;
@@ -88,6 +94,12 @@ export type BrowserInfo = {
   version: string;
 };
 
+export type Screenshot = {
+  timestamp: number;
+  step: Step;
+  data: string;
+};
+
 export type NetworkInfo = {
   url: string;
   browser: BrowserInfo;
@@ -157,10 +169,8 @@ export type CliArgs = {
   debug?: boolean;
   ignoreHttpsErrors?: boolean;
   params?: Params;
-  /**
-   * @deprecated use params instead
-   */
-  suiteParams?: Params;
+  throttling?: boolean | string;
+  playwrightOptions?: LaunchOptions & BrowserContextOptions;
   richEvents?: boolean;
 };
 

package/src/core/gatherer.ts

@@ -23,7 +23,7 @@
  *
  */
 
-import { chromium, ChromiumBrowser } from 'playwright-chromium';
+import { chromium, ChromiumBrowser, BrowserContext } from 'playwright-chromium';
 import { PluginManager } from '../plugins';
 import { RunOptions } from './runner';
 import { log } from './logger';
@@ -37,21 +37,56 @@ export class Gatherer {
   static browser: ChromiumBrowser;
 
   static async setupDriver(options: RunOptions): Promise<Driver> {
-    const { wsEndpoint, playwrightOptions } = options;
+    log('Gatherer: setup driver');
+    const { wsEndpoint, playwrightOptions, networkConditions } = options;
+
     if (Gatherer.browser == null) {
       if (wsEndpoint) {
         log(`Gatherer: connecting to WS endpoint: ${wsEndpoint}`);
         Gatherer.browser = await chromium.connect({ wsEndpoint });
       } else {
-        Gatherer.browser = await chromium.launch(playwrightOptions);
+        Gatherer.browser = await chromium.launch({
+          ...playwrightOptions,
+          args: [
+            ...(playwrightOptions?.headless ? ['--disable-gpu'] : []),
+            ...(playwrightOptions?.args ?? []),
+          ],
+        });
       }
     }
-    const context = await Gatherer.browser.newContext(playwrightOptions);
+    const context = await Gatherer.browser.newContext({
+      ...playwrightOptions,
+      userAgent: await Gatherer.getUserAgent(),
+    });
+    await Gatherer.setNetworkConditions(context, networkConditions);
+
     const page = await context.newPage();
     const client = await context.newCDPSession(page);
     return { browser: Gatherer.browser, context, page, client };
   }
 
+  static async getUserAgent() {
+    const session = await Gatherer.browser.newBrowserCDPSession();
+    const { userAgent } = await session.send('Browser.getVersion');
+    return userAgent + ' Elastic/Synthetics';
+  }
+
+  static async setNetworkConditions(
+    context: BrowserContext,
+    networkConditions: RunOptions['networkConditions']
+  ) {
+    if (networkConditions) {
+      context.on('page', async page => {
+        const context = page.context();
+        const client = await context.newCDPSession(page);
+        await client.send(
+          'Network.emulateNetworkConditions',
+          networkConditions
+        );
+      });
+    }
+  }
+
   /**
    * Starts recording all events related to the v8 devtools protocol
    * https://chromedevtools.github.io/devtools-protocol/v8/

package/src/core/runner.ts

@@ -25,6 +25,7 @@
 
 import { once, EventEmitter } from 'events';
 import { join } from 'path';
+import { rm } from 'fs/promises';
 import { Journey } from '../dsl/journey';
 import { Step } from '../dsl/step';
 import { reporters, Reporter } from '../reporters';
@@ -35,18 +36,19 @@ import {
   runParallel,
   generateUniqueId,
   mkdirAsync,
-  rmdirAsync,
   writeFileAsync,
 } from '../helpers';
 import {
   StatusValue,
   HooksCallback,
   Params,
+  NetworkConditions,
   PluginOutput,
   CliArgs,
   HooksArgs,
   PlaywrightOptions,
   Driver,
+  Screenshot,
 } from '../common_types';
 import { PageMetrics, PluginManager } from '../plugins';
 import { PerformanceManager } from '../plugins';
@@ -64,19 +66,20 @@ export type RunOptions = Omit<
   | 'capability'
   | 'sandbox'
   | 'headless'
+  | 'throttling'
 > & {
   environment?: string;
   playwrightOptions?: PlaywrightOptions;
+  networkConditions?: NetworkConditions;
   reporter?: CliArgs['reporter'] | Reporter;
 };
 
-type BaseContext = {
+type HookType = 'beforeAll' | 'afterAll';
+export type SuiteHooks = Record<HookType, Array<HooksCallback>>;
+
+type JourneyContext = {
   params?: Params;
   start: number;
-  end?: number;
-};
-
-type JourneyContext = BaseContext & {
   driver: Driver;
   pluginManager: PluginManager;
 };
@@ -100,32 +103,40 @@ type JourneyResult = {
 
 type RunResult = Record<string, JourneyResult>;
 
-type HookType = 'beforeAll' | 'afterAll';
-export type SuiteHooks = Record<HookType, Array<HooksCallback>>;
+interface StepEvent {
+  step: Step;
+  journey: Journey;
+}
+
+interface JourneyEvent {
+  journey: Journey;
+  timestamp: number;
+  params?: Params;
+}
 
 interface Events {
-  start: { numJourneys: number };
-  'journey:register': {
-    journey: Journey;
+  start: {
+    numJourneys: number;
+    networkConditions?: NetworkConditions;
   };
-  'journey:start': {
+  'journey:register': {
     journey: Journey;
-    timestamp: number;
-    params: Params;
   };
-  'journey:end': BaseContext &
+  'journey:start': JourneyEvent;
+  'journey:end': JourneyEvent &
     JourneyResult & {
-      journey: Journey;
+      start: number;
+      end: number;
       options: RunOptions;
+      timestamp: number;
     };
   'journey:end:reported': unknown;
-  'step:start': { journey: Journey; step: Step };
-  'step:end': StepResult & {
-    start: number;
-    end: number;
-    journey: Journey;
-    step: Step;
-  };
+  'step:start': StepEvent;
+  'step:end': StepEvent &
+    StepResult & {
+      start: number;
+      end: number;
+    };
   end: unknown;
 }
 
@@ -143,8 +154,12 @@ export default class Runner extends EventEmitter {
   static screenshotPath = join(CACHE_PATH, 'screenshots');
 
   static async createContext(options: RunOptions): Promise<JourneyContext> {
-    const start = monotonicTimeInSeconds();
     const driver = await Gatherer.setupDriver(options);
+    /**
+     * Do not include browser launch/context creation duration
+     * as part of journey duration
+     */
+    const start = monotonicTimeInSeconds();
     const pluginManager = await Gatherer.beginRecording(driver, options);
     /**
      * For each journey we create the screenshots folder for
@@ -174,12 +189,14 @@ export default class Runner extends EventEmitter {
      */
     if (buffer) {
       const fileName = `${generateUniqueId()}.json`;
+      const screenshot: Screenshot = {
+        step,
+        timestamp: getTimestamp(),
+        data: buffer.toString('base64'),
+      };
       await writeFileAsync(
         join(Runner.screenshotPath, fileName),
-        JSON.stringify({
-          step,
-          data: buffer.toString('base64'),
-        })
+        JSON.stringify(screenshot)
       );
     }
   }
@@ -333,6 +350,7 @@ export default class Runner extends EventEmitter {
     result: JourneyContext & JourneyResult,
     options: RunOptions
   ) {
+    const end = monotonicTimeInSeconds();
     const { pluginManager, start, status, error } = result;
     const pluginOutput = pluginManager.output();
     this.emit('journey:end', {
@@ -340,7 +358,8 @@ export default class Runner extends EventEmitter {
       status,
       error,
       start,
-      end: monotonicTimeInSeconds(),
+      end,
+      timestamp: getTimestamp(),
       options,
       ...pluginOutput,
       browserconsole: status == 'failed' ? pluginOutput.browserconsole : [],
@@ -353,7 +372,7 @@ export default class Runner extends EventEmitter {
       await once(this, 'journey:end:reported');
     }
     // clear screenshots cache after each journey
-    await rmdirAsync(Runner.screenshotPath, { recursive: true });
+    await rm(Runner.screenshotPath, { recursive: true, force: true });
   }
 
   /**
@@ -372,6 +391,7 @@ export default class Runner extends EventEmitter {
     };
     this.emit('journey:end', {
       journey,
+      timestamp: getTimestamp(),
       start,
       options,
       end: monotonicTimeInSeconds(),
@@ -387,8 +407,8 @@ export default class Runner extends EventEmitter {
     const result: JourneyResult = {
       status: 'succeeded',
     };
-    log(`Runner: start journey (${journey.name})`);
     const context = await Runner.createContext(options);
+    log(`Runner: start journey (${journey.name})`);
     try {
       this.registerJourney(journey, context);
       const hookArgs = {
@@ -419,7 +439,7 @@ export default class Runner extends EventEmitter {
   }
 
   async init(options: RunOptions) {
-    const { reporter, outfd } = options;
+    const { reporter, outfd, networkConditions } = options;
     /**
      * Set up the corresponding reporter and fallback
      */
@@ -428,7 +448,10 @@ export default class Runner extends EventEmitter {
         ? reporter
         : reporters[reporter] || reporters['default'];
     new Reporter(this, { fd: outfd });
-    this.emit('start', { numJourneys: this.journeys.length });
+    this.emit('start', {
+      numJourneys: this.journeys.length,
+      networkConditions,
+    });
     /**
      * Set up the directory for caching screenshots
      */
@@ -479,7 +502,7 @@ export default class Runner extends EventEmitter {
      * Clear all cache data stored for post processing by
      * the current synthetic agent run
      */
-    await rmdirAsync(CACHE_PATH, { recursive: true });
+    await rm(CACHE_PATH, { recursive: true, force: true });
     this.currentJourney = null;
     this.journeys = [];
     this.active = false;

package/src/formatter/javascript.ts

@@ -35,6 +35,7 @@ export type ActionInContext = {
   isMainFrame: boolean;
   action: Action;
   committed?: boolean;
+  title?: string;
 };
 
 type Action = {
@@ -71,7 +72,7 @@ export class SyntheticsGenerator extends JavaScriptLanguageGenerator {
   }
 
   generateAction(actionInContext: ActionInContext) {
-    const { action, pageAlias } = actionInContext;
+    const { action, pageAlias, title } = actionInContext;
     if (action.name === 'openPage') {
       return '';
     }
@@ -88,7 +89,7 @@ export class SyntheticsGenerator extends JavaScriptLanguageGenerator {
       if (this.insideStep) {
         formatter.add(this.generateStepEnd());
       }
-      formatter.add(this.generateStepStart(actionTitle(action)));
+      formatter.add(this.generateStepStart(title || actionTitle(action)));
     } else {
       formatter = new JavaScriptFormatter(this.isSuite ? 4 : 2);
     }
@@ -264,11 +265,16 @@ function toAssertCall(pageAlias, action) {
   const { command, selector, value } = action;
   switch (command) {
     case 'textContent':
+    case 'innerText':
       return `expect(await ${pageAlias}.${command}(${quote(
         selector
-      )})).toBe(${quote(value)});`;
+      )})).toMatch(${quote(value)});`;
     case 'isVisible':
     case 'isHidden':
+    case 'isChecked':
+    case 'isEditable':
+    case 'isEnabled':
+    case 'isDisabled':
       return `expect(await ${pageAlias}.${command}(${quote(
         selector
       )})).toBeTruthy();`;

package/src/helpers.ts

@@ -29,14 +29,13 @@ import { resolve, join, dirname } from 'path';
 import fs from 'fs';
 import { promisify } from 'util';
 import { performance } from 'perf_hooks';
-import { HooksArgs, HooksCallback } from './common_types';
+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 rmdirAsync = promisify(fs.rmdir);
 export const mkdirAsync = promisify(fs.mkdir);
 
 const SEPARATOR = '\n';
@@ -257,3 +256,62 @@ 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

@@ -72,3 +72,4 @@ 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';

package/src/parse_args.ts

@@ -26,6 +26,7 @@
 import { program, Option } from 'commander';
 import { CliArgs } from './common_types';
 import { reporters } from './reporters';
+import { DEFAULT_NETWORK_CONDITIONS_ARG } from './helpers';
 
 /* eslint-disable-next-line @typescript-eslint/no-var-requires */
 const { name, version } = require('../package.json');
@@ -42,11 +43,6 @@ program
     'JSON object that gets injected to all journeys',
     JSON.parse
   )
-  .option(
-    '-s, --suite-params <jsonstring>',
-    'DEPRECATED: Use --params instead',
-    JSON.parse
-  )
   .addOption(
     new Option('--reporter <value>', `output repoter format`).choices(
       Object.keys(reporters)
@@ -104,6 +100,14 @@ program
     '--quiet-exit-code',
     'always return 0 as an exit code status, regardless of test pass / fail. Only return > 0 exit codes on internal errors where the suite could not be run'
   )
+  .addOption(
+    new Option(
+      '--throttling <d/u/l>',
+      'List of options to throttle network conditions for download throughput (d) in megabits/second, upload throughput (u) in megabits/second and latency (l) in milliseconds.'
+    ).default(DEFAULT_NETWORK_CONDITIONS_ARG)
+  )
+  .option('--no-throttling', 'Turns off default network throttling.')
+  .option('--playwright-options <jsonstring>', 'JSON object to pass in custom Playwright options for the agent. Options passed will be merged with Playwright options defined in your synthetics.config.js file. Options defined via --playwright-options take precedence.', JSON.parse)
   .version(version)
   .description('Run synthetic tests');
 
@@ -119,6 +123,7 @@ if (options.richEvents) {
   options.ssblocks = true;
   options.network = true;
   options.quietExitCode = true;
+  options.trace = true;
 }
 
 if (options.capability) {