search

theintern / visual-plugin

Visual Regression Testing for Intern
Mozilla Public License 2.0
29 stars 7 forks source link

Need helper for eniter page screenshot #4

Open vrozaev opened 7 years ago

vrozaev commented 7 years ago

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 7 years ago

I agree that this would be a good enhancement.

devpaul commented 7 years ago

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 5 years ago

@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 commented 5 years ago

@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