Screenshoot of elements in scrolled page doesn't work properly

[vachix]

Hello, it looks like the problem is the Chrome DevTools Protocol for screenshot expects a position of element relative to the root document, but the dom.GetBoxModel() method returns a position relative to the viewport. Here is my quick fix works for me 0763802

What versions are you running?

github.com/chromedp/chromedp v0.7.3
Version 91.0.4472.77 (Official Build) (64-bit)
go version go1.16.4 windows/amd64

What did you do? Include clear steps.

var buf []byte
if err := chromedp.Run(ctx, chromedp.Screenshot([]cdp.NodeID{node.NodeID}, &buf, chromedp.ByNodeID)); err != nil {
	log.Fatal(err)
}
if err := ioutil.WriteFile(filepath.Join(itemPath, `list_item.png`), buf, 0o644); err != nil {
	log.Fatal(err)
}

What did you expect to see?

Screenshoot of my element

What did you see instead?

Screenshot of another part of page

[ZekeLu]

@vachix Thanks for the sharing! Would you like to send a PR?

Things to note:

1. The Protocol Monitor shows that the Capture node screenshot command uses a javascript function to get the clip of the element (using the command Runtime.callFunctionOn):

   function () {
       const e = this.getBoundingClientRect(), t = this.ownerDocument.documentElement.getBoundingClientRect();
       return JSON.stringify({x: e.left - t.left, y: e.top - t.top, width: e.width, height: e.height, scale: 1})
   }

   I think we can do the same here.
2. When the element is outside the viewport, "captureBeyondViewport":true is required. And the the Capture node screenshot command adds "fromSurface":true too. I don't know what this option for. Maybe we should add it too.
3. We need a test case to cover it (I don't know how as of now. Maybe do something like this in go: https://github.com/puppeteer/puppeteer/blob/943477cc1eb4b129870142873b3554737d5ef252/test/golden-utils.js#L39).
4. The screenshot function does not work properly when the target element is in an iframe. Maybe we should report it to Chromium.

It seems there is a lot to do. So it's okay if you don't want to work on it.

Thank you very much!

------8<------

Update: I found this document: Viewport bounds and scale for screenshots

[ZekeLu]

@vachix I'm going to work on this issue. Thank you!

[ZekeLu]

@vachix I have just pushed some commits to my forked repository (https://github.com/zekelu/chromedp/). Can you clone the repository and checkout the screenshot branch, then use the replace directive in go.mod to test whether this issue has been addressed? Thank you!

[ZekeLu]

Status update (in #863):

1. using the command Runtime.callFunctionOn to get the clip of the element: done
2. parameters for Page.captureScreenshot:
   • "captureBeyondViewport":true: done
   • "fromSurface":true: it defaults to true, no change required
3. https://github.com/orisano/pixelmatch is used to compare images.
4. This issue has been reported by someone else: https://bugs.chromium.org/p/chromium/issues/detail?id=1111398