Answered

Not able to capture full webpage screenshot with scroll bar in one <div>

(0) Share

Report

Posted on by mvnagaraja

As part of some web site test automation, we need to capture screenshots of web pages where there may be a scroll bar in the one of the <div> element.
PAD's 'Take screenshot of webpage' does not capture the entire content of that <div> if there is a scroll.
Any ideas, how to get PAD do this?

Tried using a Chrome extension by sending shortcut keys using PAD's 'Send Keys' action. But the popup "Microsoft Power Automate started debugging this browser" that comes up when JS is running, cause clipping at the bottom of the screenshot.
Note: The JS runs before 'Send Keys' action takes place but the popup remains visible for few seconds.

Categories:

Power Automate Desktop

All responses (7)

Answers (1)

Sort by

Agnius Bartninkas Most Valuable Professional on at

Like
a
(0)

Report
Copy link

Link copied!

Would zooming out of the page work for you? You could try doing that to fit the whole page into the screen.

As to what you said about Send keys - I don't fully understand that. Can you share some screenshots of your flow and also what the page looks like?

-------------------------------------------------------------------------

If I have answered your question, please mark it as the preferred solution. If you like my response, please give it a Thumbs Up.

I also provide paid consultancy and development services using Power Automate. If you're interested, DM me and we can discuss it.
OkanMTL 703 Super User 2024 Season 1 on at

Like
a
(0)

Report
Copy link

Link copied!

Hi,

Not a direct solution, but you can use focus textfield in browser activity to scroll down and then take another screenshot. This works fine, but you're left with two screenshots (maybe merge them?).

Goodluck.
mvnagaraja 17 on at

Like
a
(0)

Report
Copy link

Link copied!

Zooming out wont work because there are many web pages with different amount of content. Moreover, these screenshots will be used to verify the visual UI testing like UI text overlapping, clipping etc.

About 'Send Keys' action, the Chrome extension which can take full page screenshot can be invoked using shortcut keys. These keys are sent using 'Send Keys' action. This does the job but the JS that gets invoked two steps before in the flow, results in the popup "Microsoft Power Automate started debugging this browser" and this popup message is causing clipping of the screenshot.

We use JS to decide if a particular web page has a scroll or not and decide to use either PAD's 'Take web page screenshot' action or use Chrome's extension because PAD's option is not working if there is a scroll bar.

See the attached file for sample web page layout we are working on.
mvnagaraja 17 on at

Like
a
(0)

Report
Copy link

Link copied!

This won't work as there are more than 200 web page per language and 20+ languages.
Verified answer

mvnagaraja 17 on at

Like
a
(1)

Report
Copy link

Link copied!

Found a work around for our problem.
Step 1: Run a PAD with the JS to run through all the web pages and make a list of which pages have scroll.
Step 2: Run the main PAD using input from step 1 and toggle between using PAD web page screen capture and Chrome extension screen capture between pages without scroll and pages with scroll respectively.

Step 1 just took 10 mins for ~200 web pages which is acceptable.

Simple JS to check for scroll (I am new to JS, so sourced this from google):
var element = document.getElementById('<name of the element>');
if (element.scrollHeight > element.clientHeight)
// web page has scroll
else
// web page has no scroll

Tested this on few pages using console and confirmed it works. If anyone sees a problem with this JS, please correct me.
Agnius Bartninkas Most Valuable Professional on at

Like
a
(1)

Report
Copy link

Link copied!

Thanks for sharing this. I took the liberty of setting this as the solution to this topic. Would be great if you shared your JS code, if possible, though.
mvnagaraja 17 on at

Like
a
(1)

Report
Copy link

Link copied!

I have updated my post above with JS.
Thank you Agnius and OkanAT for suggestions.