Incorrect ElementHandle.boundingBox result x and y when element has padding

[jaydenseric]

If you have an element styled so that its bounding box is at viewport coordinates x 0 and y 0:

#target {
  position: fixed;
  left: 0;
  top: 0;
  padding: 20px;
}

The ElementHandle.boundingBox result x and y incorrectly becomes the padding value, in this case 20, when they should be 0.

This is wreaking havoc with attempts to use ElementHandle.screenshot, as the screenshots are shifted off the target element bounding box by the same amount as the element's padding.

[jaydenseric]

I think instead of result.content this should be result.border, or result.padding:

astral/src/element_handle.ts

Line 150 in 348dda3

const { x, y } = getTopLeft(result.content);

Probably result.border is most correct for a screenshot, as you would expect an element's border to be in its screenshot.

[jaydenseric]

Also, It's probably incorrect to use result.width and result.height, because the actual width and height of the bounds depends on the kind of bounds (e.g. the border bounds) and the dimensions of their coordinates:

astral/src/element_handle.ts

Lines 155 to 156 in 348dda3

	width: result.width,
	height: result.height,

[jaydenseric]

Here is a temporary replacement for the buggy method ElementHandle.screenshot:

// Todo: Replace this helper function with the Astral method
// `ElementHandle.screenshot` once these issues are resolved:
// https://github.com/lino-levan/astral/issues/136
// https://github.com/lino-levan/astral/issues/137
/**
 * Scrolls an Astral page element into view and screenshots it.
 * @see https://github.com/lino-levan/astral/blob/348dda34a0abe8c5719349f3a5a3c4d70bf18a31/src/element_handle.ts#L275-L297
 * @see https://github.com/lino-levan/astral/issues/138
 * @param {Page} page Page the element is in.
 * @param {ElementHandle} element Element to screenshot.
 * @param {Omit<ScreenshotOptions, "clip">
 *   & Pick<NonNullable<ScreenshotOptions["clip"]>, "scale">} options Screenshot
 *   options.
 */
async function elementScreenshot(page, element, options) {
  await element.scrollIntoView();

  const boxModel = await element.boxModel();

  if (!boxModel) {
    throw new Error(
      "No bounding box found when trying to screenshot element.",
    );
  }

  return await page.screenshot({
    ...options,
    clip: {
      x: boxModel.border[0].x,
      y: boxModel.border[0].y,
      width: boxModel.border[2].x - boxModel.border[0].x,
      height: boxModel.border[2].y - boxModel.border[0].y,
      scale: options.scale,
    },
  });
}

It also implements the feature request #137 .

Note that this helper function could have less parameters if #138 was actioned.