In addition to my automated unit, system and integration tests for ASP.NET projects, I like to give my customers something pretty that they can look at and visually see that the web site is behaving properly.

I use the Gallio test runner to produce a pretty HTML report, and WatiN (Web Application Testing In .NET) to test the UI and create screenshots.

I have a couple of issues with WatiN’s “CaptureWebPageToFile” method, though:

• It blew up the first (and only) time I tried it, possibly because…
• It scrolls down to capture the entire web page (I tried it on a very long page), and I usually don’t need that

Also, sometimes I don’t need a picture of the whole browser window - I just want a picture of the element that I'm testing (for example, proving that a button has the correct caption).

I wrote a WatiN screenshot saver helper class with these methods:

• SaveBrowserWindowScreenshot(Watin.Core.IE ie)  /
  SaveBrowserWindowScreenshot(Watin.Core.Element element)
  • saves a screenshot of the browser window
• SaveBrowserWindowScreenshotWithHighlight(Watin.Core.Element element)
  • saves a screenshot of the browser window, with the specified element scrolled into view and highlighted
• SaveElementScreenshot(Watin.Core.Element element)
  • saves a picture of only the specified element

The element highlighting improves on the built-in WatiN method (which just gives the element a yellow background, and makes the element pretty much unreadable when you have a light foreground color) by adding the ability to specify a HighlightCssClassName that points to a style in your site’s stylesheet.

This code is specifically for testing with Internet Explorer (‘cause that’s what I have to test with at work), but you’re welcome to take it and do with it what you want…

using System;
using System.Drawing;
using System.Drawing.Imaging;
using System.IO;
using System.Reflection;
using System.Runtime.InteropServices;
using System.Text;
using System.Threading;
using SHDocVw;
using WatiN.Core;
using mshtml;

namespace BrianSchroer.TestHelpers
{
    public static class WatinScreenshotSaver
    {
        public static void SaveBrowserWindowScreenshotWithHighlight
            (Element element, string screenshotName)
        {
            HighlightElement(element, true);
            
            SaveBrowserWindowScreenshot(element, screenshotName);

            HighlightElement(element, false);
        }
        
        public static void SaveBrowserWindowScreenshotWithHighlight(Element element)
        {
            HighlightElement(element, true);

            SaveBrowserWindowScreenshot(element);

            HighlightElement(element, false);
        }

        public static void SaveBrowserWindowScreenshot(Element element, string screenshotName)
        {
            SaveScreenshot(GetIe(element), screenshotName, SaveBitmapForCallbackArgs);
        }

        public static void SaveBrowserWindowScreenshot(Element element)
        {
            SaveScreenshot(GetIe(element), null, SaveBitmapForCallbackArgs);
        }

        public static void SaveBrowserWindowScreenshot(IE ie, string screenshotName)
        {
            SaveScreenshot(ie, screenshotName, SaveBitmapForCallbackArgs);
        }

        public static void SaveBrowserWindowScreenshot(IE ie)
        {
            SaveScreenshot(ie, null, SaveBitmapForCallbackArgs);
        }

        public static void SaveElementScreenshot(Element element, string screenshotName)
        {
            // TODO: Figure out how to get browser window "chrome" size and not have to go to full screen:
            var iex = (InternetExplorerClass) GetIe(element).InternetExplorer;
            bool fullScreen = iex.FullScreen;
            if (!fullScreen) iex.FullScreen = true;

            ScrollIntoView(element);

            SaveScreenshot(GetIe(element), screenshotName, args => 
                SaveElementBitmapForCallbackArgs(element, args));

            iex.FullScreen = fullScreen;
        }

        public static void SaveElementScreenshot(Element element)
        {
            SaveElementScreenshot(element, null);
        }

        private static void SaveScreenshot(IE browser, string screenshotName, 
            Action<ScreenshotCallbackArgs> screenshotCallback)
        {
            string fileName = string.Format("{0:000}{1}{2}.jpg", 
                ++_screenshotCount,
                (string.IsNullOrEmpty(screenshotName)) ? "" : " ",
                screenshotName);

            string path = Path.Combine(ScreenshotDirectoryName, fileName);

            Console.WriteLine();
            // Gallio HTML-encodes the following display, but I have a utility program to
            // remove the "HTML===" and "===HTML" and un-encode the rest to show images in the Gallio report:
            Console.WriteLine("HTML===<div><b>{0}:</br></b><img src=\"{1}\" /></div>===HTML",
                screenshotName, new Uri(path).AbsoluteUri);

            MakeBrowserWindowTopmost(browser);

            try
            {
                var args = new ScreenshotCallbackArgs
                {
                    InternetExplorerClass = (InternetExplorerClass)browser.InternetExplorer,
                    ScreenshotPath = path
                };

                Thread.Sleep(100);

                screenshotCallback(args);
            }
            catch (Exception ex)
            {
                Console.WriteLine(ex.Message);
            }
        }

