fix(ui-mode): prevent navigation inside UI-Mode app

Author: agg23

packages/playwright-core/src/server/launchApp.ts

@@ -32,14 +32,18 @@ export async function launchApp(browserType: BrowserType, options: {
   sdkLanguage: string,
   windowSize: types.Size,
   windowPosition?: types.Point,
-  persistentContextOptions?: Parameters<BrowserType['launchPersistentContext']>[2];
+  persistentContextOptions?: Parameters<BrowserType['launchPersistentContext']>[2],
+  initialUrl?: string,
 }) {
   const args = [...options.persistentContextOptions?.args ?? []];
 
   let channel = options.persistentContextOptions?.channel;
+  let hasInitialUrl = false;
   if (browserType.name() === 'chromium') {
+    const initialUrl = options.initialUrl ?? 'data:text/html,';
+    hasInitialUrl = options.initialUrl !== undefined;
     args.push(
-        '--app=data:text/html,',
+        `--app=${initialUrl}`,
         `--window-size=${options.windowSize.width},${options.windowSize.height}`,
         ...(options.windowPosition ? [`--window-position=${options.windowPosition.x},${options.windowPosition.y}`] : []),
         '--test-type=',
@@ -84,7 +88,7 @@ export async function launchApp(browserType: BrowserType, options: {
   }
   if (browserType.name() === 'chromium')
     await installAppIcon(page);
-  return { context, page };
+  return { context, page, hasInitialUrl };
 }
 
 async function installAppIcon(page: Page) {

packages/playwright-core/src/server/trace/viewer/traceViewer.ts

@@ -167,7 +167,7 @@ export async function openTraceViewerApp(url: string, browserName: string, optio
   const traceViewerPlaywright = createPlaywright({ sdkLanguage: 'javascript', isInternalPlaywright: true });
   const traceViewerBrowser = isUnderTest() ? 'chromium' : browserName;
 
-  const { context, page } = await launchApp(traceViewerPlaywright[traceViewerBrowser as 'chromium'], {
+  const { context, page, hasInitialUrl } = await launchApp(traceViewerPlaywright[traceViewerBrowser as 'chromium'], {
     sdkLanguage: traceViewerPlaywright.options.sdkLanguage,
     windowSize: { width: 1280, height: 800 },
     persistentContextOptions: {
@@ -176,6 +176,7 @@ export async function openTraceViewerApp(url: string, browserName: string, optio
       headless: !!options?.headless,
       colorScheme: isUnderTest() ? 'light' : undefined,
     },
+    initialUrl: url
   });
 
   const controller = new ProgressController();
@@ -193,7 +194,8 @@ export async function openTraceViewerApp(url: string, browserName: string, optio
     if (isUnderTest())
       page.on('close', () => context.close({ reason: 'Trace viewer closed' }).catch(() => {}));
 
-    await page.mainFrame().goto(progress, url);
+    if (!hasInitialUrl)
+      await page.mainFrame().goto(progress, url);
   });
   return page;
 }

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

@@ -112,6 +112,23 @@ export const UIModeView: React.FC<{}> = ({
     });
   }, []);
 
+  React.useEffect(() => {
+    // Flood history to try to prevent back navigation
+    for (let i = 0; i < 20; i++)
+      window.history.pushState(undefined, '', window.location.href);
+
+    const onPopState = () => {
+      // User navigated back/forward. Force us to stay at this location
+      window.history.pushState(undefined, '', window.location.href);
+    };
+
+    window.addEventListener('popstate', onPopState);
+
+    return () => {
+      window.removeEventListener('popstate', onPopState);
+    };
+  }, []);
+
   // Load tests on startup.
   React.useEffect(() => {
     inputRef.current?.focus();