@elastic/synthetics 1.24.3 → 1.25.0

package/src/formatter/codegen.ts

@@ -0,0 +1,299 @@
+/**
+ * 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.
+ *
+ */
+
+/**
+ * Adapted from playwright-core's `server/codegen/javascript.ts` and
+ * `server/codegen/language.ts` (Apache-2.0, (c) Microsoft Corporation).
+ *
+ * Playwright >= 1.61 bundles its server code into `coreBundle.js` and no
+ * longer ships the codegen classes as importable modules, so the previous
+ * `playwright-core/lib/server/codegen/javascript` deep import no longer
+ * resolves. We only need the slice of the generator that
+ * `SyntheticsGenerator` extends (`_asLocator` + `_generateActionCall`) plus
+ * `JavaScriptFormatter`; the heavy locator/serialization helpers are still
+ * reachable through the bundle's exported `iso` namespace, so we reuse those
+ * directly instead of vendoring them too.
+ */
+
+/* eslint-disable @typescript-eslint/no-var-requires */
+const { iso } = require('playwright-core/lib/coreBundle') as {
+  iso: {
+    asLocator(language: string, selector: string): string;
+    escapeWithQuotes(text: string, char?: string): string;
+    formatObject(value: any, indent?: string): string;
+  };
+};
+/* eslint-enable @typescript-eslint/no-var-requires */
+
+const { asLocator, escapeWithQuotes, formatObject } = iso;
+
+type SmartKeyboardModifier =
+  | 'Alt'
+  | 'Control'
+  | 'ControlOrMeta'
+  | 'Meta'
+  | 'Shift';
+
+type MouseClickOptions = {
+  button?: 'left' | 'middle' | 'right';
+  modifiers?: SmartKeyboardModifier[];
+  clickCount?: number;
+  position?: { x: number; y: number };
+};
+
+export type CodegenAction = {
+  name: string;
+  selector?: string;
+  url?: string;
+  key?: string;
+  text?: string;
+  value?: string;
+  files?: string[];
+  options?: string[];
+  modifiers?: number;
+  button?: 'left' | 'middle' | 'right';
+  clickCount?: number;
+  position?: { x: number; y: number };
+  substring?: boolean;
+  checked?: boolean;
+  ariaSnapshot?: string;
+};
+
+export type CodegenActionInContext = {
+  action: CodegenAction;
+  frame: { pageAlias: string; framePath: string[] };
+};
+
+function toKeyboardModifiers(modifiers = 0): SmartKeyboardModifier[] {
+  const result: SmartKeyboardModifier[] = [];
+  if (modifiers & 1) result.push('Alt');
+  if (modifiers & 2) result.push('ControlOrMeta');
+  if (modifiers & 4) result.push('ControlOrMeta');
+  if (modifiers & 8) result.push('Shift');
+  return result;
+}
+
+function toClickOptionsForSourceCode(action: CodegenAction): MouseClickOptions {
+  const modifiers = toKeyboardModifiers(action.modifiers);
+  const options: MouseClickOptions = {};
+  if (action.button && action.button !== 'left') options.button = action.button;
+  if (modifiers.length) options.modifiers = modifiers;
+  // Do not render clickCount === 2 for dblclick.
+  if (action.clickCount && action.clickCount > 2)
+    options.clickCount = action.clickCount;
+  if (action.position) options.position = action.position;
+  return options;
+}
+
+function formatOptions(value: any, hasArguments: boolean): string {
+  const keys = Object.keys(value).filter(key => value[key] !== undefined);
+  if (!keys.length) return '';
+  return (hasArguments ? ', ' : '') + formatObject(value);
+}
+
+function quote(text = ''): string {
+  return escapeWithQuotes(text, "'");
+}
+
+export function quoteMultiline(text: string, indent = '  ') {
+  const escape = (t: string) =>
+    t.replace(/\\/g, '\\\\').replace(/`/g, '\\`').replace(/\$\{/g, '\\${');
+  const lines = text.split('\n');
+  if (lines.length === 1) return '`' + escape(text) + '`';
+  return (
+    '`\n' +
+    lines
+      .map(line => indent + escape(line).replace(/\${/g, '\\${'))
+      .join('\n') +
+    `\n${indent}\``
+  );
+}
+
+export class JavaScriptLanguageGenerator {
+  protected _isTest: boolean;
+
+  constructor(isTest: boolean) {
+    this._isTest = isTest;
+  }
+
+  protected _asLocator(selector: string) {
+    return asLocator('javascript', selector);
+  }
+
+  protected _generateActionCall(
+    subject: string,
+    actionInContext: CodegenActionInContext
+  ): string {
+    const action = actionInContext.action;
+    switch (action.name) {
+      case 'openPage':
+        throw Error('Not reached');
+      case 'closePage':
+        return `await ${subject}.close();`;
+      case 'click': {
+        let method = 'click';
+        if (action.clickCount === 2) method = 'dblclick';
+        const options = toClickOptionsForSourceCode(action);
+        const optionsString = formatOptions(options, false);
+        return `await ${subject}.${this._asLocator(
+          action.selector
+        )}.${method}(${optionsString});`;
+      }
+      case 'hover':
+        return `await ${subject}.${this._asLocator(
+          action.selector
+        )}.hover(${formatOptions({ position: action.position }, false)});`;
+      case 'check':
+        return `await ${subject}.${this._asLocator(action.selector)}.check();`;
+      case 'uncheck':
+        return `await ${subject}.${this._asLocator(
+          action.selector
+        )}.uncheck();`;
+      case 'fill':
+        return `await ${subject}.${this._asLocator(
+          action.selector
+        )}.fill(${quote(action.text)});`;
+      case 'setInputFiles': {
+        const files = action.files ?? [];
+        return `await ${subject}.${this._asLocator(
+          action.selector
+        )}.setInputFiles(${formatObject(
+          files.length === 1 ? files[0] : files
+        )});`;
+      }
+      case 'press': {
+        const modifiers = toKeyboardModifiers(action.modifiers);
+        const shortcut = [...modifiers, action.key].join('+');
+        return `await ${subject}.${this._asLocator(
+          action.selector
+        )}.press(${quote(shortcut)});`;
+      }
+      case 'navigate':
+        return `await ${subject}.goto(${quote(action.url)});`;
+      case 'select': {
+        const opts = action.options ?? [];
+        return `await ${subject}.${this._asLocator(
+          action.selector
+        )}.selectOption(${formatObject(opts.length === 1 ? opts[0] : opts)});`;
+      }
+      case 'assertText':
+        return `${
+          this._isTest ? '' : '// '
+        }await expect(${subject}.${this._asLocator(action.selector)}).${
+          action.substring ? 'toContainText' : 'toHaveText'
+        }(${quote(action.text)});`;
+      case 'assertChecked':
+        return `${
+          this._isTest ? '' : '// '
+        }await expect(${subject}.${this._asLocator(action.selector)})${
+          action.checked ? '' : '.not'
+        }.toBeChecked();`;
+      case 'assertVisible':
+        return `${
+          this._isTest ? '' : '// '
+        }await expect(${subject}.${this._asLocator(
+          action.selector
+        )}).toBeVisible();`;
+      case 'assertValue': {
+        const assertion = action.value
+          ? `toHaveValue(${quote(action.value)})`
+          : `toBeEmpty()`;
+        return `${
+          this._isTest ? '' : '// '
+        }await expect(${subject}.${this._asLocator(
+          action.selector
+        )}).${assertion};`;
+      }
+      case 'assertSnapshot': {
+        const commentIfNeeded = this._isTest ? '' : '// ';
+        return `${commentIfNeeded}await expect(${subject}.${this._asLocator(
+          action.selector
+        )}).toMatchAriaSnapshot(${quoteMultiline(
+          action.ariaSnapshot ?? '',
+          `${commentIfNeeded}  `
+        )});`;
+      }
+      default:
+        return '';
+    }
+  }
+}
+
+export class JavaScriptFormatter {
+  private _baseIndent: string;
+  private _baseOffset: string;
+  private _lines: string[] = [];
+
+  constructor(offset = 0) {
+    this._baseIndent = ' '.repeat(2);
+    this._baseOffset = ' '.repeat(offset);
+  }
+
+  prepend(text: string) {
+    const trim = isMultilineString(text)
+      ? (line: string) => line
+      : (line: string) => line.trim();
+    this._lines = text.trim().split('\n').map(trim).concat(this._lines);
+  }
+
+  add(text: string) {
+    const trim = isMultilineString(text)
+      ? (line: string) => line
+      : (line: string) => line.trim();
+    this._lines.push(...text.trim().split('\n').map(trim));
+  }
+
+  newLine() {
+    this._lines.push('');
+  }
+
+  format(): string {
+    let spaces = '';
+    let previousLine = '';
+    return this._lines
+      .map((line: string) => {
+        if (line === '') return line;
+        if (line.startsWith('}') || line.startsWith(']'))
+          spaces = spaces.substring(this._baseIndent.length);
+
+        const extraSpaces = /^(for|while|if|try).*\(.*\)$/.test(previousLine)
+          ? this._baseIndent
+          : '';
+        previousLine = line;
+
+        const callCarryOver = line.startsWith('.set');
+        line =
+          spaces + extraSpaces + (callCarryOver ? this._baseIndent : '') + line;
+        if (line.endsWith('{') || line.endsWith('['))
+          spaces += this._baseIndent;
+        return this._baseOffset + line;
+      })
+      .join('\n');
+  }
+}
+
+function isMultilineString(text: string) {
+  return text.match(/`[\S\s]*`/)?.[0].includes('\n');
+}

package/src/formatter/javascript.ts

@@ -23,10 +23,7 @@
  *
  */
 
-import {
-  JavaScriptLanguageGenerator,
-  JavaScriptFormatter,
-} from 'playwright-core/lib/server/codegen/javascript';
+import { JavaScriptLanguageGenerator, JavaScriptFormatter } from './codegen';
 
 export type Step = {
   actions: ActionInContext[];

package/src/index.ts

@@ -35,6 +35,7 @@ export async function run(options: RunOptions) {
  */
 export {
   journey,
+  apiJourney,
   step,
   monitor,
   beforeAll,
@@ -82,6 +83,11 @@ export type {
   JourneyWithAnnotations,
   JourneyOptions,
   StepWithAnnotations,
+  APIJourney,
+  APIJourneyCallback,
+  APIJourneyCallbackOpts,
+  APIJourneyOptions,
+  APIJourneyWithAnnotations,
 } from './dsl';
 
 export type {

package/src/loader.ts

@@ -24,7 +24,10 @@
  */
 
 import { stdin, cwd } from 'process';
-import { extname, resolve } from 'path';
+import { extname, resolve, join } from 'path';
+import { tmpdir } from 'os';
+import { mkdtempSync, writeFileSync, rmSync } from 'fs';
+import Module from 'module';
 import { CliArgs } from './common_types';
 import { step, journey } from './core';
 import { log } from './core/logger';
@@ -83,7 +86,21 @@ export async function loadTestFiles(options: CliArgs, args: string[]) {
   requireSuites(suites);
 }
 
-const loadInlineScript = source => {
+/**
+ * A leading `import`/`export` opts the inline source into module loading;
+ * anything else is treated as legacy statements with injected locals.
+ * Keying off `import`/`export` (not a `journey(` regex) avoids false
+ * matches inside strings/comments that would strip the implicit injection.
+ */
+const isModuleInlineSource = (source: string): boolean => {
+  return /^\s*(?:import|export)\b/m.test(source);
+};
+
+const loadInlineScript = (source: string) => {
+  if (isModuleInlineSource(source)) {
+    loadInlineModule(source);
+    return;
+  }
   const scriptFn = new Function(
     'step',
     'page',
@@ -109,6 +126,65 @@ const loadInlineScript = source => {
   });
 };
 
+const SYNTHETICS_PKG_ROOT = resolve(__dirname, '..');
+let syntheticsAliasInstalled = false;
+
+/**
+ * Alias `@elastic/synthetics` (and subpaths) to this package so an inline
+ * module materialised in a temp dir — whose ancestors may lack a
+ * `node_modules` entry — resolves to the currently running code.
+ */
+const installSyntheticsRequireAlias = () => {
+  if (syntheticsAliasInstalled) return;
+  syntheticsAliasInstalled = true;
+  const PKG = '@elastic/synthetics';
+  const ModuleInternal = Module as unknown as {
+    _resolveFilename: (
+      request: string,
+      parent: NodeModule,
+      isMain?: boolean,
+      options?: Record<string, unknown>
+    ) => string;
+  };
+  const originalResolve = ModuleInternal._resolveFilename;
+  ModuleInternal._resolveFilename = function (
+    request,
+    parent,
+    isMain,
+    options
+  ) {
+    if (request === PKG || request.startsWith(`${PKG}/`)) {
+      const subpath = request === PKG ? '' : request.slice(PKG.length + 1);
+      const aliased = subpath
+        ? join(SYNTHETICS_PKG_ROOT, subpath)
+        : SYNTHETICS_PKG_ROOT;
+      return originalResolve.call(this, aliased, parent, isMain, options);
+    }
+    return originalResolve.call(this, request, parent, isMain, options);
+  };
+};
+
+/**
+ * Materialise a self-contained inline module to disk and `require` it. The
+ * esbuild transform hook rewrites ESM → CJS, so the script registers its
+ * journeys on import instead of being wrapped in an implicit journey.
+ */
+const loadInlineModule = (source: string) => {
+  installSyntheticsRequireAlias();
+  const dir = mkdtempSync(join(tmpdir(), 'synthetics-inline-'));
+  // Best-effort cleanup so long-lived hosts don't accumulate temp dirs.
+  process.once('exit', () => {
+    try {
+      rmSync(dir, { recursive: true, force: true });
+    } catch {
+      /* best-effort */
+    }
+  });
+  const file = join(dir, 'inline.journey.ts');
+  writeFileSync(file, source);
+  require(file);
+};
+
 /**
  * Read the input from STDIN and run it as inline journey
  */

package/src/network-timings.ts

@@ -0,0 +1,130 @@
+/**
+ * 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 { Request } from 'playwright-core';
+import { NetworkInfo } from './common_types';
+
+/**
+ * Resource Timing shape shared by `Request.timing()` and (>= 1.62)
+ * `APIResponse.timing()`. Values are milliseconds relative to `startTime`,
+ * `-1` when a phase did not happen or is unknown (e.g. reused keep-alive
+ * socket, HAR replay).
+ */
+export type ResourceTiming = ReturnType<Request['timing']>;
+
+export const roundMilliSecs = (value: number): number => {
+  return Math.floor(value * 1000) / 1000;
+};
+
+/**
+ * First positive number in the list, used to derive the `blocked` phase from
+ * whichever Resource Timing marker fired first.
+ */
+export const firstPositive = (numbers: number[]): number | null => {
+  for (let i = 0; i < numbers.length; ++i) {
+    if (numbers[i] > 0) {
+      return numbers[i];
+    }
+  }
+  return null;
+};
+
+/**
+ * Maps a Playwright Resource Timing object into the per-phase `NetworkInfo`
+ * timings. `total` is left at `-1` for the caller to fill via `calcTotalTime`
+ * once `loadEndTime`/`requestSentTime` are known. `receive` resolves to `-1`
+ * until `responseEnd` is available (browser journeys learn it on
+ * `requestfinished`); API journeys have the full timing up front.
+ */
+export function getResourceTimings(
+  rtiming: ResourceTiming
+): NetworkInfo['timings'] {
+  const blocked =
+    roundMilliSecs(
+      firstPositive([
+        rtiming.domainLookupStart,
+        rtiming.connectStart,
+        rtiming.requestStart,
+      ])
+    ) || -1;
+  const dns =
+    rtiming.domainLookupEnd !== -1
+      ? roundMilliSecs(rtiming.domainLookupEnd - rtiming.domainLookupStart)
+      : -1;
+  const connect =
+    rtiming.connectEnd !== -1
+      ? roundMilliSecs(rtiming.connectEnd - rtiming.connectStart)
+      : -1;
+  const ssl =
+    rtiming.secureConnectionStart !== -1
+      ? roundMilliSecs(rtiming.connectEnd - rtiming.secureConnectionStart)
+      : -1;
+  const wait =
+    rtiming.responseStart !== -1
+      ? roundMilliSecs(rtiming.responseStart - rtiming.requestStart)
+      : -1;
+  const receive =
+    rtiming.responseEnd !== -1
+      ? roundMilliSecs(rtiming.responseEnd - rtiming.responseStart)
+      : -1;
+
+  return {
+    blocked,
+    dns,
+    ssl,
+    connect,
+    send: 0, // not exposed via the Resource Timing API
+    wait,
+    receive,
+    total: -1,
+  };
+}
+
+/**
+ * Returns the `total` phase by summing the positive phases. Falls back to the
+ * wall-clock span between `requestSentTime` and `loadEndTime` when Resource
+ * Timing data is unavailable (`startTime <= 0`, e.g. HAR replay or aborted
+ * requests). Pure — the caller assigns the result onto `timings.total`.
+ */
+export function calcTotalTime(
+  entry: NetworkInfo,
+  rtiming: ResourceTiming
+): number {
+  if (rtiming.startTime <= 0) {
+    const end =
+      entry.loadEndTime || entry.responseReceivedTime || entry.requestSentTime;
+    const total = roundMilliSecs((end - entry.requestSentTime) * 1000);
+    return total <= 0 ? -1 : total;
+  }
+
+  const { timings } = entry;
+  return [
+    timings.blocked,
+    timings.dns,
+    timings.connect,
+    timings.wait,
+    timings.receive,
+  ].reduce((pre, cur) => ((cur || -1) > 0 ? cur + pre : pre), 0);
+}