@mui/internal-benchmark 0.0.3-canary.7 → 0.0.3-canary.8

package/CHANGELOG.md

@@ -3,7 +3,6 @@
 ## 2.0.8
 
 Test release
-dummy PR
 
 ## 2.0.7
 

package/README.md

@@ -208,6 +208,38 @@ benchmark('name', renderFn, interaction, {
 vitest run
 ```
 
+### Profiling in DevTools
+
+To profile a benchmark case by hand with the browser DevTools instead of running the automated measurement loop, enable profile mode. It opens a **headed** Chromium window with DevTools already open, and replaces the measurement loop with an interactive control panel:
+
+```bash
+BENCHMARK_PROFILE=true vitest run -t "MyComponent mount"
+```
+
+Each `benchmark()` case renders a toolbar pinned to the top of the page with **Render**, **Finish**, and (when the case has an interaction) **Run interaction** buttons. The **Render** button toggles between mounting and unmounting (it reads **Unmount** while the component is mounted). The component under test stays unmounted until you click **Render**, so the flow is:
+
+1. Switch to the DevTools **Performance** tab and start recording.
+2. Click **Render** — this mounts the component (the thing you're profiling).
+3. Stop the recording and inspect. Toggle **Unmount** / **Render** to capture more frames, or **Run interaction** to profile a re-render.
+4. Click **Finish** to end the case and move to the next one.
+
+Filter to a single case with Vitest's `-t "<name>"` (or by file) so the window isn't shared across many cases. Profiling shares the same minimal launch args as measurement (V8 optimization and the GPU stay on for both), so the profiler reflects realistic performance; it differs only by running headed — DevTools open, in a full desktop viewport (below) — so its absolute numbers aren't directly comparable to a measurement run.
+
+Both modes render at a 1920x1080 viewport by default (instead of Vitest's phone-sized 414x896). Set `viewport` (or the `BENCHMARK_VIEWPORT` env var) to change it; in profile mode the headed browser window is also sized to match so the full render is visible:
+
+```bash
+BENCHMARK_PROFILE=true BENCHMARK_VIEWPORT=2560x1440 vitest run -t "MyComponent mount"
+```
+
+Profile mode is also settable via the `profile` config option:
+
+```ts
+export default createBenchmarkVitestConfig({
+  profile: true,
+  viewport: { width: 2560, height: 1440 },
+});
+```
+
 ### Configuration
 
 `createBenchmarkVitestConfig` accepts:
@@ -215,6 +247,8 @@ vitest run
 - `outputPath` — path for JSON results (default: `benchmarks/results.json`). Also settable via `BENCHMARK_OUTPUT_PATH`.
 - `baselinePath` — path to a prior results JSON file to inline as the comparison base (see [Baseline comparisons](#baseline-comparisons)). Also settable via `BENCHMARK_BASELINE_PATH`.
 - `launchArgs` — additional browser launch arguments
+- `profile` — run an interactive profiling session in a headed browser with DevTools instead of measuring (see [Profiling in DevTools](#profiling-in-devtools)). Also settable via `BENCHMARK_PROFILE=true`.
+- `viewport` — `{ width, height }` browser viewport (and window size in profile mode), applied to both modes. Defaults to `1920x1080`. Also settable via `BENCHMARK_VIEWPORT` (e.g. `2560x1440`).
 
 To override standard Vitest options (e.g. `include`, `testTimeout`, `headless`), use `mergeConfig`:
 

package/index.mjs

@@ -14,6 +14,7 @@ import { ElementTiming } from "./ElementTiming.mjs";
 import { ScalarMetric } from "./ScalarMetric.mjs";
 import { metricsGate } from "./metricsGate.mjs";
 import { createReactRecordingControls } from "./reactRecording.mjs";
+import { runProfileSession } from "./profileSession.mjs";
 // Import for TaskMeta augmentation side effect
 import "./taskMetaAugmentation.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -39,12 +40,10 @@ function BenchProfiler({
       recording.markRendered();
     }
   }, [captures, recording]);
-  return /*#__PURE__*/_jsxs(React.Profiler, {
+  return /*#__PURE__*/_jsx(React.Profiler, {
     id: "bench",
     onRender: onRender,
-    children: [children, _ElementTiming || (_ElementTiming = /*#__PURE__*/_jsx(ElementTiming, {
-      name: "default"
-    }))]
+    children: children
   });
 }
 
@@ -66,9 +65,137 @@ function settle() {
 function supportsElementTiming() {
   return PerformanceObserver.supportedEntryTypes.includes('element');
 }
+// Sets up a PerformanceObserver for the Element Timing API and exposes a promise-based
+// `waitForElementTiming` helper. Used by the measurement loop (which also reads `elementEntries`
+// to record paint metrics) and the interactive profiling session.
+function createElementTimingWaiter() {
+  const hasElementTiming = supportsElementTiming();
+  const elementEntries = [];
+  const elementResolvers = new Map();
+  let observer = null;
+  if (hasElementTiming) {
+    observer = new PerformanceObserver(list => {
+      for (const entry of list.getEntries()) {
+        elementEntries.push(entry);
+        const resolver = elementResolvers.get(entry.identifier);
+        if (resolver) {
+          elementResolvers.delete(entry.identifier);
+          resolver();
+        }
+      }
+    });
+    observer.observe({
+      type: 'element',
+      buffered: false
+    });
+  }
+  const waitForElementTiming = (identifier, timeout) => {
+    if (!hasElementTiming) {
+      console.warn(`waitForElementTiming("${identifier}"): Element Timing API is not supported. ` + 'Paint metrics will not be collected.');
+      return Promise.resolve();
+    }
+    if (elementEntries.some(entry => entry.identifier === identifier)) {
+      return Promise.resolve();
+    }
+    const {
+      promise,
+      resolve,
+      reject
+    } = Promise.withResolvers();
+    const timeoutMs = timeout ?? 5000;
+    const timer = timeoutMs > 0 && timeoutMs < Infinity ? setTimeout(() => {
+      elementResolvers.delete(identifier);
+      reject(new Error(`waitForElementTiming("${identifier}"): timed out after ${timeoutMs}ms. ` + 'Ensure the element has an `elementtiming` attribute and is visible in the viewport.'));
+    }, timeoutMs) : undefined;
+    elementResolvers.set(identifier, () => {
+      if (timer) {
+        clearTimeout(timer);
+      }
+      resolve();
+    });
+    return promise;
+  };
+  return {
+    elementEntries,
+    waitForElementTiming,
+    disconnect: () => observer?.disconnect()
+  };
+}
+
+// When true, `benchmark()` opens an interactive profiling session in a headed
+// browser instead of running the automated measurement loop. Enabled by
+// `createBenchmarkVitestConfig({ profile: true })` or `BENCHMARK_PROFILE=true`,
+// both of which replace this expression at build time via Vite `define`.
+const PROFILE_MODE = process.env.BENCHMARK_PROFILE === 'true';
+function createCaseRuntime({
+  renderFn,
+  interaction,
+  context,
+  onUncaughtError
+}) {
+  let root = null;
+  let container = null;
+  return {
+    mount() {
+      if (root) {
+        return;
+      }
+      container = document.createElement('div');
+      document.body.appendChild(container);
+      const newRoot = ReactDOMClient.createRoot(container, {
+        onUncaughtError
+      });
+      root = newRoot;
+      ReactDOM.flushSync(() => {
+        newRoot.render(/*#__PURE__*/_jsxs(React.Fragment, {
+          children: [renderFn(), _ElementTiming || (_ElementTiming = /*#__PURE__*/_jsx(ElementTiming, {
+            name: "default"
+          }))]
+        }));
+      });
+    },
+    interact: interaction ? async () => {
+      await interaction(context);
+    } : undefined,
+    unmount() {
+      if (!root) {
+        return;
+      }
+      root.unmount();
+      container?.remove();
+      root = null;
+      container = null;
+    },
+    isMounted: () => root !== null
+  };
+}
 export function benchmark(name, renderFn, interactionOrOptions, maybeOptions) {
   const interaction = typeof interactionOrOptions === 'function' ? interactionOrOptions : undefined;
   const options = typeof interactionOrOptions === 'object' ? interactionOrOptions : maybeOptions;
+
+  // In profile mode, skip the automated measurement loop entirely: build a bare case runtime (no
+  // BenchProfiler wrapper, no-op recording since the user drives DevTools by hand) and hand it to
+  // the interactive panel.
+  if (PROFILE_MODE) {
+    it(name, async () => {
+      const timing = createElementTimingWaiter();
+      // No `wrap`: profile mode renders the component bare (no BenchProfiler / React Profiler
+      // overhead in the hand-captured trace). The runtime still plants the `default` sentinel, so
+      // the first paint shows up as a labeled marker in the DevTools Performance timeline.
+      const runtime = createCaseRuntime({
+        renderFn,
+        interaction,
+        context: {
+          waitForElementTiming: timing.waitForElementTiming,
+          pauseReactRecording: () => {},
+          resumeReactRecording: () => {}
+        }
+      });
+      await runProfileSession(name, runtime);
+      timing.disconnect();
+    });
+    return;
+  }
   it(name, async ({
     task
   }) => {
@@ -92,7 +219,6 @@ export function benchmark(name, renderFn, interactionOrOptions, maybeOptions) {
         error: 0.2
       }
     });
-    const hasElementTiming = supportsElementTiming();
     if (typeof window.gc !== 'function') {
       console.warn('window.gc is not available. Run with --js-flags=--expose-gc for consistent GC between iterations.');
     }
@@ -115,98 +241,50 @@ export function benchmark(name, renderFn, interactionOrOptions, maybeOptions) {
       await settle();
       forceGC();
       const captures = [];
-      const elementEntries = [];
-      const elementResolvers = new Map();
-
-      // Set up Element Timing observer
-      let elementObserver = null;
-      if (hasElementTiming) {
-        elementObserver = new PerformanceObserver(list => {
-          for (const entry of list.getEntries()) {
-            elementEntries.push(entry);
-            const resolver = elementResolvers.get(entry.identifier);
-            if (resolver) {
-              elementResolvers.delete(entry.identifier);
-              resolver();
-            }
-          }
-        });
-        elementObserver.observe({
-          type: 'element',
-          buffered: false
-        });
-      }
-      const waitForElementTiming = (identifier, timeout) => {
-        if (!hasElementTiming) {
-          console.warn(`waitForElementTiming("${identifier}"): Element Timing API is not supported. ` + 'Paint metrics will not be collected.');
-          return Promise.resolve();
-        }
-        if (elementEntries.some(entry => entry.identifier === identifier)) {
-          return Promise.resolve();
-        }
-        const {
-          promise,
-          resolve,
-          reject
-        } = Promise.withResolvers();
-        const timeoutMs = timeout ?? 5000;
-        const timer = timeoutMs > 0 && timeoutMs < Infinity ? setTimeout(() => {
-          elementResolvers.delete(identifier);
-          reject(new Error(`waitForElementTiming("${identifier}"): timed out after ${timeoutMs}ms. ` + 'Ensure the element has an `elementtiming` attribute and is visible in the viewport.'));
-        }, timeoutMs) : undefined;
-        elementResolvers.set(identifier, () => {
-          if (timer) {
-            clearTimeout(timer);
-          }
-          resolve();
-        });
-        return promise;
-      };
-      const iterationStart = performance.now();
-      const container = document.createElement('div');
-      document.body.appendChild(container);
-      const root = ReactDOMClient.createRoot(container, {
+      const timing = createElementTimingWaiter();
+      const runtime = createCaseRuntime({
+        // Wrap the case in BenchProfiler so its renders are captured; the runtime mounts whatever
+        // renderFn returns (profiling passes the case bare).
+        renderFn: () => /*#__PURE__*/_jsx(BenchProfiler, {
+          captures: captures,
+          recording: recording,
+          children: renderFn()
+        }),
+        interaction,
+        context: {
+          waitForElementTiming: timing.waitForElementTiming,
+          pauseReactRecording: recording.pauseReactRecording,
+          resumeReactRecording: recording.resumeReactRecording
+        },
         // eslint-disable-next-line @typescript-eslint/no-loop-func
         onUncaughtError: error => {
           renderError = error;
         }
       });
-      ReactDOM.flushSync(() => {
-        root.render(/*#__PURE__*/_jsx(BenchProfiler, {
-          captures: captures,
-          recording: recording,
-          children: renderFn()
-        }));
-      });
+      const iterationStart = performance.now();
+      runtime.mount();
       if (renderError) {
-        elementObserver?.disconnect();
-        root.unmount();
-        container.remove();
+        timing.disconnect();
+        runtime.unmount();
         break;
       }
-      if (interaction) {
-        // eslint-disable-next-line no-await-in-loop
-        await interaction({
-          waitForElementTiming,
-          pauseReactRecording: recording.pauseReactRecording,
-          resumeReactRecording: recording.resumeReactRecording
-        });
-      }
+
+      // eslint-disable-next-line no-await-in-loop
+      await runtime.interact?.();
 
       // Wait for the bench sentinel paint entry (relies on test timeout)
       // eslint-disable-next-line no-await-in-loop
-      await waitForElementTiming('default', 0);
+      await timing.waitForElementTiming('default', 0);
 
       // Close the final window and remember if any active window measured no renders.
       recording.finalizeWindow();
       if (recording.hadEmptyActiveWindow) {
         sawEmptyActiveWindow = true;
       }
-      elementObserver?.disconnect();
-      root.unmount();
-      container.remove();
+      timing.disconnect();
+      runtime.unmount();
       if (!isWarmup) {
-        for (const entry of elementEntries) {
+        for (const entry of timing.elementEntries) {
           // Skip paints that happened while recording was paused. Attribute by the paint's
           // `renderTime`, not by when the observer callback fired (which can lag the paint).
           if (!recording.activeAt(entry.renderTime)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/internal-benchmark",
-  "version": "0.0.3-canary.7",
+  "version": "0.0.3-canary.8",
   "author": "MUI Team",
   "description": "Benchmark utilities for MUI projects. Internal package.",
   "repository": {
@@ -68,5 +68,5 @@
       }
     }
   },
-  "gitSha": "0763444eee05140fa86809f0a4330c1550c9c3c6"
+  "gitSha": "f0490c402ec0640d9b3687fd1e1e827bfa9c1610"
 }

package/profileSession.d.mts

@@ -0,0 +1,2 @@
+import type { BenchmarkCaseRuntime } from "./types.mjs";
+export declare function runProfileSession(name: string, runtime: BenchmarkCaseRuntime): Promise<void>;

package/profileSession.mjs

@@ -0,0 +1,95 @@
+const PROFILE_PANEL_STYLE = ['position:fixed', 'top:0', 'left:0', 'right:0', 'z-index:2147483647', 'display:flex', 'gap:8px', 'align-items:center', 'box-sizing:border-box', 'padding:8px 12px', 'background:#1e1e1e', 'color:#fff', 'font:13px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace', 'box-shadow:0 1px 6px rgba(0,0,0,0.5)'].join(';');
+const PROFILE_BUTTON_STYLE = ['padding:4px 10px', 'border:1px solid #555', 'border-radius:4px', 'background:#333', 'color:#fff', 'cursor:pointer', 'font:inherit'].join(';');
+function createProfileButton(label) {
+  const button = document.createElement('button');
+  button.type = 'button';
+  button.textContent = label;
+  button.style.cssText = PROFILE_BUTTON_STYLE;
+  return button;
+}
+
+// Interactive profiling session: instead of measuring, render a control panel with
+// Render / Unmount / Run interaction / Finish buttons that drive the given case runtime. The
+// component under test stays unmounted until the user clicks "Render", giving them time to start
+// the DevTools profiler first. The returned promise resolves on "Finish", which is what keeps the
+// Vitest test (and the headed browser window) alive in between; the caller cleans up afterwards.
+export function runProfileSession(name, runtime) {
+  const panel = document.createElement('div');
+  panel.setAttribute('data-benchmark-profile-panel', '');
+  panel.style.cssText = PROFILE_PANEL_STYLE;
+  const title = document.createElement('span');
+  title.textContent = `⏱ ${name}`;
+  title.style.cssText = 'font-weight:600;white-space:nowrap';
+  const status = document.createElement('span');
+  status.style.cssText = 'margin-left:auto;opacity:0.85;white-space:nowrap';
+  const renderButton = createProfileButton('▶ Render');
+  const interactButton = runtime.interact ? createProfileButton('⚡ Run interaction') : null;
+  const finishButton = createProfileButton('✓ Finish');
+  if (interactButton) {
+    interactButton.disabled = true;
+  }
+  panel.appendChild(title);
+  panel.appendChild(renderButton);
+  if (interactButton) {
+    panel.appendChild(interactButton);
+  }
+  panel.appendChild(finishButton);
+  panel.appendChild(status);
+  document.body.appendChild(panel);
+
+  // Push page content below the fixed panel so it doesn't cover the component.
+  const spacer = document.createElement('div');
+  spacer.style.height = `${panel.offsetHeight}px`;
+  document.body.insertBefore(spacer, panel);
+  const setStatus = text => {
+    status.textContent = text;
+  };
+  const show = () => {
+    if (runtime.isMounted()) {
+      return;
+    }
+    runtime.mount();
+    renderButton.textContent = '■ Unmount';
+    if (interactButton) {
+      interactButton.disabled = false;
+    }
+    setStatus('rendered — capture your profile, then Unmount or Finish');
+  };
+  const hide = () => {
+    if (!runtime.isMounted()) {
+      return;
+    }
+    runtime.unmount();
+    renderButton.textContent = '▶ Render';
+    if (interactButton) {
+      interactButton.disabled = true;
+    }
+    setStatus('unmounted — Render again or Finish');
+  };
+  setStatus('idle — start the DevTools profiler, then click Render');
+  return new Promise(resolve => {
+    renderButton.addEventListener('click', () => runtime.isMounted() ? hide() : show());
+    if (interactButton) {
+      interactButton.addEventListener('click', async () => {
+        interactButton.disabled = true;
+        setStatus('running interaction…');
+        try {
+          await runtime.interact?.();
+          setStatus('interaction done');
+        } catch (error) {
+          setStatus(`interaction error: ${String(error)}`);
+        } finally {
+          if (runtime.isMounted()) {
+            interactButton.disabled = false;
+          }
+        }
+      });
+    }
+    finishButton.addEventListener('click', () => {
+      hide();
+      spacer.remove();
+      panel.remove();
+      resolve();
+    });
+  });
+}

package/types.d.mts

@@ -34,6 +34,16 @@ export interface InteractionContext {
    */
   resumeReactRecording: () => void;
 }
+export interface BenchmarkCaseRuntime {
+  mount: () => void;
+  /**
+   * Runs the case's interaction with the harness context. Absent when the case has no interaction —
+   * the profiling panel uses its presence to decide whether to show the "Run interaction" button.
+   */
+  interact?: () => Promise<void>;
+  unmount: () => void;
+  isMounted: () => boolean;
+}
 /**
  * Whether a custom metric measures a continuous value or a discrete count.
  * - `scalar` — continuous measurements (timings, sizes); compared with a relative noise band.

package/vitest.d.mts

@@ -15,5 +15,22 @@ export interface CreateBenchmarkVitestConfigOptions {
    * Additional Chromium launch arguments.
    */
   launchArgs?: string[];
+  /**
+   * Run each `benchmark()` case as an interactive profiling session in a headed
+   * browser instead of the automated measurement loop. Each case renders a
+   * control panel with Render / Unmount / Finish buttons so you can start the
+   * DevTools profiler before the component mounts. Profiling auto-opens DevTools
+   * and runs headed (pass `viewport` to size the window). Also settable via
+   * `BENCHMARK_PROFILE=true`.
+   */
+  profile?: boolean;
+  /**
+   * Browser viewport — and, in profile mode, the matching window size. Defaults to 1920x1080 for
+   * both measurement and profiling. Also settable via `BENCHMARK_VIEWPORT` (e.g. `2560x1440`).
+   */
+  viewport?: {
+    width: number;
+    height: number;
+  };
 }
 export declare function createBenchmarkVitestConfig(options?: CreateBenchmarkVitestConfigOptions): ViteUserConfig;

package/vitest.mjs

@@ -1,15 +1,56 @@
 import react from '@vitejs/plugin-react';
 import { playwright } from '@vitest/browser-playwright';
+// Default viewport for all benchmark runs (measurement and profiling alike) — a desktop size is
+// more representative for component benchmarks than Vitest's phone-sized 414x896 browser default.
+const DEFAULT_VIEWPORT = {
+  width: 1920,
+  height: 1080
+};
+
+// Explicit viewport from the `viewport` option or the `BENCHMARK_VIEWPORT` env var
+// (`<width>x<height>`); undefined when neither is set, so the caller can apply the default.
+function resolveViewport(option) {
+  if (option) {
+    return option;
+  }
+  const env = process.env.BENCHMARK_VIEWPORT;
+  const match = env ? env.split('x') : null;
+  if (match && match.length === 2) {
+    return {
+      width: Number(match[0]),
+      height: Number(match[1])
+    };
+  }
+  return undefined;
+}
+
+// Chromium/V8 launch args shared by measurement and profiling, kept intentionally minimal.
+// `--expose-gc` is required: the harness forces GC between iterations for clean, comparable
+// timings. The backgrounding flags stop Chrome from throttling the (headless or occluded)
+// benchmark tab, which would otherwise add large variance. Heavier "determinism" flags
+// (`--no-opt`, `--predictable`, `--hash-seed`/`--random-seed`, `--disable-gpu`,
+// `--enable-benchmarking`) were measured to slow renders ~40% and distort paint timing without
+// reducing variance, so they are omitted — add them per project via `launchArgs` if a specific
+// workload needs them.
+const LAUNCH_ARGS = ['--js-flags=--expose-gc', '--disable-background-timer-throttling', '--disable-backgrounding-occluded-windows', '--disable-renderer-backgrounding'];
 export function createBenchmarkVitestConfig(options) {
   const {
     outputPath,
     baselinePath,
     launchArgs = []
   } = options ?? {};
+  const profile = options?.profile ?? process.env.BENCHMARK_PROFILE === 'true';
+  const viewport = resolveViewport(options?.viewport) ?? DEFAULT_VIEWPORT;
+
+  // Profiling adds DevTools on top of the shared args, plus a window sized to match the viewport —
+  // Vitest's `viewport` only sizes the iframe, so otherwise it's cropped/scrolled in the headed
+  // window instead of filling it. (Measurement is headless, so it has no window to size.)
+  const profileArgs = [...LAUNCH_ARGS, '--auto-open-devtools-for-tabs', `--window-size=${viewport.width},${viewport.height}`];
   return {
     plugins: [react()],
     define: {
-      'process.env.NODE_ENV': '"production"'
+      'process.env.NODE_ENV': '"production"',
+      'process.env.BENCHMARK_PROFILE': JSON.stringify(profile ? 'true' : '')
     },
     resolve: {
       dedupe: ['react', 'react-dom'],
@@ -21,29 +62,28 @@ export function createBenchmarkVitestConfig(options) {
     test: {
       browser: {
         enabled: true,
-        headless: true,
+        headless: !profile,
+        // Profiling renders into a clean page: hide Vitest's browser runner UI
+        // so the orchestrator chrome doesn't clutter what you're profiling.
+        ui: profile ? false : undefined,
+        // Same viewport for both modes (DEFAULT_VIEWPORT unless overridden).
+        viewport,
         screenshotFailures: false,
         instances: [{
           browser: 'chromium',
-          testTimeout: 120_000
+          // Profiling sessions are driven by hand, so give them effectively
+          // unlimited time instead of the measurement timeout.
+          testTimeout: profile ? 0 : 120_000
         }],
         provider: playwright({
           launchOptions: {
-            args: [
-            // V8 flags for deterministic JS execution
-            '--js-flags=--expose-gc,--predictable,--no-opt,--predictable-gc-schedule,--no-concurrent-sweeping,--hash-seed=1,--random-seed=1,--max-old-space-size=4096',
-            // Chromium flags to reduce renderer/compositor noise
-            '--disable-background-timer-throttling', '--disable-backgrounding-occluded-windows', '--disable-renderer-backgrounding', '--disable-background-networking',
-            // Reduces environmental noise by disabling field trials,
-            // for more consistent profiling results.
-            '--enable-benchmarking',
-            // Forces software rendering instead of GPU, which is more deterministic.
-            '--disable-gpu', ...launchArgs]
+            args: [...(profile ? profileArgs : LAUNCH_ARGS), ...launchArgs]
           }
         })
       },
       fileParallelism: false,
-      reporters: ['default', ['@mui/internal-benchmark/reporter', {
+      // Profiling sessions don't measure anything, so skip the results reporter.
+      reporters: profile ? ['default'] : ['default', ['@mui/internal-benchmark/reporter', {
         outputPath,
         baselinePath
       }]],