Protractor fullpage screenshot for Angular 8

Question

I'm trying to take a screenshot of an Angular page using protractor and mocha. We've been using protractor-screenshot-utils as a dependency and have this on the conf.js file to override the browser.takeScreenshot();

onPrepare: function() {
    global.screenShotUtils = new screenShotUtils({
      browserInstance : browser,
      setAsDefaultScreenshotMethod : true 
    });
},

Unfortunately it doesn't totally override it and I'm not able to take a full page screenshot of an angular page (it's completely working on non-angular page). The screenshot that the test is getting, is what the browser can show, not including the rest of the page which boils down to my question...

Is there any other workaround to take a whole page screenshot of an Angular page using protractor + mocha?

it won't override takescreenshot method , instead creates a new function screenShotUtils() that you can call anywhere — PDHide, May 07 '21 at 00:47
@PDHide This line setAsDefaultScreenshotMethod : true should actually override it based on the documentation. — ohlori, May 10 '21 at 18:51
Which documentation , global.function is a way of declaring a global function like take screenshot , browser etc — PDHide, May 10 '21 at 19:08
@PDHide https://www.npmjs.com/package/protractor-screenshot-utils check the bottom of the page it has a comment //this will override default browser.takeScreenshot() method to take full page image. — ohlori, May 10 '21 at 19:16
the solution will be different from case to case. Is this an option to share a url of your application so I have the html to work with? — Sergey Pleshakov, May 12 '21 at 13:36
@SergeyPleshakov I'm not sure how I can send you the link. I cannot sent it here on the comment. — ohlori, May 12 '21 at 14:00
@SergeyPleshakov you can check the disneyland homepage. That's very similar to our app. — ohlori, May 12 '21 at 14:06

score 0 · Answer 1 · answered May 10 '21 at 19:43

0

It might be your navigator, if your using chrome that has a problem. https://bugs.chromium.org/p/chromium/issues/detail?id=45209

You might use an hack to fix it

browser.driver.manage().window().setSize(320, 2000);

I recommend you to have a look here, it might help : How to take screenshot of entire page in Protractor?

answered May 10 '21 at 19:43

crg

4,284
2
29
57

This actually displays the mobile web view of our page. Not an option – ohlori May 11 '21 at 14:15
Can you actually force this to be on web view? – ohlori May 11 '21 at 14:31

score 0 · Answer 2 · answered May 12 '21 at 10:18

I had faced a similar issue earlier. I had used a custom method in C# to scroll and capture the screenshot and then stitch them. I know this could be cumbersome but does the job when it's required. The logic can work something on these lines -

You note the height, width of the web page
You check the condition if the bottom of the page has reached
You take a screenshot and save it
You scroll down by the height value
Repeat STEP NO 2

Also, there are some 3rd party libraries you can use to resolve this.

Though I do not have the script readily available with me you can review these helpful resources - protractor.screenshot.reporter.js (from this StackOverflow answer), protractor-screenshot-utils, takeFullPageScreenShot method

As listed on the description, I was using protractor-screenshot-utils already. Unfortunately it does not work on Angular 8. — ohlori, May 12 '21 at 13:57
Hey @MielYan - Can you confirm if you have tried this on - [1] Chrome with the latest version, [2] Chrome lower version (say v75), [3] Firefox? It is a possibility that the issue could be specific to a Browser + Angular 8 combination. — Xtraterrestrial, May 13 '21 at 15:12

Protractor fullpage screenshot for Angular 8

2 Answers2