BDD

Cucumber, Capybara and Poltergeist as Developer Tools: Network Traffic Capture

BDD with Cucumber, Capybara and Poltergeist

Cucumber is a awesome BDD tool which can be used with different web acceptance testing frameworks and different drivers. We can use BDD combination of Cucumber + Capybara + Poltergeist to automate acceptance criteria. Read my previous blog here to know more about it.

In this tutorial, we will see how we can capture network traffic of webpage and use it to check that all resources loaded correctly. We will use Poltergeist as a Capybara driver network traffic of the webpage.

Network Traffic Capture

Working as a developer it’s quite important to use developer tools to see loaded resources on the webpage. We generally use developer tools embedded in the browser. e.g Firebug for Firefox, Developer tool for Safari and Chrome OR Charles.

We can see all the network traffic for BBC website like this :

Network_traffic

This is a developer tools used with Safari 7.0.

Poltergeist and Network traffic

Poltergeist is a headless driver for capybara which uses PhnatomJS to run scenarios without popping browser window. There is a GitHub repo ‘Poltergeist-Demo‘ to see Poltergeist in an action. Poltergeist has a amazing method to inspect network traffic on the page

We can also reset and clear network traffic on any page by using mehtods

Let’s see how to test all loaded resource on the web page using Cucumber+Capybara+Poltergeist

Cucumber Project : Poltergeist-Network-Traffic

Project Setup

Let’s create new cucumber project for this demo. Open Terminal (i-Term)

Add following Gem into your Gemfile

Now, we will create configuration to register Poltergeist driver. We need to create ‘features‘ directory and ‘support‘ subdirectory and add ‘env.rb‘ file

Add following code into your config file

Now, we will create a simple feature file ‘features/home_page.feature

Now that, we need step_definitions to implement the feature. Let’s create another file with code for network traffic implementation in it. ‘features/step_definitions/step_definition.rb’

feature_steps_Sublime

Ruby version, OSX Mavericks and Poltergeist

We need to use ruby 1.9.3 for this tutorial, you can use RVM to toggle between different ruby versions. If you are using OSX Mavericks, there is a open issue which sends chatty PhantomJS output while running cucumber. We need to run ‘cucumber’ with some hack

It looks like this in my iTerm

rvm_ruby1.9.3

Run Cuke

Now lets run cucumber and see the output with list of resources loaded on the page with response code for each.

It will give you output like this:

 

Screenshot 2013-12-20 20.02.08 Screenshot 2013-12-20 20.02.17

 

 What can we do with Network Traffic

Well, Sky is the limit ! You can lots of fancy things with captured network traffic. Like

  • Check whether CSS, JS, Modules, Images loaded on the page. 
  • Check for any 404 or other error on the page
  • Check for the particular query string in the response body

Source Code on GitHub

You can find GitHub Repository ‘poltergeist-network-traffic

 Video Demo

Watch out Video Demo:

 

 

  • Alejandro Sanchez Giraldo

    this is great but I am trying to find the content of the network traffic so I can validate the google analitycs tags. Have you been able to do this using only ruby?