How to screenshot a particular element?

[lofti198]

I have and xpath (or another selector type) of element and I need to make a screenshot of this element after page is rendered and save it to any format I can use later to manipulate with the screenshot. What is the general approach for this?

[amaitland]

Screenshots are primarily captured using Page.captureScreenshot (DevTools protocol).

You should be able to use the clip param to only capture a specific region.

1. Directly using CDP

• CefSharp/CefSharp.Example/DevTools/DevToolsExtensions.cs

  Line 20 in 2cb81aa

  using (var devToolsClient = chromiumWebBrowser.GetDevToolsClient())

2. Using CefSharp.Dom
   Alternatively you can probably use https://github.com/cefsharp/CefSharp.Dom which should support capturing a specific DOM element.

• https://github.com/cefsharp/CefSharp.Dom/blob/main/lib/PuppeteerSharp/ElementHandle.cs#L127