Beginning implementation of commandContextString

packages/trace-viewer/src/ui/actionList.tsx

@@ -26,6 +26,7 @@ import { TreeView } from '@web/components/treeView';
 import type { ActionTraceEventInContext, ActionTreeItem } from './modelUtil';
 import type { Boundaries } from './geometry';
 import { ToolbarButton } from '@web/components/toolbarButton';
+import { commandContextString } from './string';
 
 export interface ActionListProps {
   actions: ActionTraceEventInContext[],
@@ -116,7 +117,7 @@ export const renderAction = (
   }) => {
   const { sdkLanguage, revealConsole, revealAttachment, isLive, showDuration, showBadges } = options;
   const { errors, warnings } = modelUtil.stats(action);
-  const locator = action.params.selector ? asLocator(sdkLanguage || 'javascript', action.params.selector) : undefined;
+  const locator = commandContextString(action, sdkLanguage || 'javascript');
   const showAttachments = !!action.attachments?.length && !!revealAttachment;
 
   let time: string = '';

packages/trace-viewer/src/ui/string.ts

@@ -0,0 +1,48 @@
+import type { ActionTraceEvent } from '@trace/trace';
+import { asLocator, type Language } from '@isomorphic/locatorGenerators';
+
+export const commandContextString = (action: ActionTraceEvent, sdkLanguage: Language): string | undefined => {
+  const params = action.params;
+
+  if (action.apiName.startsWith('clock')) {
+    if ('ticksNumber' in params) {
+      // clock.fastForward/runFor
+      return `${params.ticksNumber}ms`;
+    } else if (params.ticksString) {
+      // clock.fastForward/runFor
+      return params.ticksString;
+    } else if ('timeNumber' in params) {
+      // clock.pauseAt/setFixedTime/setSystemTime
+      try {
+        return new Date(params.timeNumber).toLocaleString();
+      } catch (e) {
+        return undefined;
+      }  
+    }
+  } else if (action.apiName.startsWith('keyboard')) {
+    if (params.key) {
+      // keyboard.press/down/up
+      return params.key;
+    } else if (params.text) {
+      // keyboard.type/insertText
+      return `"${params.text}"`;
+    }
+  } else if (action.apiName.startsWith('locator')) {
+    return asLocator(sdkLanguage, params.selector);
+  } else if (action.apiName.startsWith('mouse')) {
+    if ('x' in params && 'y' in params) {
+      // mouse.click/dblclick/move
+      return `(${params.x}, ${params.y})`;
+    } else if ('deltaX' in params && 'deltaY' in params) {
+      // mouse.wheel
+      return `(${params.deltaX}, ${params.deltaY})`;
+    }
+  } else if (action.apiName.startsWith('touchscreen')) {
+    if ('x' in params && 'y' in params) {
+      // touchscreen.tap
+      return `(${params.x}, ${params.y})`;
+    }
+  }
+  
+  return undefined;
+};