restore viewport after screenshot, update descriptions

README.md

@@ -68,7 +68,7 @@ Navigation:
 Observe:
   text [selector]             Visible text (selector uses querySelector, default: body)
   shot [file]                 Screenshot (default: ./shot.png)
-                              Use --width/--height to resize the tab first
+                              --width/--height temporarily resize viewport for the shot
   snap                        Interactive elements via Accessibility Tree
 
 Interact:
@@ -118,8 +118,8 @@ command runs. For heavy SPAs that fetch data after mount, follow up with
 
 ### Observation
 
-`shot --width <px> --height <px>` resizes the actual tab before taking the
-screenshot, so the Chrome window you are looking at will change size.
+`shot --width <px> --height <px>` temporarily resizes the viewport to the
+given dimensions for the screenshot, then restores the original viewport.
 
 `text` calls `querySelector` — returns first match only. `text "p"` may return
 empty if the first `<p>` on the page is empty. Use a scoped selector like

src/commands/shot.ts

@@ -15,13 +15,14 @@ const getViewportSize = ({ flags }: ViewportFlagsInput) => {
     throw new Error("--width and --height must be provided together.")
   }
 
-  return { width, height }
+  return { width: width!, height: height! }
 }
 
 export const shot = async (args: string[], flags: Flags) => {
   const path = args[0] || "./shot.png"
   const viewportSize = getViewportSize({ flags })
   const { page, close } = await connect(flags.tab)
+  const originalViewport = page.viewport()
   try {
     if (viewportSize) {
       await page.setViewport(viewportSize)
@@ -29,6 +30,9 @@ export const shot = async (args: string[], flags: Flags) => {
     await page.screenshot({ path, type: "png" })
     console.log(path)
   } finally {
+    if (viewportSize && originalViewport) {
+      await page.setViewport(originalViewport)
+    }
     await close()
   }
 }

src/index.ts

@@ -35,7 +35,7 @@ Navigation:
 
 Observe:
   shot [file]           Screenshot (default: ./shot.png)
-                        Use --width/--height to resize the tab first
+                        --width/--height temporarily resize viewport for the shot
   snap                  Interactive elements with (x, y)
   text [selector]       Visible text content