add support for overriding page viewport for playwright

playwriter/src/mcp.ts

@@ -96,7 +96,31 @@ const NO_TABS_ERROR = `No browser tabs are connected. Please install and enable
 
 
 
-async function setDeviceScaleFactorForMacOS(context: BrowserContext): Promise<void> {
+async function setViewportFromBrowser({ context, wsUrl }: { context: BrowserContext; wsUrl: string }): Promise<void> {
+  const options = (context as any)._options
+  if (!options) {
+    return
+  }
+  const pages = context.pages()
+  if (pages.length === 0) {
+    return
+  }
+  const page = pages[0]
+  try {
+    const cdpSession = await getCDPSessionForPage({ page, wsUrl })
+    const metrics = await cdpSession.send('Page.getLayoutMetrics')
+    cdpSession.detach()
+    const { clientWidth, clientHeight } = metrics.visualViewport
+    if (clientWidth && clientHeight) {
+      options.viewport = { width: Math.round(clientWidth), height: Math.round(clientHeight) }
+      options.screen = options.viewport
+    }
+  } catch {
+    return
+  }
+}
+
+function setDeviceScaleFactorForMacOS(context: BrowserContext): void {
   if (os.platform() !== 'darwin') {
     return
   }
@@ -105,6 +129,9 @@ async function setDeviceScaleFactorForMacOS(context: BrowserContext): Promise<vo
     return
   }
   options.deviceScaleFactor = 2
+}
+
+async function updateEmulatedViewportForAllPages(context: BrowserContext): Promise<void> {
   for (const page of context.pages()) {
     const delegate = (page as any)._delegate
     if (delegate?.updateEmulatedViewportSize) {
@@ -209,7 +236,9 @@ async function ensureConnection(): Promise<{ browser: Browser; page: Page }> {
   // Set up console listener for all existing pages
   context.pages().forEach((p) => setupPageConsoleListener(p))
 
-  await setDeviceScaleFactorForMacOS(context)
+  await setViewportFromBrowser({ context, wsUrl: cdpEndpoint })
+  setDeviceScaleFactorForMacOS(context)
+  await updateEmulatedViewportForAllPages(context)
 
   state.browser = browser
   state.page = page
@@ -334,7 +363,9 @@ async function resetConnection(): Promise<{ browser: Browser; page: Page; contex
   // Set up console listener for all existing pages
   context.pages().forEach((p) => setupPageConsoleListener(p))
 
-  await setDeviceScaleFactorForMacOS(context)
+  await setViewportFromBrowser({ context, wsUrl: cdpEndpoint })
+  setDeviceScaleFactorForMacOS(context)
+  await updateEmulatedViewportForAllPages(context)
 
   state.browser = browser
   state.page = page