Question

At Interface TakesScreenshot page I found this:

Capture the screenshot and store it in the specified location. For
WebDriver extending TakesScreenshot, this makes a best effort
depending on the browser to return the following in order of
preference: – Entire page – Current window – Visible portion of the
current frame – The screenshot of the entire display containing the
browser

For WebElement extending TakesScreenshot, this makes a best effort
depending on the browser to return the following in order of
preference: – The entire content of the HTML element – The visisble
portion of the HTML element.

So I am wondering it should support capture screenshot of a webelement, but can’t find any document relate to this support by now. not sure if it really supported or not.

anybody know more details about this? Thanks.

Answer 1

The documentation would indicate that it is supported, but in practice, it does not work (at least not with the .Net bindings):

var screenshotTaker = element as ITakesScreenshot;
var image = screenshotTaker.GetScreenshot();
image.SaveAsFile(fileName, ImageFormat.Jpeg); // << null exception thrown here

There is a workaround that has worked for me – execute javascript on the page to get the location of the element:

const string javascript = "return arguments[0].getBoundingClientRect()";
var obj = (Dictionary<string, object>)((IJavaScriptExecutor)_core.Driver).ExecuteScript(javascript, element);
var rect = new Rectangle((int)double.Parse(obj["left"].ToString()),
                         (int)double.Parse(obj["top"].ToString()),
                         (int)double.Parse(obj["width"].ToString()),
                         (int)double.Parse(obj["height"].ToString()));

That will give you the location of the element within the viewport, at which point you can take a screenshot of the entire page and crop it down to just the bounds of the element.

Hopefully that helps…