Merge pull request #722 from Jamie5/partialScreenshot

Add the ability to screenshot a part of the screen

README.md

@@ -246,6 +246,7 @@ interface ScreenshotOptions {
   waitImages?: boolean;                     // default true
   omitBackground?: boolean;                 // default false
   captureBeyondViewport?: boolean;          // default true
+  clip?: { x: number; y: number; width: number; height: number } | null; // default null
 }
 ```
 
@@ -262,6 +263,7 @@ interface ScreenshotOptions {
 - `waitImages`: Deprecated. Use `waitAssets`. If set true, Storycap waits until `<img>` in the story are loaded.
 - `omitBackground`: If set true, Storycap omits the background of the page allowing for transparent screenshots. Note the storybook theme will need to be transparent as well.
 - `captureBeyondViewport`: If set true, Storycap captures screenshot beyond the viewport. See also [Puppeteer API docs](https://github.com/puppeteer/puppeteer/blob/v13.1.3/docs/api.md#pagescreenshotoptions).
+- `clip`: If set, Storycap captures only the portion of the screen bounded by x/y/width/height.
 
 ### type `Variants`
 
@@ -283,6 +285,7 @@ type Variants = {
     waitImages?: boolean;
     omitBackground?: boolean;
     captureBeyondViewport?: boolean;
+    clip?: { x: number; y: number; width: number; height: number } | null;
   };
 };
 ```

packages/storycap/src/node/capturing-browser.ts

@@ -418,6 +418,7 @@ export class CapturingBrowser extends StoryPreviewBrowser {
       fullPage: emittedScreenshotOptions.fullPage,
       omitBackground: emittedScreenshotOptions.omitBackground,
       captureBeyondViewport: emittedScreenshotOptions.captureBeyondViewport,
+      clip: emittedScreenshotOptions.clip ?? undefined,
     });
 
     let buffer: Buffer | null = null;

packages/storycap/src/shared/screenshot-options-helper.ts

@@ -12,6 +12,7 @@ const defaultScreenshotOptions = {
   variants: {},
   omitBackground: false,
   captureBeyondViewport: true,
+  clip: null,
 } as const;
 
 /**

packages/storycap/src/shared/types.ts

@@ -24,6 +24,7 @@ export interface ScreenshotOptionFragments {
   skip?: boolean;
   omitBackground?: boolean;
   captureBeyondViewport?: boolean;
+  clip?: { x: number; y: number; width: number; height: number } | null;
 }
 
 export interface ScreenshotOptionFragmentsForVariant extends ScreenshotOptionFragments {