I needed a software that allowed me to capture screenshots of a web application I developed. The software should do it automatically (batch capture). This way it’d save me a lot of time.
How do I used to do that?
I visited each web page I wanted to take a screenshot. It took me about 1 hour to finish the work.
I posted a question at Super User as always: Software to automate website screenshot capture and got an answer suggesting that I use a combination of a URL fetcher + Selenium capability to take screenshots.
Well, I tried Selenium (.NET bindings selenium-dotnet-2.0rc3.zip ) to test its screenshot capture feature but it doesn’t seem to fit the job because it doesn’t allow you to configure screenshot properties as size (height x width). Moreover it doesn’t work well with Ajax (requires you to write a lot of code to check for the existence of Ajax calls, etc). This kills a screenshot that needs everything in place (I mean every DOM object should be part of the screenshot). I tried the 3 drivers available: Internet Explorer, Firefox and Chrome. Screenshots taken with Internet Explorer driver were close to what I expected.
This is a sample code I used based on the code taken from here:
using System; using System.Drawing.Imaging; using System.Text; using NUnit.Framework; using OpenQA.Selenium; using OpenQA.Selenium.Chrome; using OpenQA.Selenium.Firefox; using OpenQA.Selenium.IE; using OpenQA.Selenium.Support.UI; namespace SeleniumTest { [TestFixture] public class SeleniumExample { private FirefoxDriver firefoxDriver; #region Setup [SetUp] public void Setup() { firefoxDriver = new FirefoxDriver(); } #endregion #region Tests [Test] public void DisplayReport() { // Navigate firefoxDriver.Navigate().GoToUrl("http://localhost/FitnessCenter/Report/TotalPaymentsByPeriod"); IWebElement startDate = firefoxDriver.FindElement(By.Name("StartDate")); startDate.Clear(); startDate.SendKeys("January 2011"); IWebElement generate = firefoxDriver.FindElement(By.Id("Generate")); generate.Click(); var wait = new WebDriverWait(firefoxDriver, TimeSpan.FromSeconds(5)); wait.Until(driver => driver.FindElement(By.Id("Map"))); SaveScreenShot(firefoxDriver.Title); } /// <summary> /// Saves a screenshot of the current error page /// </summary> public void SaveScreenShot(string fileName) { // Get the screenshot Screenshot screenshot = firefoxDriver.GetScreenshot(); // Build up our filename StringBuilder filename = new StringBuilder(fileName); filename.Append("-"); filename.Append(DateTime.Now.ToString("yyyy-MM-dd HH_mm_ss")); filename.Append(".png"); // Save the image screenshot.SaveAsFile(filename.ToString(), ImageFormat.Png); } #endregion #region TearDown [TearDown] public void FixtureTearDown() { if (firefoxDriver != null) firefoxDriver.Close(); } #endregion } }
Indeed, Selenium is powerful for what it does, that is, helping you automate browser interactions while you test your code. It even allows you to take a screenshot let’s say when something goes wrong (a test fail for example). That’s great and that’s what it does best. It’s a choice for every operating system since it’s an API that can be programmed against.
The following lines describe what I did to achieve my objective with Paparazzi!:
1 - Created a list of URLs I’d like to take screenshots of. Like this (one URL per line):
http://192.168.1.106/FitnessCenter/Account/ChangeCulture?lang=en&returnUrl=%2FFitnessCenter%2F
http://192.168.1.106/FitnessCenter/Student
http://192.168.1.106/FitnessCenter/Student/Create
http://192.168.1.106/FitnessCenter/Student/Edit/79
http://192.168.1.106/FitnessCenter/Student/Details/79
http://192.168.1.106/FitnessCenter/Student/Delete/79
http://192.168.1.106/FitnessCenter/Anamnesis
http://192.168.1.106/FitnessCenter/Anamnesis/Create
http://192.168.1.106/FitnessCenter/Anamnesis/Edit/79
http://192.168.1.106/FitnessCenter/Anamnesis/Details/79
.
.
.
2 - Open Paparazzi! and click the Window menu => Batch capture (really difficult to find this option 
3 - Drag and drop a text file .txt (the file that contains the URLs) to the Batch Capture window:
Here is where I think I found a limitation and it’s by design. This should definitely not happen IMHO. If you try to add a file clicking on ( + button), Paparazzi won’t let you select a text file. The only way I got it working was selecting the .txt file and then drag and dropping the file to the Batch Capture window.
4 - Configure screenshot properties by clicking the list button (see mouse cursor above it):
You can define the screenshot size. There are pre-defined values for standard screen resolutions. It allows you to define new presets.
You can also delay the capture to wait the page finish loading, etc.
There are a set of configurations available related to the batch capture functionality. To access these configurations, go to Paparazzi! menu and select Preferences:
The first configuration worth mentioning the Default Filename Format available in the General section:
Above I’m defining this format:
%t = page title
%Y = year
%m = month
%d = day
%H = hour
%M = minute
%S = second
The example in the picture is pretty clear…
Another set of configurations is available in the Batch capture section:
Here you can choose where to save the screenshots as well as the type of the images.
After configuring the batch capture session, it’s the gran finale time...
5 - Click the Play button, go take a coffee and relax while the computer does the job for you 
Hope you have found this post interesting and that it’s useful to help in documenting a little bit of this small but really powerful application.
References
Paparazzi!
http://derailer.org/paparazzi/
Screenshot 7 - Mac OS Activity Monitor after Parallels Desktop upgrade
Select the folder in Finder and drag it to iTunes icon in the dock. iTunes icon will blink. Wait a second or two. iTunes will be the active window (I consider iTunes is already open in the background before you perform this operation). Keep holding the mouse button. Now drag the folder to the Playlist section in iTunes left bar and release the mouse. As you see in the picture, I’m dragging and dropping a folder called My MP3 folder to iTunes PLAYLISTS section. When iTunes recognizes that you want to create a playlist from a folder it’ll highlight its left bar. This let’s you know that it’s time to release the mouse button and drop the folder there.
Figure 1 - Types of templates available to create an Automator workflow (Folder Action)
Figure 5 - Using a temporary folder to store DownThemAll file parts or segments
Figure 4 - Add to iTunes context menu option in Finder when right clicking a folder
