From 309ccd8420e5b399c626f925cdbacfe52c25db19 Mon Sep 17 00:00:00 2001 From: Simon Knott Date: Tue, 22 Oct 2024 15:13:20 +0200 Subject: [PATCH] chore(trace): remove screenshot instead of snapshot code --- packages/trace-viewer/src/ui/inspectorTab.tsx | 5 +- packages/trace-viewer/src/ui/modelUtil.ts | 6 -- .../src/ui/recorder/recorderView.tsx | 1 - packages/trace-viewer/src/ui/snapshotTab.tsx | 57 ++----------------- packages/trace-viewer/src/ui/workbench.tsx | 2 - tests/library/trace-viewer.spec.ts | 30 ---------- 6 files changed, 7 insertions(+), 94 deletions(-) diff --git a/packages/trace-viewer/src/ui/inspectorTab.tsx b/packages/trace-viewer/src/ui/inspectorTab.tsx index c608cde21b..7b3a90b709 100644 --- a/packages/trace-viewer/src/ui/inspectorTab.tsx +++ b/packages/trace-viewer/src/ui/inspectorTab.tsx @@ -22,16 +22,15 @@ import * as React from 'react'; import './sourceTab.css'; export const InspectorTab: React.FunctionComponent<{ - showScreenshot: boolean, sdkLanguage: Language, setIsInspecting: (isInspecting: boolean) => void, highlightedLocator: string, setHighlightedLocator: (locator: string) => void, -}> = ({ showScreenshot, sdkLanguage, setIsInspecting, highlightedLocator, setHighlightedLocator }) => { +}> = ({ sdkLanguage, setIsInspecting, highlightedLocator, setHighlightedLocator }) => { return
Locator
- { + { // Updating text needs to go first - react can squeeze a render between the state updates. setHighlightedLocator(text); setIsInspecting(false); diff --git a/packages/trace-viewer/src/ui/modelUtil.ts b/packages/trace-viewer/src/ui/modelUtil.ts index b639a4c03d..8badcbd87e 100644 --- a/packages/trace-viewer/src/ui/modelUtil.ts +++ b/packages/trace-viewer/src/ui/modelUtil.ts @@ -22,7 +22,6 @@ import type { ActionEntry, ContextEntry, PageEntry } from '../types/entries'; import type { StackFrame } from '@protocol/channels'; const contextSymbol = Symbol('context'); -const pageSymbol = Symbol('page'); const nextInContextSymbol = Symbol('next'); const prevInListSymbol = Symbol('prev'); const eventsSymbol = Symbol('events'); @@ -148,7 +147,6 @@ function indexModel(context: ContextEntry) { for (let i = 0; i < context.actions.length; ++i) { const action = context.actions[i] as any; action[contextSymbol] = context; - action[pageSymbol] = context.pages.find(page => page.pageId === action.pageId); } let lastNonRouteAction = undefined; for (let i = context.actions.length - 1; i >= 0; i--) { @@ -353,10 +351,6 @@ export function prevInList(action: ActionTraceEvent): ActionTraceEvent { return (action as any)[prevInListSymbol]; } -export function pageForAction(action: ActionTraceEvent): PageEntry { - return (action as any)[pageSymbol]; -} - export function stats(action: ActionTraceEvent): { errors: number, warnings: number } { let errors = 0; let warnings = 0; diff --git a/packages/trace-viewer/src/ui/recorder/recorderView.tsx b/packages/trace-viewer/src/ui/recorder/recorderView.tsx index ed36efbbb6..6ff6b665d3 100644 --- a/packages/trace-viewer/src/ui/recorder/recorderView.tsx +++ b/packages/trace-viewer/src/ui/recorder/recorderView.tsx @@ -213,7 +213,6 @@ const PropertiesView: React.FunctionComponent<{ id: 'inspector', title: 'Locator', render: () => (items: T[], metric: (v: T) => number, target: number) { - return items.find((item, index) => { - if (index === items.length - 1) - return true; - const next = items[index + 1]; - return Math.abs(metric(item) - target) < Math.abs(metric(next) - target); - }); -} export const SnapshotTabsView: React.FunctionComponent<{ action: ActionTraceEvent | undefined, @@ -52,7 +42,6 @@ export const SnapshotTabsView: React.FunctionComponent<{ openPage?: (url: string, target?: string) => Window | any, }> = ({ action, sdkLanguage, testIdAttributeName, isInspecting, setIsInspecting, highlightedLocator, setHighlightedLocator, openPage }) => { const [snapshotTab, setSnapshotTab] = React.useState<'action'|'before'|'after'>('action'); - const showScreenshotInsteadOfSnapshot = false; const snapshots = React.useMemo(() => { return collectSnapshots(action); @@ -64,7 +53,7 @@ export const SnapshotTabsView: React.FunctionComponent<{ return
- setIsInspecting(!isInspecting)} disabled={showScreenshotInsteadOfSnapshot} /> + setIsInspecting(!isInspecting)} /> {['action', 'before', 'after'].map(tab => { return ; })}
- { + { if (!openPage) openPage = window.open; const win = openPage(snapshotUrls?.popoutUrl || '', '_blank'); @@ -85,7 +74,7 @@ export const SnapshotTabsView: React.FunctionComponent<{ }); }} /> - {!showScreenshotInsteadOfSnapshot && } - {showScreenshotInsteadOfSnapshot && } + />
; }; @@ -193,38 +178,6 @@ export const SnapshotView: React.FunctionComponent<{
; }; -export const ScreenshotView: React.FunctionComponent<{ - action: ActionTraceEvent | undefined, - snapshotUrls: SnapshotUrls | undefined, - snapshot: Snapshot | undefined, -}> = ({ action, snapshotUrls, snapshot }) => { - const [snapshotInfo, setSnapshotInfo] = React.useState({ 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 - {screencastFrame && ( - <> - {point && } - {`Screenshot - - )} - ; -}; - const SnapshotWrapper: React.FunctionComponent> = ({ snapshotInfo, children }) => { diff --git a/packages/trace-viewer/src/ui/workbench.tsx b/packages/trace-viewer/src/ui/workbench.tsx index f5471ca81c..3f440c7e75 100644 --- a/packages/trace-viewer/src/ui/workbench.tsx +++ b/packages/trace-viewer/src/ui/workbench.tsx @@ -68,7 +68,6 @@ export const Workbench: React.FunctionComponent<{ const [highlightedLocator, setHighlightedLocator] = React.useState(''); const [selectedTime, setSelectedTime] = React.useState(); const [sidebarLocation, setSidebarLocation] = useSetting<'bottom' | 'right'>('propertiesSidebarLocation', 'bottom'); - const showScreenshot = false; const setSelectedAction = React.useCallback((action: modelUtil.ActionTraceEventInContext | undefined) => { setSelectedCallId(action?.callId); @@ -164,7 +163,6 @@ export const Workbench: React.FunctionComponent<{ id: 'inspector', title: 'Locator', render: () => { - const traceViewer = await runAndTrace(async () => { - await page.goto(server.PREFIX + '/one-style.html'); - await page.waitForTimeout(1000); // ensure we could take a screenshot - }); - - const screenshot = traceViewer.page.getByAltText(`Screenshot of page.goto`); - const snapshot = (await traceViewer.snapshotFrame('page.goto')).owner(); - await expect(snapshot).toBeVisible(); - await expect(screenshot).not.toBeVisible(); - - await traceViewer.page.getByTitle('Settings').click(); - await traceViewer.page.getByText('Show screenshot instead of snapshot').setChecked(true); - - await expect(snapshot).not.toBeVisible(); - await expect(screenshot).toBeVisible(); -}); - -test.skip('should handle case where neither snapshots nor screenshots exist', async ({ runAndTrace, page, server }) => { - const traceViewer = await runAndTrace(async () => { - await page.goto(server.PREFIX + '/one-style.html'); - }, { snapshots: false, screenshots: false }); - - await traceViewer.page.getByTitle('Settings').click(); - await traceViewer.page.getByText('Show screenshot instead of snapshot').setChecked(true); - - const screenshot = traceViewer.page.getByAltText(`Screenshot of page.goto > Action`); - await expect(screenshot).not.toBeVisible(); -}); - test('should show only one pointer with multilevel iframes', async ({ page, runAndTrace, server, browserName }) => { test.fixme(browserName === 'firefox', 'Elements in iframe are not marked');