feat(dashboard): add openDashboardForContext entry point (#40506)

Author: pavelfeldman

packages/dashboard/src/dashboardChannel.ts

@@ -47,9 +47,7 @@ export interface DashboardChannel {
   closeTab(params: { browser: string; context: string; page: string }): Promise<void>;
   newTab(params: { browser: string; context: string }): Promise<void>;
   closeSession(params: { browser: string }): Promise<void>;
-  deleteSessionData(params: { browser: string }): Promise<void>;
   setVisible(params: { visible: boolean }): Promise<void>;
-  reveal(params: { path: string }): Promise<void>;
 
   navigate(params: { url: string }): Promise<void>;
   back(): Promise<void>;

packages/dashboard/src/dashboardModel.ts

@@ -92,10 +92,6 @@ export class DashboardModel {
     void this._client.closeSession({ browser: descriptor.browser.guid });
   }
 
-  deleteSessionData(descriptor: BrowserDescriptor) {
-    void this._client.deleteSessionData({ browser: descriptor.browser.guid });
-  }
-
   setVisible(visible: boolean) {
     void this._client.setVisible({ visible });
   }

packages/playwright-core/src/tools/dashboard/dashboardApp.ts

@@ -28,9 +28,12 @@ import { findChromiumChannelBestEffort, registryDirectory } from '../../server/r
 import { minimist } from '../cli-client/minimist';
 import { saveOutputFile } from '../trace/traceUtils';
 import { DashboardConnection } from './dashboardController';
+import { RegistrySessionProvider } from './registrySessionProvider';
+import { IdentitySessionProvider } from './identitySessionProvider';
 
 import type * as api from '../../..';
 import type { AnnotationData } from '@dashboard/dashboardChannel';
+import type { SessionProvider } from './sessionProvider';
 
 // HMR: build-time flag — `true` in watch builds, `false` in release. esbuild
 // replaces the identifier via `define`, so the static branch pays zero runtime
@@ -42,9 +45,10 @@ type DashboardServer = {
   reveal: (options: DashboardOptions) => void;
   triggerAnnotate: () => void;
   registerAnnotateWaiter: (socket: net.Socket) => void;
+  close: () => Promise<void>;
 };
 
-async function startDashboardServer(options: DashboardOptions): Promise<DashboardServer> {
+async function startDashboardServer(provider: SessionProvider, options: DashboardOptions): Promise<DashboardServer> {
   const httpServer = new HttpServer();
   const dashboardDir = libPath('vite', 'dashboard');
 
@@ -67,7 +71,7 @@ async function startDashboardServer(options: DashboardOptions): Promise<Dashboar
   httpServer.createWebSocket(() => {
     let connection: DashboardConnection;
     // eslint-disable-next-line prefer-const
-    connection = new DashboardConnection(() => connections.delete(connection), () => {
+    connection = new DashboardConnection(provider, () => connections.delete(connection), () => {
       if (currentReveal.pageId)
         connection.revealPage(currentReveal.pageId);
       else if (currentReveal.sessionName)
@@ -131,7 +135,8 @@ async function startDashboardServer(options: DashboardOptions): Promise<Dashboar
     socket.on('error', cleanup);
   };
 
-  return { url: httpServer.urlPrefix('human-readable'), reveal, triggerAnnotate, registerAnnotateWaiter };
+  const close = () => httpServer.stop();
+  return { url: httpServer.urlPrefix('human-readable'), reveal, triggerAnnotate, registerAnnotateWaiter, close };
 }
 
 function attachDashboardStaticServer(httpServer: HttpServer, dashboardDir: string) {
@@ -157,13 +162,13 @@ async function attachDashboardDevServer(httpServer: HttpServer) {
 // HMR end
 
 async function innerOpenDashboardApp(options: DashboardOptions): Promise<{ page: api.Page; server: DashboardServer }> {
-  const server = await startDashboardServer(options);
-  const { page } = await launchApp('dashboard');
+  const server = await startDashboardServer(new RegistrySessionProvider(), options);
+  const { page } = await launchApp('dashboard', { onClose: () => gracefullyProcessExitDoNotHang(0) });
   await page.goto(server.url);
   return { page, server };
 }
 
-async function launchApp(appName: string) {
+async function launchApp(appName: string, options?: { onClose?: () => void }) {
   const channel = findChromiumChannelBestEffort('javascript');
   const context = await playwright.chromium.launchPersistentContext('', {
     ignoreDefaultArgs: ['--enable-automation'],
@@ -192,9 +197,7 @@ async function launchApp(appName: string) {
     });
   }
 
-  page.on('close', () => {
-    gracefullyProcessExitDoNotHang(0);
-  });
+  page.on('close', () => options?.onClose?.());
 
   const image = await fs.promises.readFile(libPath('tools', 'dashboard', 'appIcon.png'));
   // This is local Playwright, so I can access private methods.
@@ -299,7 +302,7 @@ export async function openDashboardApp() {
     console.error('Unhandled promise rejection:', error);
   });
   if (options.port !== undefined) {
-    const { url } = await startDashboardServer(options);
+    const { url } = await startDashboardServer(new RegistrySessionProvider(), options);
     // eslint-disable-next-line no-console
     console.log(`Listening on ${url}`);
     selfDestructOnParentGone();
@@ -352,6 +355,22 @@ export async function openDashboardApp() {
   await statePromise;
 }
 
+export async function openDashboardForContext(context: api.BrowserContext): Promise<void> {
+  const server = await startDashboardServer(new IdentitySessionProvider(context), {});
+
+  let closed = false;
+  const close = async () => {
+    if (closed)
+      return;
+    closed = true;
+    await server.close();
+  };
+
+  const { page } = await launchApp('dashboard', { onClose: () => { void close(); } });
+  context.on('close', () => { void close(); });
+  await page.goto(server.url);
+}
+
 async function runKillClient(): Promise<void> {
   const socketPath = dashboardSocketPath();
   await new Promise<void>(resolve => {