theintern/visual-plugin

Need helper for eniter page screenshot

vrozaev opened this issue · 4 comments

vrozaev commented

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

dylans commented

I agree that this would be a good enhancement.

devpaul commented

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 scrollWidth and scrollHeight on the body.

We could support this via a command helper like we did for resizeWindow and leverage it in the configuration approach.

thedewpoint commented

@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 }) ); } });