When the site you're working with gets big, it's time consuming to manually reload all the URLs in order to verify that they still load and look like they should. With a few lines of automation code, your script can load and take screenshots of your pages while you are doing another task. And the good thing is, by adjusting Windows File Explorer to preview each screenshot image, you can quickly verify hundreds or even thousands of pages.
This step-by-step tutorial shows you how.

What you'll need

1 - Any version of Visual Studio

2 - Selenium Webdriver

3 - PhantomJS

The steps below show you how to install Webdriver and PhantomJS using Visual Studio and NuGet after the project is created.

How To

Instead of following the command line approach, we're going to be using the Visual Studio built-in unit testing framework. In this case, we also need Webdriver to be installed.
1 - Run Visual Studio.
2 - Create a new Project.
3 - Select Unit Test Project.
4 - Write the desired name and click on OK.

Taking screenshots using Webdriver with PhantomJS - Image 1

The UnitTest1 class is created and the code is loaded into the editor.

Unit Test class is shown

Using NuGet to install the necessary parts

Let's ask NuGet to add the other software we need.

5 - In Visual Studio, click on Tools -> NuGet Package Manager -> Manage NuGet Packages for Solution:


6 - Click on the Browse tab.
7 - Search for Webdriver.
8 - Install Selenium.WebDriver.
9 - Also install Selenium.Support.

Search tools with Nuget

10 - Do the same for PhantomJS.

Installing PhantomJS

11 - Click on the tab with UnitTest1.cs and modify the code adding:

* at the top:

using Microsoft.VisualStudio.TestTools.UnitTesting;
using OpenQA.Selenium.PhantomJS;
using System.Drawing.Imaging;
using OpenQA.Selenium;
using System.Linq;

* inside the test method:
PhantomJSDriver driver = new PhantomJSDriver();
driver.Manage().Window.Size = new System.Drawing.Size(1440, 1000);
((ITakesScreenshot)driver).GetScreenshot().SaveAsFile(@"c:\tmp\img1.jpg", ImageFormat.Jpeg);
Code to screenshot one page

12 - On your computer, create a folder named tmp in the c: driver where the screenshots will be saved.

13 - Run the test by pointing the mouse arrow inside TestMethod1 and selecting Run Tests (or use Ctrl+R, T).

When run for the first time, the Windows Firewall may block the PhantomJS service. In this case, allow access.

PhantomJS asking to open firewall

Inside c:\tmp you should have the screenshot.

Screenshot taken

How to make the code work hard for you

One common QA scenario is when you need to verify that a list of URLs is correctly loading and rendering.
Instead of loading by hand or clicking on each URL, you can create a unit test with a list to store them, screenshot them all, and quickly browse the images looking for broken pages, missing layouts, etc.

To accomplish this, add the following test method to your class.

   public void TestMethod2()
          string[] urls =
            PhantomJSDriver driver = new PhantomJSDriver();
            driver.Manage().Window.Size = new System.Drawing.Size(1440, 1000);
            for (int conta = 0; conta < urls.Count(); conta++)
                ((ITakesScreenshot)driver).GetScreenshot().SaveAsFile(@"c:\tmp\site-" + conta + ".jpg", ImageFormat.Jpeg);
Run the test and you should now have the following images in the C:\tmp folder:

More screeshots inside c:\tmp       
Things get interesting when you have many pages and need to verify all of them after each new site deployment.

Important note: sometimes PhantomJS does not represent a page correctly. You can use Chrome, Firefox or IE instead of it. Or, you can use all of them, but the screenshot process is a little more difficult, because the height of the page should be set in advance or you need to programmatically scroll the page, take screenshots and stitch together the resulting images. In my experience though, you can catch many problems using PhantomJS.

comments powered by Disqus