Using Selenium and Symfony2 to help your frontend developers coding without risks

Since testing is one of those practices that many consider boring (unless a major catastrophe happens), you should help people is easing their job while testing.

Today I am going to show the approach that we just kickstarted, at Namshi, in order to help designers and developers testing frontend changes in a more automated, thus easier, way.

Thanks to the NamshiVoyeurBundle, it is really easy to start increasing the efficiency of your testing department, even if coders do not want to write automated tests.

The bundle, that you can use inside a Symfony2 application, is actually very small and can be extrapolated to be integrated in other frameworks (like ZF2 or Cake).

The idea is very simple: you take some screenshots of a website, deploy a new version, take another set of screenshots (at the same URLs) and then compare them, generating an image diff.

After you install the NamshiVoyeurBundle (via composer), it is really easy to start taking screenshots; you just have to configure a few services and some parameters:

Configuring the bundle
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
parameters:
    namshi_voyeur:
      browsers:
        - firefox
        - safari
        - chrome
      urls:
        homepage:     "/"
        new-arrivals: "new-products"
        women:        "women-shoes"
      shots_dir: "/Users/you/Downloads/screenshots"
      base_url:       "http://en-ae.namshi.com/"

services:
    safari:
        class:  Behat\Mink\Driver\Selenium2Driver
        calls:
          - [start]
        arguments:
          browser: safari
    firefox:
        class:  Behat\Mink\Driver\Selenium2Driver
        calls:
          - [start]
    chrome:
        class:  Behat\Mink\Driver\Selenium2Driver
        calls:
          - [start]
        arguments:
          browser: chrome

This configuration basically tells Voyeur that you will be taking screenshots of three URLs:

with safari, firefox and google chrome.

To run the Voyeur, use the cli:

1
php app/console namshi:voyeur

Screenshots will be saved at /Users/you/Downloads/screenshots.

At this point, after you deployed a new version of the code, run the Voyeur again, and you will be reay to generate the diffs between the screenshots:

1
php app/console namshi:voyeur:diff /Users/you/Downloads/screenshots/firefox/2013/03/10/1200 /Users/you/Downloads/screenshots/firefox/2013/03/10/1205

Diffs will be generated at /Users/you/Downloads/screenshots/firefox/2013/03/10/1205/diff.

That’s it: now you can start having a look at what changed and ask your developers to do the same, even on their local machine, before committing any changes.


Hi there! I recently wrote an ebook on web application security, currently sold on leanpub, the Amazon Kindle store and gumroad.

It contains 160+ pages of content dedicated to securing web applications and improving your security awareness when building web apps, with chapters ranging from explaining how to secure HTTP cookies with the right flags to understanding why it is important to consider joining a bug bounty program.

Feel free to skim through some of the free chapters published on this blog and, if the content seems interesting enough to you, grab a copy on leanpub, the Amazon Kindle store, gumroad or simply checkout right down below!

Buy the Web Application Security ebook for $9.99

In the mood for some more reading?

...or check the archives.