        public static void HighlightElement(Element element, bool doHighlight)
        {
            if (!element.Exists) return;

            if (string.IsNullOrEmpty(HighlightCssClassName))
            {
                element.Highlight(doHighlight);
                return;
            }

            string jsRef = element.GetJavascriptElementReference();
            if (string.IsNullOrEmpty(jsRef)) return;
            
            var sb = new StringBuilder("try { ");

            sb.AppendFormat(" {0}.scrollIntoView(false);", jsRef);

            string format = (doHighlight)
                ? "{0}.className += ' {1}'"
                : "{0}.className = {0}.className.replace(' {1}', '')";

            sb.AppendFormat(" " + format + ";", jsRef, HighlightCssClassName);

            sb.Append("} catch(e) {}");

            string script = sb.ToString();

            GetIe(element).RunScript(script);
        }

        public static void ScrollIntoView(Element element)
        {
            string jsRef = element.GetJavascriptElementReference();
            if (string.IsNullOrEmpty(jsRef)) return;

            var sb = new StringBuilder("try { ");
            sb.AppendFormat(" {0}.scrollIntoView(false);", jsRef);
            sb.Append("} catch(e) {}");

            string script = sb.ToString();

            GetIe(element).RunScript(script);
        }

        public static void MakeBrowserWindowTopmost(IE ie)
        {
            ie.BringToFront();
            SetWindowPos(ie.hWnd, HWND_TOPMOST, 0, 0, 0, 0, TOPMOST_FLAGS);
        }
        
        public static string HighlightCssClassName { get; set; }

        private static int _screenshotCount;
        private static string _screenshotDirectoryName;
        public static string ScreenshotDirectoryName
        {
            get
            {
                if (_screenshotDirectoryName == null)
                {
                    var asm = Assembly.GetAssembly(typeof(WatinScreenshotSaver));
                    var uri = new Uri(asm.CodeBase);

                    var fileInfo = new FileInfo(uri.LocalPath);
                    string directoryName = fileInfo.DirectoryName;

                    _screenshotDirectoryName = Path.Combine(
                        directoryName,
                        string.Format("Screenshots_{0:yyyyMMddHHmm}", DateTime.Now));

                    Console.WriteLine("Screenshot folder: {0}", _screenshotDirectoryName);

                    Directory.CreateDirectory(_screenshotDirectoryName);
                }

                return _screenshotDirectoryName;
            }

            set
            {
                _screenshotDirectoryName = value;
                _screenshotCount = 0;
            }
        }

        [DllImport("user32.dll")]
        [return: MarshalAs(UnmanagedType.Bool)]
        private static extern bool SetWindowPos(IntPtr hWnd, IntPtr hWndInsertAfter, 
            int X, int Y, int cx, int cy, uint uFlags);
        
        private static readonly IntPtr HWND_TOPMOST = new IntPtr(-1);
        private const UInt32 SWP_NOSIZE = 0x0001;
        private const UInt32 SWP_NOMOVE = 0x0002;
        private const UInt32 TOPMOST_FLAGS = SWP_NOMOVE | SWP_NOSIZE;

        private static IE GetIe(Element element)
        {
            if (element == null) return null;

            var container = element.DomContainer;

            while (container as IE == null)
                container = container.DomContainer;

            return (IE)container;
        }

        private static void SaveBitmapForCallbackArgs(ScreenshotCallbackArgs args)
        {
            InternetExplorerClass iex = args.InternetExplorerClass;

            SaveBitmap(args.ScreenshotPath, iex.Left, iex.Top, iex.Width, iex.Height);
        }

        private static void SaveElementBitmapForCallbackArgs(Element element, ScreenshotCallbackArgs args)
        {
            InternetExplorerClass iex = args.InternetExplorerClass;

            Rectangle bounds = GetElementBounds(element);

            SaveBitmap(args.ScreenshotPath,
                iex.Left + bounds.Left,
                iex.Top + bounds.Top,
                bounds.Width,
                bounds.Height);
        }

        /// <summary>
        /// This method is used instead of element.NativeElement.GetElementBounds because that
        /// method has a bug (http://sourceforge.net/tracker/?func=detail&aid=2994660&group_id=167632&atid=843727).
        /// </summary>
        private static Rectangle GetElementBounds(Element element)
        {
            var ieElem = element.NativeElement as WatiN.Core.Native.InternetExplorer.IEElement;
            IHTMLElement elem = ieElem.AsHtmlElement;

            int left = elem.offsetLeft;
            int top = elem.offsetTop;

            for (IHTMLElement parent = elem.offsetParent; parent != null; parent = parent.offsetParent)
            {
                left += parent.offsetLeft;
                top += parent.offsetTop;
            }

            return new Rectangle(left, top, elem.offsetWidth, elem.offsetHeight);
        }

        private static void SaveBitmap(string path, int left, int top, int width, int height)
        {
            using (var bitmap = new Bitmap(width, height))
            {
                using (Graphics g = Graphics.FromImage(bitmap))
                {
                    g.CopyFromScreen(
                        new Point(left, top),
                        Point.Empty,
                        new Size(width, height)
                    );
                }

                bitmap.Save(path, ImageFormat.Jpeg);
            }
        }

        private class ScreenshotCallbackArgs
        {
            public InternetExplorerClass InternetExplorerClass { get; set; }
            public string ScreenshotPath { get; set; }
        }
    }
}