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

package/src/plugins/performance.ts

@@ -23,7 +23,7 @@
  *
  */
 
-import { CDPSession } from 'playwright-chromium';
+import { Driver } from '../common_types';
 
 const supportedMetrics = new Set<string>([
   'Timestamp',
@@ -41,7 +41,7 @@ const supportedMetrics = new Set<string>([
   'JSHeapTotalSize',
 ]);
 
-export interface Metrics {
+export interface PageMetrics {
   Timestamp?: number;
   Documents?: number;
   Frames?: number;
@@ -58,22 +58,22 @@ export interface Metrics {
 }
 
 export class PerformanceManager {
-  constructor(private client: CDPSession) {}
+  constructor(private driver: Driver) {}
 
   async start() {
-    await this.client.send('Performance.enable');
+    await this.driver.client.send('Performance.enable');
   }
 
   async stop() {
-    await this.client.send('Performance.disable');
+    await this.driver.client.send('Performance.disable');
   }
 
   async getMetrics() {
-    const { metrics } = await this.client.send('Performance.getMetrics');
+    const { metrics } = await this.driver.client.send('Performance.getMetrics');
     return this.buildMetricsObject(metrics);
   }
 
-  private buildMetricsObject(metrics = []): Metrics {
+  private buildMetricsObject(metrics = []): PageMetrics {
     const result = {};
     for (const metric of metrics) {
       if (supportedMetrics.has(metric.name)) result[metric.name] = metric.value;

package/src/plugins/plugin-manager.ts

@@ -23,79 +23,90 @@
  *
  */
 
-import { NetworkInfo, FilmStrip } from '../common_types';
+import { PluginOutput, Driver } from '../common_types';
 import {
   BrowserConsole,
-  BrowserMessage,
   NetworkManager,
   PerformanceManager,
   Tracing,
-  filterFilmstrips,
+  TraceOptions,
 } from './';
-import { Driver } from '../core/gatherer';
 import { Step } from '../dsl';
 
 type PluginType = 'network' | 'trace' | 'performance' | 'browserconsole';
-
-type PluginOutput = {
-  filmstrips?: Array<FilmStrip>;
-  networkinfo?: Array<NetworkInfo>;
-  browserconsole?: Array<BrowserMessage>;
-};
-
 type Plugin = NetworkManager | Tracing | PerformanceManager | BrowserConsole;
+type PluginOptions = TraceOptions;
 
 export class PluginManager {
-  protected plugins = new Map<string, Plugin>();
-
+  protected plugins = new Map<PluginType, Plugin>();
+  public PLUGIN_TYPES: Array<PluginType> = [
+    'network',
+    'trace',
+    'performance',
+    'browserconsole',
+  ];
   constructor(private driver: Driver) {}
 
-  async start(type: PluginType) {
+  register(type: PluginType, options: PluginOptions) {
     let instance: Plugin;
     switch (type) {
       case 'network':
-        instance = new NetworkManager();
-        await instance.start(this.driver.client);
+        instance = new NetworkManager(this.driver);
         break;
       case 'trace':
-        instance = new Tracing();
-        await instance.start(this.driver.client);
+        instance = new Tracing(this.driver, options);
         break;
       case 'performance':
-        instance = new PerformanceManager(this.driver.client);
-        instance.start();
+        instance = new PerformanceManager(this.driver);
         break;
       case 'browserconsole':
-        instance = new BrowserConsole(this.driver.page);
-        instance.start();
+        instance = new BrowserConsole(this.driver);
         break;
     }
+    instance && this.plugins.set(type, instance);
+    return instance;
+  }
+
+  registerAll(options: PluginOptions) {
+    for (const type of this.PLUGIN_TYPES) {
+      this.register(type, options);
+    }
+  }
+
+  unregisterAll() {
+    for (const type of this.PLUGIN_TYPES) {
+      this.plugins.delete(type);
+    }
+  }
 
-    this.plugins.set(instance.constructor.name, instance);
+  async stop(type: PluginType) {
+    const instance = this.plugins.get(type);
+    if (instance) {
+      return await instance.stop();
+    }
+    return {};
+  }
+
+  async start(type: PluginType) {
+    const instance = this.plugins.get(type);
+    instance && (await instance.start());
     return instance;
   }
 
-  get<T extends Plugin>(Type: new (...args: any[]) => T): T {
-    return this.plugins.get(Type.name) as T;
+  get(type: PluginType) {
+    return this.plugins.get(type);
   }
 
   onStep(step: Step) {
-    this.get(BrowserConsole) && (this.get(BrowserConsole)._currentStep = step);
-    this.get(NetworkManager) && (this.get(NetworkManager)._currentStep = step);
+    (this.get('browserconsole') as BrowserConsole)._currentStep = step;
+    (this.get('network') as NetworkManager)._currentStep = step;
   }
 
-  async output(): Promise<PluginOutput> {
-    const data = {
-      filmstrips: [],
-      networkinfo: [],
-      browserconsole: null,
-    };
+  output() {
+    const data: PluginOutput = {};
     for (const [, plugin] of this.plugins) {
       if (plugin instanceof NetworkManager) {
         data.networkinfo = plugin.stop();
-      } else if (plugin instanceof Tracing) {
-        const result = await plugin.stop(this.driver.client);
-        data.filmstrips = filterFilmstrips(result);
       } else if (plugin instanceof BrowserConsole) {
         data.browserconsole = plugin.stop();
       }

package/src/plugins/tracing.ts

@@ -23,80 +23,60 @@
  *
  */
 
-import { CDPSession } from 'playwright-chromium';
-import { FilmStrip } from '../common_types';
-import { convertTraceTimestamp } from '../helpers';
+import { Driver, PluginOutput } from '../common_types';
+import { Filmstrips } from '../sdk/trace-metrics';
+import { TraceEvent, TraceProcessor } from '../sdk/trace-processor';
 
-/**
- * Trace Event Format
- * https://docs.google.com/document/d/1CvAClvFfyA5R-PhYUmn5OOQtYMH4h6I0nSsKchNAySU
- */
-type TraceEvent = {
-  name: string;
-  // event category
-  cat: string;
-  // process id
-  pid: number;
-  // thread id
-  tid: number;
-  // event phase
-  ph?: string;
-  args?: {
-    snapshot: string;
-  };
-  /**
-   * Platform specific monotonic non decreasing clock time
-   * https://source.chromium.org/chromium/chromium/src/+/master:base/time/time.h;l=936;bpv=0;bpt=0
-   */
-  ts: number;
+export type TraceOptions = {
+  filmstrips?: boolean;
+  trace?: boolean;
 };
 
-export function filterFilmstrips(
-  traceEvents: Array<TraceEvent>
-): Array<FilmStrip> {
-  const events = traceEvents.filter(event => {
-    const { args, cat, name } = event;
-    return (
-      name === 'Screenshot' &&
-      cat === 'disabled-by-default-devtools.screenshot' &&
-      args?.snapshot
-    );
-  });
-
-  return events.map(event => ({
-    snapshot: event.args.snapshot,
-    ts: event.ts,
-    startTime: convertTraceTimestamp(event.ts),
-  }));
-}
-
 /**
- * Custom Tracer that only traces the filmstrips
+ * Custom Tracer that listenes for events from specified categories
  * https://chromedevtools.github.io/devtools-protocol/tot/Tracing/
  */
 export class Tracing {
-  async start(client: CDPSession) {
+  constructor(private driver: Driver, private options: TraceOptions) {}
+
+  async start() {
     const includedCategories = [
       // exclude all default categories
       '-*',
-      // capture screenshots
-      'disabled-by-default-devtools.screenshot',
     ];
-    await client.send('Tracing.start', {
+    if (this.options.filmstrips) {
+      // capture screenshots - up to 450 max for each trace (https://goo.gl/rBfhn4)
+      includedCategories.push('disabled-by-default-devtools.screenshot');
+    }
+    if (this.options.trace) {
+      includedCategories.push(
+        // Used instead of 'toplevel' in Chrome 71+
+        'disabled-by-default-lighthouse',
+        // Cumulative Layout Shift metric
+        'loading',
+        // UserTiming marks/measures
+        'blink.user_timing',
+        // Most of the events we need are from these two categories
+        // Includes FCP, LCP, Main thread frames, process, etc.
+        'devtools.timeline',
+        'disabled-by-default-devtools.timeline'
+      );
+    }
+    await this.driver.client.send('Tracing.start', {
       /**
        * Using `ReportEvents` makes gathering trace events
        * much faster as opposed to using `ReturnAsStream` mode
        */
       transferMode: 'ReportEvents',
-      traceConfig: {
-        includedCategories,
-      },
+      categories: includedCategories.join(','),
+      options: 'sampling-frequency=10000', // 1000 is default
     });
   }
 
-  async stop(client: CDPSession) {
+  async stop() {
     const events = [];
     const collectListener = payload => events.push(...payload.value);
+    const { client } = this.driver;
     client.on('Tracing.dataCollected', collectListener);
 
     const [traceEvents] = await Promise.all([
@@ -108,6 +88,15 @@ export class Tracing {
       ),
       client.send('Tracing.end'),
     ]);
-    return traceEvents as Array<TraceEvent>;
+    const output: Partial<PluginOutput> = {};
+    if (this.options.filmstrips) {
+      output.filmstrips = Filmstrips.compute(traceEvents as Array<TraceEvent>);
+    }
+    if (this.options.trace) {
+      Object.assign(output, {
+        ...TraceProcessor.computeTrace(traceEvents as Array<TraceEvent>),
+      });
+    }
+    return output;
   }
 }

package/src/reporters/base.ts

@@ -64,28 +64,19 @@ export default class BaseReporter {
 
   constructor(public runner: Runner, options: ReporterOptions = {}) {
     this.fd = options.fd || process.stdout.fd;
-    this.stream = new SonicBoom({ fd: this.fd, sync: true });
-    this._registerListeners();
-    this.runner.on('end', () => this.close());
-  }
+    /**
+     * minLength is set to 1 byte to make sure we flush the
+     * content even if its the last byte on the stream buffer
+     * before destroying the pipe with underlying file descriptor
+     */
+    this.stream = new SonicBoom({ fd: this.fd, sync: true, minLength: 1 });
 
-  close() {
-    if (this.fd <= 2) {
-      /**
-       * For stdout/stderr we destroy stream once data is written and run
-       * it as the last listener giving enough room for
-       * other reporters to write to stream
-       */
-      setImmediate(() => this.stream.end());
-    } else {
-      /**
-       * If the user has passed a custom FD we don't close the FD, but we do flush it
-       * to give them more control. This is important because FDs should only be closed
-       * once, and the primary use case for custom FDs is being called by heartbeat, which
-       * closes the FD after the process exits
-       */
-      this.stream.flush();
-    }
+    // flushSync is used here to make sure all the data from the underlying
+    // SonicBoom stream buffer is completely written to the fd before closing
+    // the process
+    this.runner.on('end', () => this.stream.flushSync());
+
+    this._registerListeners();
   }
 
   _registerListeners() {
@@ -108,16 +99,31 @@ export default class BaseReporter {
       result[status]++;
     });
 
+    this.runner.on('journey:end', ({ error }) => {
+      const { failed, succeeded, skipped } = result;
+      const total = failed + succeeded + skipped;
+
+      /**
+       * Render the error on the terminal only when no steps could
+       * be executed which means the error happened in one of the hooks
+       */
+      if (total === 0 && error) {
+        this.write(renderError(error));
+      }
+    });
+
     this.runner.on('end', () => {
       const { failed, succeeded, skipped } = result;
       const total = failed + succeeded + skipped;
 
+      let message = '\n';
       if (total === 0) {
-        this.write('No tests found!');
+        message = 'No tests found!';
+        message += ` (${renderDuration(now())} ms) \n`;
+        this.write(message);
         return;
       }
 
-      let message = '\n';
       message += succeeded > 0 ? green(` ${succeeded} passed`) : '';
       message += failed > 0 ? red(` ${failed} failed`) : '';
       message += skipped > 0 ? cyan(` ${skipped} skipped`) : '';