I need to take a screenshot of an entire webpage. The trick is that I need the screenshot to include the entire contents of a single element that does not fit in the screen.
It is a single column table that has a scrollbar due to its height. It is not an IFRAME (which would be simple to load in its own tab).
The column contains formatted text and a few small images.
For long web pages that scroll, it is trivial to perform this task. But how can it be accomplished when it contains an individual element within the page that scrolls?
To be clear, I need to capture the entire page, not just the element itself.
I would like to accomplish this using Firefox on Windows.
Best Answer
My suggestion is to use the Firefox's built in feature that allows you to take screenshots of single DOM element.
Just pop open the developer tools → Find the element → Right Click and take screenshot
It didn't work on one of my internal site so cannot say it will work for all.
Update after OP's Edit:
If you intend to record full page along with whole of DOM element content as shown below, you should live edit the height of DOM element but...
It is going to push a lot of DOM elements out of viewport and screenshot or AFAIK any other tool will not capture it, which beats your purpose I think.
Read below from https://en.wikipedia.org/wiki/Screenshot
If I really had to do it your way, I would either create a GIF or take two screenshots one full page and other only of the DOM element to merge into one.