diff --git a/packages/trace-viewer/src/ui/actionList.tsx b/packages/trace-viewer/src/ui/actionList.tsx index 1deb8ecd88..c740fe9c33 100644 --- a/packages/trace-viewer/src/ui/actionList.tsx +++ b/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 = ''; diff --git a/packages/trace-viewer/src/ui/string.ts b/packages/trace-viewer/src/ui/string.ts new file mode 100644 index 0000000000..e515868eb3 --- /dev/null +++ b/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; +}; \ No newline at end of file