Adding Scrolling Screenshots to the Web Test Class

In an earlier post I demonstrated how to capture scrolling web screenshots. It's very slick, though that method uses an external utility and doesn't capture the actual state of the web page during a test. The first question I got on it was "How do I capture the page during a test?"


It is possible to create a script to capture a scrolling screenshot of a web page during a test. I've extended the simple web test class to include this functionality in a new "scrollShot()" method. A snippet of the new code is below.


ScrollShot() works and it's very cool, but the code needs a little more testing before release. I'll post the new version of webTest with the scrollShot() as soon as I'm sure it won't melt down your copy of TestComplete 4.

<br />// [TestComplete jscript/javascript]<br />// Portion of new webTest class code<br />// to capture a scrolling screen shot<br />// of a web page under test.<br />scrollShot: function() {<br />var screenshot = Utils.Picture;<br />this.getViewPortInfo();<br />// Trick TC4 to create a picture large enough to hold the entire web page<br />screenshot = this.page.Picture(0, 0-this.scrollHeight, this.innerWidth, this.scrollHeight);<br />var viewOffset = 0;<br />var prevViewBottom = 0;<br />var result;<br />while (prevViewBottom < this.scrollHeight) {<br />// Copy the current web page view into the screenshot picture<br />result = addPic(screenshot, this.page.Picture(<br />0, viewOffset,<br />this.innerWidth, this.innerHeight-viewOffset),<br />0, prevViewBottom);<br />if (!result)<br />Log.Warning('addPic failed');<br />prevViewBottom = this.scrollTop + this.innerHeight;<br />this.vScroll(SB_PAGEDOWN);<br />this.getViewPortInfo();<br />viewOffset = prevViewBottom - this.scrollTop;<br />};<br />Log.Picture(screenshot, 'IE scrollShot '+this.innerWidth + 'x' + this.scrollHeight);<br />}<br />