Function getClip

test/e2e/doc-shots.test.ts:155–226

(
  page: Page,
  locator: Locator,
  marginRem?: number,
  frameLocator?: Locator,
)

};

const getClip = async (
  page: Page,
  locator: Locator,
  marginRem?: number,
  frameLocator?: Locator,
): Promise<{x: number; y: number; width: number; height: number}> => {
  await locator.scrollIntoViewIfNeeded();
  const box = await locator.boundingBox();
  if (box == null) {
    throw new Error('Unable to determine doc shot bounds');
  }
  const margin =
    (marginRem ?? 0) *
    (await locator.evaluate((element) =>
      parseFloat(
        getComputedStyle(element.ownerDocument.documentElement).fontSize,
      ),
    ));
  const deviceScaleFactor = await page.evaluate(() => window.devicePixelRatio);
  const frameBox = await frameLocator?.boundingBox();
  const documentBounds =
    frameBox == null
      ? await page.evaluate(() => {
          const {documentElement, body} = document;
          return {
            height: Math.max(
              documentElement.clientHeight,
              documentElement.scrollHeight,
              body?.scrollHeight ?? 0,
            ),
            width: Math.max(
              documentElement.clientWidth,
              documentElement.scrollWidth,
              body?.scrollWidth ?? 0,
            ),
            x: 0,
            y: 0,
          };
        })
      : {
          height: frameBox.height - 3,
          width: frameBox.width - 2,
          x: frameBox.x + 1,
          y: frameBox.y + 1,
        };
  const left = Math.round(Math.max(box.x - margin, 0) * deviceScaleFactor);
  const top = Math.round(Math.max(box.y - margin, 0) * deviceScaleFactor);
  const right = Math.round(
    Math.min(
      box.x + box.width + margin,
      documentBounds.x + documentBounds.width,
    ) * deviceScaleFactor,
  );
  const bottom = Math.round(
    Math.min(
      box.y + box.height + margin,
      documentBounds.y + documentBounds.height,
    ) * deviceScaleFactor,