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

chore: take snapshot tab apart (#32756)

Browse source
This commit is contained in:
Pavel Feldman 2024-09-23 15:51:15 -07:00 committed by GitHub
parent 11320d34c6
commit 0c8b2a7c32
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 214 additions and 132 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
packages/trace-viewer/src/ui/snapshotTab.css
View file

@ -15,12 +15,8 @@
*/ */
.snapshot-tab { .snapshot-tab {
display: flex;
flex: auto;
flex-direction: column;
align-items: stretch; align-items: stretch;
outline: none; outline: none;
--browser-frame-header-height: 40px;
overflow: hidden; overflow: hidden;
} }
@ -73,6 +69,7 @@
margin: 1px; margin: 1px;
padding: 10px; padding: 10px;
position: relative; position: relative;
--browser-frame-header-height: 40px;
} }
.snapshot-container { .snapshot-container {

335
packages/trace-viewer/src/ui/snapshotTab.tsx
View file

@ -40,7 +40,7 @@ function findClosest<T>(items: T[], metric: (v: T) => number, target: number) {
}); });
} }
export const SnapshotTab: React.FunctionComponent<{ export const SnapshotTabsView: React.FunctionComponent<{
action: ActionTraceEvent | undefined, action: ActionTraceEvent | undefined,
model?: MultiTraceModel, model?: MultiTraceModel,
sdkLanguage: Language, sdkLanguage: Language,
@ -50,63 +50,69 @@ export const SnapshotTab: React.FunctionComponent<{
highlightedLocator: string, highlightedLocator: string,
setHighlightedLocator: (locator: string) => void, setHighlightedLocator: (locator: string) => void,
openPage?: (url: string, target?: string) => Window | any, openPage?: (url: string, target?: string) => Window | any,
}> = ({ action, model, sdkLanguage, testIdAttributeName, isInspecting, setIsInspecting, highlightedLocator, setHighlightedLocator, openPage }) => { }> = ({ action, sdkLanguage, testIdAttributeName, isInspecting, setIsInspecting, highlightedLocator, setHighlightedLocator, openPage }) => {
const [measure, ref] = useMeasure<HTMLDivElement>();
const [snapshotTab, setSnapshotTab] = React.useState<'action'|'before'|'after'>('action'); const [snapshotTab, setSnapshotTab] = React.useState<'action'|'before'|'after'>('action');
const [showScreenshotInsteadOfSnapshot] = useSetting('screenshot-instead-of-snapshot', false); const [showScreenshotInsteadOfSnapshot] = useSetting('screenshot-instead-of-snapshot', false);
type Snapshot = { action: ActionTraceEvent, snapshotName: string, point?: { x: number, y: number }, hasInputTarget?: boolean }; const snapshots = React.useMemo(() => {
const { snapshots } = React.useMemo(() => { return collectSnapshots(action);
if (!action)
return { snapshots: {} };
// if the action has no beforeSnapshot, use the last available afterSnapshot.
let beforeSnapshot: Snapshot | undefined = action.beforeSnapshot ? { action, snapshotName: action.beforeSnapshot } : undefined;
let a = action;
while (!beforeSnapshot && a) {
a = prevInList(a);
beforeSnapshot = a?.afterSnapshot ? { action: a, snapshotName: a?.afterSnapshot } : undefined;
}
const afterSnapshot: Snapshot | undefined = action.afterSnapshot ? { action, snapshotName: action.afterSnapshot } : beforeSnapshot;
const actionSnapshot: Snapshot | undefined = action.inputSnapshot ? { action, snapshotName: action.inputSnapshot, hasInputTarget: true } : afterSnapshot;
if (actionSnapshot)
actionSnapshot.point = action.point;
return { snapshots: { action: actionSnapshot, before: beforeSnapshot, after: afterSnapshot } };
}, [action]); }, [action]);
const snapshotUrls = React.useMemo(() => {
const { snapshotInfoUrl, snapshotUrl, popoutUrl, point } = React.useMemo(() => {
const snapshot = snapshots[snapshotTab]; const snapshot = snapshots[snapshotTab];
if (!snapshot) return snapshot ? extendSnapshot(snapshot) : undefined;
return { snapshotUrl: kBlankSnapshotUrl };
const params = new URLSearchParams();
params.set('trace', context(snapshot.action).traceUrl);
params.set('name', snapshot.snapshotName);
if (snapshot.point) {
params.set('pointX', String(snapshot.point.x));
params.set('pointY', String(snapshot.point.y));
if (snapshot.hasInputTarget)
params.set('hasInputTarget', '1');
}
const snapshotUrl = new URL(`snapshot/${snapshot.action.pageId}?${params.toString()}`, window.location.href).toString();
const snapshotInfoUrl = new URL(`snapshotInfo/${snapshot.action.pageId}?${params.toString()}`, window.location.href).toString();
const popoutParams = new URLSearchParams();
popoutParams.set('r', snapshotUrl);
popoutParams.set('trace', context(snapshot.action).traceUrl);
if (snapshot.point) {
popoutParams.set('pointX', String(snapshot.point.x));
popoutParams.set('pointY', String(snapshot.point.y));
if (snapshot.hasInputTarget)
params.set('hasInputTarget', '1');
}
const popoutUrl = new URL(`snapshot.html?${popoutParams.toString()}`, window.location.href).toString();
return { snapshots, snapshotInfoUrl, snapshotUrl, popoutUrl, point: snapshot.point };
}, [snapshots, snapshotTab]); }, [snapshots, snapshotTab]);
return <div className='snapshot-tab vbox'>
<Toolbar>
<ToolbarButton className='pick-locator' title={showScreenshotInsteadOfSnapshot ? 'Disable "screenshots instead of snapshots" to pick a locator' : 'Pick locator'} icon='target' toggled={isInspecting} onClick={() => setIsInspecting(!isInspecting)} disabled={showScreenshotInsteadOfSnapshot} />
{['action', 'before', 'after'].map(tab => {
return <TabbedPaneTab
key={tab}
id={tab}
title={renderTitle(tab)}
selected={snapshotTab === tab}
onSelect={() => setSnapshotTab(tab as 'action' | 'before' | 'after')}
></TabbedPaneTab>;
})}
<div style={{ flex: 'auto' }}></div>
<ToolbarButton icon='link-external' title={showScreenshotInsteadOfSnapshot ? 'Not available when showing screenshot' : 'Open snapshot in a new tab'} disabled={!snapshotUrls?.popoutUrl || showScreenshotInsteadOfSnapshot} onClick={() => {
if (!openPage)
openPage = window.open;
const win = openPage(snapshotUrls?.popoutUrl || '', '_blank');
win?.addEventListener('DOMContentLoaded', () => {
const injectedScript = new InjectedScript(win as any, false, sdkLanguage, testIdAttributeName, 1, 'chromium', []);
new ConsoleAPI(injectedScript);
});
}} />
</Toolbar>
{!showScreenshotInsteadOfSnapshot && <SnapshotView
snapshotUrls={snapshotUrls}
sdkLanguage={sdkLanguage}
testIdAttributeName={testIdAttributeName}
isInspecting={isInspecting}
setIsInspecting={setIsInspecting}
highlightedLocator={highlightedLocator}
setHighlightedLocator={setHighlightedLocator}
/>}
{showScreenshotInsteadOfSnapshot && <ScreenshotView
action={action}
snapshotUrls={snapshotUrls}
snapshot={snapshots[snapshotTab]} />}
</div>;
};
export const SnapshotView: React.FunctionComponent<{
snapshotUrls: SnapshotUrls | undefined,
sdkLanguage: Language,
testIdAttributeName: string,
isInspecting: boolean,
setIsInspecting: (isInspecting: boolean) => void,
highlightedLocator: string,
setHighlightedLocator: (locator: string) => void,
}> = ({ snapshotUrls, sdkLanguage, testIdAttributeName, isInspecting, setIsInspecting, highlightedLocator, setHighlightedLocator }) => {
const iframeRef0 = React.useRef<HTMLIFrameElement>(null); const iframeRef0 = React.useRef<HTMLIFrameElement>(null);
const iframeRef1 = React.useRef<HTMLIFrameElement>(null); const iframeRef1 = React.useRef<HTMLIFrameElement>(null);
const [snapshotInfo, setSnapshotInfo] = React.useState<{ viewport: typeof kDefaultViewport, url: string, timestamp?: number, wallTime?: undefined }>({ viewport: kDefaultViewport, url: '' }); const [snapshotInfo, setSnapshotInfo] = React.useState<SnapshotInfo>({ viewport: kDefaultViewport, url: '' });
const loadingRef = React.useRef({ iteration: 0, visibleIframe: 0 }); const loadingRef = React.useRef({ iteration: 0, visibleIframe: 0 });
React.useEffect(() => { React.useEffect(() => {
@ -115,17 +121,7 @@ export const SnapshotTab: React.FunctionComponent<{
const newVisibleIframe = 1 - loadingRef.current.visibleIframe; const newVisibleIframe = 1 - loadingRef.current.visibleIframe;
loadingRef.current.iteration = thisIteration; loadingRef.current.iteration = thisIteration;
const newSnapshotInfo = { url: '', viewport: kDefaultViewport, timestamp: undefined, wallTime: undefined }; const newSnapshotInfo = await fetchSnapshotInfo(snapshotUrls?.snapshotInfoUrl);
if (snapshotInfoUrl) {
const response = await fetch(snapshotInfoUrl);
const info = await response.json();
if (!info.error) {
newSnapshotInfo.url = info.url;
newSnapshotInfo.viewport = info.viewport;
newSnapshotInfo.timestamp = info.timestamp;
newSnapshotInfo.wallTime = info.wallTime;
}
}
// Interrupted by another load - bail out. // Interrupted by another load - bail out.
if (loadingRef.current.iteration !== thisIteration) if (loadingRef.current.iteration !== thisIteration)
@ -140,6 +136,7 @@ export const SnapshotTab: React.FunctionComponent<{
iframe.addEventListener('error', loadedCallback); iframe.addEventListener('error', loadedCallback);
// Try preventing history entry from being created. // Try preventing history entry from being created.
const snapshotUrl = snapshotUrls?.snapshotUrl || kBlankSnapshotUrl;
if (iframe.contentWindow) if (iframe.contentWindow)
iframe.contentWindow.location.replace(snapshotUrl); iframe.contentWindow.location.replace(snapshotUrl);
else else
@ -159,33 +156,10 @@ export const SnapshotTab: React.FunctionComponent<{
loadingRef.current.visibleIframe = newVisibleIframe; loadingRef.current.visibleIframe = newVisibleIframe;
setSnapshotInfo(newSnapshotInfo); setSnapshotInfo(newSnapshotInfo);
})(); })();
}, [snapshotUrl, snapshotInfoUrl]); }, [snapshotUrls]);
const windowHeaderHeight = 40;
const snapshotContainerSize = {
width: snapshotInfo.viewport.width,
height: snapshotInfo.viewport.height + windowHeaderHeight,
};
const scale = Math.min(measure.width / snapshotContainerSize.width, measure.height / snapshotContainerSize.height, 1);
const translate = {
x: (measure.width - snapshotContainerSize.width) / 2,
y: (measure.height - snapshotContainerSize.height) / 2,
};
const page = action ? pageForAction(action) : undefined;
const screencastFrame = React.useMemo(
() => {
if (snapshotInfo.wallTime && page?.screencastFrames[0]?.frameSwapWallTime)
return findClosest(page.screencastFrames, frame => frame.frameSwapWallTime!, snapshotInfo.wallTime);
if (snapshotInfo.timestamp && page?.screencastFrames)
return findClosest(page.screencastFrames, frame => frame.timestamp, snapshotInfo.timestamp);
},
[page?.screencastFrames, snapshotInfo.timestamp, snapshotInfo.wallTime]
);
return <div return <div
className='snapshot-tab' className='vbox'
tabIndex={0} tabIndex={0}
onKeyDown={event => { onKeyDown={event => {
if (event.key === 'Escape') { if (event.key === 'Escape') {
@ -210,46 +184,72 @@ export const SnapshotTab: React.FunctionComponent<{
setHighlightedLocator={setHighlightedLocator} setHighlightedLocator={setHighlightedLocator}
iframe={iframeRef1.current} iframe={iframeRef1.current}
iteration={loadingRef.current.iteration} /> iteration={loadingRef.current.iteration} />
<Toolbar> <SnapshotWrapper snapshotInfo={snapshotInfo}>
<ToolbarButton className='pick-locator' title={showScreenshotInsteadOfSnapshot ? 'Disable "screenshots instead of snapshots" to pick a locator' : 'Pick locator'} icon='target' toggled={isInspecting} onClick={() => setIsInspecting(!isInspecting)} disabled={showScreenshotInsteadOfSnapshot} /> <div className='snapshot-switcher'>
{['action', 'before', 'after'].map(tab => { <iframe ref={iframeRef0} name='snapshot' title='DOM Snapshot' className={clsx(loadingRef.current.visibleIframe === 0 && 'snapshot-visible')}></iframe>
return <TabbedPaneTab <iframe ref={iframeRef1} name='snapshot' title='DOM Snapshot' className={clsx(loadingRef.current.visibleIframe === 1 && 'snapshot-visible')}></iframe>
key={tab}
id={tab}
title={renderTitle(tab)}
selected={snapshotTab === tab}
onSelect={() => setSnapshotTab(tab as 'action' | 'before' | 'after')}
></TabbedPaneTab>;
})}
<div style={{ flex: 'auto' }}></div>
<ToolbarButton icon='link-external' title={showScreenshotInsteadOfSnapshot ? 'Not available when showing screenshot' : 'Open snapshot in a new tab'} disabled={!popoutUrl || showScreenshotInsteadOfSnapshot} onClick={() => {
if (!openPage)
openPage = window.open;
const win = openPage(popoutUrl || '', '_blank');
win?.addEventListener('DOMContentLoaded', () => {
const injectedScript = new InjectedScript(win as any, false, sdkLanguage, testIdAttributeName, 1, 'chromium', []);
new ConsoleAPI(injectedScript);
});
}}></ToolbarButton>
</Toolbar>
<div ref={ref} className='snapshot-wrapper'>
<div className='snapshot-container' style={{
width: snapshotContainerSize.width + 'px',
height: snapshotContainerSize.height + 'px',
transform: `translate(${translate.x}px, ${translate.y}px) scale(${scale})`,
}}>
<BrowserFrame url={snapshotInfo.url} />
{(showScreenshotInsteadOfSnapshot && screencastFrame) && (
<>
{point && <ClickPointer point={point} />}
<img alt={`Screenshot of ${action?.apiName} > ${renderTitle(snapshotTab)}`} src={`sha1/${screencastFrame.sha1}`} width={screencastFrame.width} height={screencastFrame.height} />
</>
)}
<div className='snapshot-switcher' style={showScreenshotInsteadOfSnapshot ? { display: 'none' } : undefined}>
<iframe ref={iframeRef0} name='snapshot' title='DOM Snapshot' className={clsx(loadingRef.current.visibleIframe === 0 && 'snapshot-visible')}></iframe>
<iframe ref={iframeRef1} name='snapshot' title='DOM Snapshot' className={clsx(loadingRef.current.visibleIframe === 1 && 'snapshot-visible')}></iframe>
</div>
</div> </div>
</SnapshotWrapper>
</div>;
};
export const ScreenshotView: React.FunctionComponent<{
action: ActionTraceEvent | undefined,
snapshotUrls: SnapshotUrls | undefined,
snapshot: Snapshot | undefined,
}> = ({ action, snapshotUrls, snapshot }) => {
const [snapshotInfo, setSnapshotInfo] = React.useState<SnapshotInfo>({ viewport: kDefaultViewport, url: '' });
React.useEffect(() => {
fetchSnapshotInfo(snapshotUrls?.snapshotInfoUrl).then(setSnapshotInfo);
}, [snapshotUrls?.snapshotInfoUrl]);
const page = action ? pageForAction(action) : undefined;
const screencastFrame = React.useMemo(() => {
if (snapshotInfo.wallTime && page?.screencastFrames[0]?.frameSwapWallTime)
return findClosest(page.screencastFrames, frame => frame.frameSwapWallTime!, snapshotInfo.wallTime);
if (snapshotInfo.timestamp && page?.screencastFrames)
return findClosest(page.screencastFrames, frame => frame.timestamp, snapshotInfo.timestamp);
},
[page?.screencastFrames, snapshotInfo.timestamp, snapshotInfo.wallTime]);
const point = snapshot?.point;
return <SnapshotWrapper snapshotInfo={snapshotInfo}>
{screencastFrame && (
<>
{point && <ClickPointer point={point} />}
<img alt={`Screenshot of ${action?.apiName}`} src={`sha1/${screencastFrame.sha1}`} width={screencastFrame.width} height={screencastFrame.height} />
</>
)}
</SnapshotWrapper>;
};
const SnapshotWrapper: React.FunctionComponent<React.PropsWithChildren<{
snapshotInfo: SnapshotInfo,
}>> = ({ snapshotInfo, children }) => {
const [measure, ref] = useMeasure<HTMLDivElement>();
const windowHeaderHeight = 40;
const snapshotContainerSize = {
width: snapshotInfo.viewport.width,
height: snapshotInfo.viewport.height + windowHeaderHeight,
};
const scale = Math.min(measure.width / snapshotContainerSize.width, measure.height / snapshotContainerSize.height, 1);
const translate = {
x: (measure.width - snapshotContainerSize.width) / 2,
y: (measure.height - snapshotContainerSize.height) / 2,
};
return <div ref={ref} className='snapshot-wrapper'>
<div className='snapshot-container' style={{
width: snapshotContainerSize.width + 'px',
height: snapshotContainerSize.height + 'px',
transform: `translate(${translate.x}px, ${translate.y}px) scale(${scale})`,
}}>
<BrowserFrame url={snapshotInfo.url} />
{children}
</div> </div>
</div>; </div>;
}; };
@ -325,5 +325,90 @@ function createRecorders(recorders: { recorder: Recorder, frameSelector: string
} }
} }
const kDefaultViewport = { width: 1280, height: 720 }; export type Snapshot = {
action: ActionTraceEvent;
snapshotName: string;
point?: { x: number, y: number };
hasInputTarget?: boolean;
};
export type SnapshotInfo = {
url: string;
viewport: { width: number, height: number };
timestamp?: number;
wallTime?: undefined;
};
export type Snapshots = {
action?: Snapshot;
before?: Snapshot;
after?: Snapshot;
};
export type SnapshotUrls = {
snapshotInfoUrl: string;
snapshotUrl: string;
popoutUrl: string;
};
export function collectSnapshots(action: ActionTraceEvent | undefined): Snapshots {
if (!action)
return {};
// if the action has no beforeSnapshot, use the last available afterSnapshot.
let beforeSnapshot: Snapshot | undefined = action.beforeSnapshot ? { action, snapshotName: action.beforeSnapshot } : undefined;
let a = action;
while (!beforeSnapshot && a) {
a = prevInList(a);
beforeSnapshot = a?.afterSnapshot ? { action: a, snapshotName: a?.afterSnapshot } : undefined;
}
const afterSnapshot: Snapshot | undefined = action.afterSnapshot ? { action, snapshotName: action.afterSnapshot } : beforeSnapshot;
const actionSnapshot: Snapshot | undefined = action.inputSnapshot ? { action, snapshotName: action.inputSnapshot, hasInputTarget: true } : afterSnapshot;
if (actionSnapshot)
actionSnapshot.point = action.point;
return { action: actionSnapshot, before: beforeSnapshot, after: afterSnapshot };
}
export function extendSnapshot(snapshot: Snapshot): SnapshotUrls {
const params = new URLSearchParams();
params.set('trace', context(snapshot.action).traceUrl);
params.set('name', snapshot.snapshotName);
if (snapshot.point) {
params.set('pointX', String(snapshot.point.x));
params.set('pointY', String(snapshot.point.y));
if (snapshot.hasInputTarget)
params.set('hasInputTarget', '1');
}
const snapshotUrl = new URL(`snapshot/${snapshot.action.pageId}?${params.toString()}`, window.location.href).toString();
const snapshotInfoUrl = new URL(`snapshotInfo/${snapshot.action.pageId}?${params.toString()}`, window.location.href).toString();
const popoutParams = new URLSearchParams();
popoutParams.set('r', snapshotUrl);
popoutParams.set('trace', context(snapshot.action).traceUrl);
if (snapshot.point) {
popoutParams.set('pointX', String(snapshot.point.x));
popoutParams.set('pointY', String(snapshot.point.y));
if (snapshot.hasInputTarget)
params.set('hasInputTarget', '1');
}
const popoutUrl = new URL(`snapshot.html?${popoutParams.toString()}`, window.location.href).toString();
return { snapshotInfoUrl, snapshotUrl, popoutUrl };
}
export async function fetchSnapshotInfo(snapshotInfoUrl: string | undefined) {
const result = { url: '', viewport: kDefaultViewport, timestamp: undefined, wallTime: undefined };
if (snapshotInfoUrl) {
const response = await fetch(snapshotInfoUrl);
const info = await response.json();
if (!info.error) {
result.url = info.url;
result.viewport = info.viewport;
result.timestamp = info.timestamp;
result.wallTime = info.wallTime;
}
}
return result;
}
export const kDefaultViewport = { width: 1280, height: 720 };
const kBlankSnapshotUrl = 'data:text/html,<body style="background: #ddd"></body>'; const kBlankSnapshotUrl = 'data:text/html,<body style="background: #ddd"></body>';

4
packages/trace-viewer/src/ui/workbench.tsx
View file

@ -25,7 +25,7 @@ import type { ConsoleEntry } from './consoleTab';
import { ConsoleTab, useConsoleTabModel } from './consoleTab'; import { ConsoleTab, useConsoleTabModel } from './consoleTab';
import type * as modelUtil from './modelUtil'; import type * as modelUtil from './modelUtil';
import { NetworkTab, useNetworkTabModel } from './networkTab'; import { NetworkTab, useNetworkTabModel } from './networkTab';
import { SnapshotTab } from './snapshotTab'; import { SnapshotTabsView } from './snapshotTab';
import { SourceTab } from './sourceTab'; import { SourceTab } from './sourceTab';
import { TabbedPane } from '@web/components/tabbedPane'; import { TabbedPane } from '@web/components/tabbedPane';
import type { TabbedPaneTabModel } from '@web/components/tabbedPane'; import type { TabbedPaneTabModel } from '@web/components/tabbedPane';
@ -331,7 +331,7 @@ export const Workbench: React.FunctionComponent<{
orientation='horizontal' orientation='horizontal'
sidebarIsFirst sidebarIsFirst
settingName='actionListSidebar' settingName='actionListSidebar'
main={<SnapshotTab main={<SnapshotTabsView
action={activeAction} action={activeAction}
model={model} model={model}
sdkLanguage={sdkLanguage} sdkLanguage={sdkLanguage}

2
tests/library/trace-viewer.spec.ts
View file

@ -1408,7 +1408,7 @@ test('should allow showing screenshots instead of snapshots', async ({ runAndTra
await page.waitForTimeout(1000); // ensure we could take a screenshot await page.waitForTimeout(1000); // ensure we could take a screenshot
}); });
const screenshot = traceViewer.page.getByAltText(`Screenshot of page.goto > Action`); const screenshot = traceViewer.page.getByAltText(`Screenshot of page.goto`);
const snapshot = (await traceViewer.snapshotFrame('page.goto')).owner(); const snapshot = (await traceViewer.snapshotFrame('page.goto')).owner();
await expect(snapshot).toBeVisible(); await expect(snapshot).toBeVisible();
await expect(screenshot).not.toBeVisible(); await expect(screenshot).not.toBeVisible();