experiment: special tracing view for API testing

examples/github-api/tests/example.spec.ts

@@ -0,0 +1,8 @@
+import { test, expect } from '@playwright/test';
+
+test('should get post #1', async ({ request }) => {
+  const post = await request.get(`https://jsonplaceholder.typicode.com/posts/1`);
+  expect(post.ok()).toBeTruthy();
+
+  await request.post(`https://jsonplaceholder.typicode.com/posts/1`);
+});

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

@@ -24,29 +24,29 @@ import { generateCurlCommand, generateFetchCall } from '../third_party/devtools'
 import { CopyToClipboard } from './copyToClipboard';
 
 export const NetworkResourceDetails: React.FunctionComponent<{
-  resource: ResourceSnapshot;
-  onClose: () => void;
+  resource?: ResourceSnapshot;
+  onClose?: () => void;
 }> = ({ resource, onClose }) => {
   const [selectedTab, setSelectedTab] = React.useState('request');
 
   return <TabbedPane
     dataTestId='network-request-details'
-    leftToolbar={[<ToolbarButton key='close' icon='close' title='Close' onClick={onClose}></ToolbarButton>]}
+    leftToolbar={onClose ? [<ToolbarButton key='close' icon='close' title='Close' onClick={onClose}></ToolbarButton>] : undefined}
     tabs={[
       {
         id: 'request',
         title: 'Request',
-        render: () => <RequestTab resource={resource}/>,
+        render: () => resource ? <RequestTab resource={resource}/> : <div/>,
       },
       {
         id: 'response',
         title: 'Response',
-        render: () => <ResponseTab resource={resource}/>,
+        render: () => resource ? <ResponseTab resource={resource}/> : <div/>,
       },
       {
         id: 'body',
         title: 'Body',
-        render: () => <BodyTab resource={resource}/>,
+        render: () => resource ? <BodyTab resource={resource}/> : <div/>,
       },
     ]}
     selectedTab={selectedTab}

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

@@ -108,6 +108,7 @@ export const UIModeView: React.FC<{}> = ({
   const [showRouteActions, setShowRouteActions] = useSetting('show-route-actions', true);
   const [darkMode, setDarkMode] = useDarkModeSetting();
   const [showScreenshot, setShowScreenshot] = useSetting('screenshot-instead-of-snapshot', false);
+  const [apiTestingView, setApiTestingView] = useSetting('api-testing-view', false);
 
 
   const inputRef = React.useRef<HTMLInputElement>(null);
@@ -528,6 +529,7 @@ export const UIModeView: React.FC<{}> = ({
           { value: darkMode, set: setDarkMode, title: 'Dark mode' },
           { value: showRouteActions, set: setShowRouteActions, title: 'Show route actions' },
           { value: showScreenshot, set: setShowScreenshot, title: 'Show screenshot instead of snapshot' },
+          { value: apiTestingView, set: setApiTestingView, title: 'API Testing view' },
         ]} />}
       </div>
       }

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

@@ -43,6 +43,7 @@ import './workbench.css';
 import { testStatusIcon, testStatusText } from './testUtils';
 import type { UITestStatus } from './testUtils';
 import { SettingsView } from './settingsView';
+import { NetworkResourceDetails } from './networkResourceDetails';
 
 export const Workbench: React.FunctionComponent<{
   model?: modelUtil.MultiTraceModel,
@@ -72,6 +73,7 @@ export const Workbench: React.FunctionComponent<{
   const [sidebarLocation, setSidebarLocation] = useSetting<'bottom' | 'right'>('propertiesSidebarLocation', 'bottom');
   const [showRouteActions, setShowRouteActions] = useSetting('show-route-actions', true);
   const [showScreenshot, setShowScreenshot] = useSetting('screenshot-instead-of-snapshot', false);
+  const [apiTestingView, setApiTestingView] = useSetting('api-testing-view', false);
 
   const filteredActions = React.useMemo(() => {
     return (model?.actions || []).filter(action => showRouteActions || !isRouteAction(action));
@@ -235,16 +237,10 @@ export const Workbench: React.FunctionComponent<{
     render: () => <AttachmentsTab model={model} />
   };
 
-  const tabs: TabbedPaneTabModel[] = [
-    inspectorTab,
-    callTab,
-    logTab,
-    errorsTab,
-    consoleTab,
-    networkTab,
-    sourceTab,
-    attachmentsTab,
-  ];
+  const tabs: TabbedPaneTabModel[] =
+    apiTestingView
+      ? [callTab, logTab, errorsTab, networkTab, attachmentsTab]
+      : [inspectorTab, callTab, logTab, errorsTab, consoleTab, networkTab, sourceTab, attachmentsTab];
 
   if (annotations !== undefined) {
     const annotationsTab: TabbedPaneTabModel = {
@@ -312,10 +308,15 @@ export const Workbench: React.FunctionComponent<{
     title: 'Settings',
     component: <SettingsView settings={[
       { value: showRouteActions, set: setShowRouteActions, title: 'Show route actions' },
-      { value: showScreenshot, set: setShowScreenshot, title: 'Show screenshot instead of snapshot' }
+      { value: showScreenshot, set: setShowScreenshot, title: 'Show screenshot instead of snapshot' },
+      { value: apiTestingView, set: setApiTestingView, title: 'API Testing View' }
     ]}/>,
   };
 
+  let entryForSelectedAction: Entry | undefined;
+  if (selectedAction?.method === 'fetch')
+    entryForSelectedAction = networkModel.resources.find(resource => resource.request.url === selectedAction.params.url && resource.request.method === selectedAction.params.method);
+
   return <div className='vbox workbench' {...(inert ? { inert: 'true' } : {})}>
     <Timeline
       model={model}
@@ -337,7 +338,7 @@ export const Workbench: React.FunctionComponent<{
         orientation='horizontal'
         sidebarIsFirst
         settingName='actionListSidebar'
-        main={<SnapshotTab
+        main={apiTestingView ? <NetworkResourceDetails resource={entryForSelectedAction} /> : <SnapshotTab
           action={activeAction}
           model={model}
           sdkLanguage={sdkLanguage}