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
|
1 |
page.driver.network_traffic |
We can also reset and clear network traffic on any page by using mehtods
|
1 2 |
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)
|
1 2 3 |
$ mkdir poltergeist-network-traffic $ cd poltergeist-network-traffic $ vim Gemfile |
Add following Gem into your Gemfile
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
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
|
1 |
$ vim features/support/env.rb |
Add following code into your config file
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
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‘
|
1 2 3 4 5 6 7 8 9 |
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’
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
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
|
1 |
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.
|
1 |
cucumber 2> >(grep -v CoreText 1>&2) |
It will give you output like this:
|
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 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
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: