Filip/playwright
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Enable displaying locator and parameter context at the same time

Browse source
This commit is contained in:
Adam Gastineau 2025-01-16 06:31:06 -08:00
parent 60bb08838b
commit 0fd80b09e1
1 changed files with 42 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
packages/trace-viewer/src/ui/actionList.tsx
View file

@ -129,16 +129,23 @@ export const renderAction = (
return <> return <>
<div className='action-title' title={action.apiName}> <div className='action-title' title={action.apiName}>
<span>{action.apiName}</span> <span>{action.apiName}</span>
{parameterString && <div {parameterString &&
className={clsx( (parameterString.type === 'locator' ? (
'action-parameter', <>
parameterString.type === 'locator' <span className='action-parameter action-locator-parameter'>
? 'action-locator-parameter' {parameterString.value}
: 'action-generic-parameter', </span>
)} {parameterString.childDisplayString && (
> <span className='action-parameter action-generic-parameter'>
{parameterString.value} {parameterString.childDisplayString.value}
</div>} </span>
)}
</>
) : (
<span className='action-parameter action-generic-parameter'>
{parameterString.value}
</span>
))}
{action.method === 'goto' && action.params.url && <div className='action-url' title={action.params.url}>{action.params.url}</div>} {action.method === 'goto' && action.params.url && <div className='action-url' title={action.params.url}>{action.params.url}</div>}
{action.class === 'APIRequestContext' && action.params.url && <div className='action-url' title={action.params.url}>{excludeOrigin(action.params.url)}</div>} {action.class === 'APIRequestContext' && action.params.url && <div className='action-url' title={action.params.url}>{excludeOrigin(action.params.url)}</div>}
</div> </div>
@ -161,10 +168,16 @@ function excludeOrigin(url: string): string {
} }
} }
interface ActionParameterDisplayString { type ActionParameterDisplayString =
type: 'generic' | 'locator'; | {
value: string; type: 'generic';
} value: string;
}
| {
type: 'locator';
value: string;
childDisplayString?: ActionParameterDisplayString;
};
const clockDisplayString = ( const clockDisplayString = (
action: ActionTraceEvent, action: ActionTraceEvent,
@ -218,9 +231,10 @@ const keyboardDisplayString = (
case 'fill': case 'fill':
case 'keyboardType': case 'keyboardType':
case 'keyboardInsertText': { case 'keyboardInsertText': {
if (action.params.text === undefined) const string = action.params.text ?? action.params.value;
if (string === undefined)
return undefined; return undefined;
return { type: 'generic', value: `"${action.params.text}"` }; return { type: 'generic', value: `"${string}"` };
} }
} }
}; };
@ -272,12 +286,22 @@ const touchscreenDisplayString = (
const actionParameterDisplayString = ( const actionParameterDisplayString = (
action: ActionTraceEvent, action: ActionTraceEvent,
sdkLanguage: Language, sdkLanguage: Language,
ignoreLocator: boolean = false,
): ActionParameterDisplayString | undefined => { ): ActionParameterDisplayString | undefined => {
const params = action.params; const params = action.params;
// Locators have many possible classes, so follow existing logic and use `selector` presence // Locators have many possible classes, so follow existing logic and use `selector` presence
if (params.selector !== undefined) if (!ignoreLocator && params.selector !== undefined) {
return { type: 'locator', value: asLocator(sdkLanguage, params.selector) }; return {
type: 'locator',
value: asLocator(sdkLanguage, params.selector),
childDisplayString: actionParameterDisplayString(
action,
sdkLanguage,
true,
),
};
}
switch (action.class.toLowerCase()) { switch (action.class.toLowerCase()) {
case 'browsercontext': case 'browsercontext':