Repository navigation
Need helper for eniter page screenshot #4
Description
Hello!
Right now intern-visual can make a screenshot for part of the page. It can be nice to have some API for making screenshot of entire page. Now I should do something like that - scroll page manually and take several screenshots.
It's is not comfortable - I must get page height, browser window height and then N times make screenshots. Of course, I can write these code, but in my huble opinion intern-visual should have some helper for that.
Here is a demo-branch with a long page:
https://github.com/rozaev/intern-visual-demo/tree/how-to-make-screenshot-for-entire-page
Activity
dylans commentedon Feb 18, 2017
I agree that this would be a good enhancement.
devpaul commentedon Apr 4, 2017
The takeScreenshot, scroll, and stitch approach can be problematic in that any fixed element will be repeated in each screenshot. A better approach, if possible, would be to maximize the browser so its dimensions matched
scrollWidthandscrollHeighton the body.We could support this via a command helper like we did for resizeWindow and leverage it in the configuration approach.
thedewpoint commentedon Apr 10, 2019
@devpaul I'm trying to do a fullpage screenshot and I'm very close. I went to the page and manually calculated the scrollheight and scrollwidth of the dom and passed those values into the resize helper and it worked (got a full size screenshot). Now I'm trying to make that more dynamic by using execute to calculate the scrollheight and width for me, but I'm struggling to do it correctly. Can you take a look at my below code and give me your thoughts? It seems like either the resize isn't being triggered or the values are not being passed correctly.
Thank you!
registerSuite('homepage', { 'homepage'() { return this.remote.get('mypageurl') .setWindowPosition(0,0) .maximizeWindow() .execute(() => [document.documentElement.scrollWidth, document.documentElement.scrollHeight]) .then(([width, height]) => { return helpers.resizeWindow(width, height) }) .takeScreenshot() .then( assertVisuals(this, { missingBaseline: 'snapshot', regenerateBaselines: true }) ); } });thedewpoint commentedon Apr 11, 2019
@vrozaev @devpaul I figured out how to do full page screenshots with the below
https://stackoverflow.com/questions/55634813/how-to-pass-value-from-execute-to-another-command-using-intern-and-leadfoot/55636423#55636423