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 :

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

page.driver.network_traffic

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

page.driver.clear_network_traffic
page.driver.reset

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)

$ mkdir poltergeist-network-traffic
$ cd poltergeist-network-traffic
$ vim Gemfile

Add following Gem into your Gemfile

source :rubygems
gem "sinatra"
gem "shotgun"
gem 'json'
gem "capybara"
gem "cucumber"
gem "rspec", :require => "spec"
gem "parallel_tests", "~> 0.12"
gem "poltergeist"
gem "selenium-webdriver"
gem "rest-client"
gem "json_pure"
gem 'nokogiri', '~> 1.6.0'

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

$ vim features/support/env.rb

Add following code into your config file

require "Capybara"
require "Capybara/cucumber"
require "rspec"
require 'capybara/poltergeist'

Capybara.default_driver = :poltergeist
Capybara.register_driver :poltergeist do |app|
    options = {
        :js_errors => true,
        :timeout => 120,
        :debug => false,
        :phantomjs_options => ['--load-images=no', '--disk-cache=false'],
        :inspector => true,
    }
    Capybara::Poltergeist::Driver.new(app, options)
end

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

Feature: Network traffic with all resources with Poltergeist
  In order to expolre poltergeist functionality
  As a capybara and poltergeist user
  I want to see the if it can load all resources using

Scenario: View home page and list all loaded resources
  Given I am on the BBC home page
  When I called network traffic using Poltergeist
  Then I should see list of all resources loaded after a web page document has started to load

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’

Given(/^I am on the BBC home page$/) do
  visit "http://www.bbc.co.uk/programmes/a-z"
end

When(/^I called network traffic using Poltergeist$/) do
end

Then(/^I should see list of all resources loaded after a web page document has started to load$/) do
  page.driver.network_traffic.each do |request|
  request.response_parts.uniq(&:url).each do |response|
    puts "\n Responce URL #{response.url}: \n Status #{response.status}"
  end
end
end

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

cucumber  2> >(grep -v CoreText 1>&2)

It looks like this in my iTerm

Run Cuke

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

cucumber  2> >(grep -v CoreText 1>&2)

It will give you output like this:

shashimacpro:poltergeist-network-traffic user$ cucumber  2> >(grep -v CoreText 1>&2)
/Users/user/.rvm/gems/ruby-1.9.3-p194/gems/bundler-1.3.4/lib/bundler/runtime.rb:216: warning: Insecure world writable dir /Users/user in PATH, mode 040777
Feature: Network traffic with all resources with Poltergeist
  In order to expolre poltergeist functionality
  As a capybara and poltergeist user
  I want to see the if it can load all resources using

  Scenario: View home page and list all loaded resources                                         # features/home_page.feature:8
2013-12-21 22:21:25.893 phantomjs[1429:507] Can't open input server /Library/InputManagers/Safari140
    Given I am on the BBC home page                                                              # features/step_definitions/step_definition.rb:1
    When I called network traffic using Poltergeist                                              # features/step_definitions/step_definition.rb:5
    Then I should see list of all resources loaded after a web page document has started to load # features/step_definitions/step_definition.rb:11

       Responce URL http://www.bbc.co.uk/programmes/a-z:
       Status 200

       Responce URL http://static.bbci.co.uk/frameworks/requirejs/0.13.1/sharedmodules/require.js:
       Status 200

       Responce URL http://static.bbci.co.uk/frameworks/barlesque/2.59.1/orb/4/style/orb.css:
       Status 200

       Responce URL http://static.bbci.co.uk/modules/plugin/favourite/1.1.15/1_1_15/style/favourite.min.css:
       Status 200

       Responce URL http://static.bbci.co.uk/modules/personalisation/0.8.2/style/dialog.css:
       Status 200

       Responce URL http://static.bbci.co.uk/frameworks/barlesque/2.59.1/orb/4/script/orb/api.min.js:
       Status 200

       Responce URL http://static.bbci.co.uk/gelstyles/0.5.0/style/core.css:
       Status 200

       Responce URL http://www.bbc.co.uk/modules/branding/css/0_9_0/programmes_default-1377003249.css:
       Status 200

       Responce URL http://static.bbci.co.uk/programmes/2.74.0/styles/global.css:
       Status 200

       Responce URL http://www.live.bbc.co.uk/frameworks/fig/1/fig.js:
       Status 200

       Responce URL http://static.bbci.co.uk/frameworks/barlesque/2.59.1/orb/4/script/vendor/edr.js:
       Status 200

       Responce URL http://tps.bbc.com/wwscripts/data:
       Status 200

       Responce URL http://static.bbci.co.uk/frameworks/barlesque/2.59.1/orb/4/script/orb.js:
       Status 200

1 scenario (1 passed)
3 steps (3 passed)
0m5.678s

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:

Introducing SuperOptiX AI: The King of Agent Frameworks is Here

Super-Agentic AI Blog

Design Safe AI Agents. Elevate Agent Experience.

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