Headless BDD & Responsive Test
Automation
Shashikant Jagtap
Twitter: @Shashikant86
Blogs: http://shashikantjagtap.net
Topics
 How BDD Tools Work
 Headless Drivers, BDD and Benefits
 Behat+Zombie &
Cucumber+Poltergeist
 Demo
Cucumber+Capybara+Poltergeist
 Demo
Behat+Mink+Zombie+PhantomJS
 Responsive Automation
BDD Tools
 Popular BDD Tools Cucumber, Behat
 Web Acceptance Testing Frameworks
Capybara, Mink
 Drivers Selenium, Watir, PhantomJS,
Zombie
Benefits of using Headless Drivers
 Drivers with no reals Browsers
PhantomJS, Zombie
 Fast
 No XVFB, VNC on Linux
 Screenshots and JS Error Detection
 Debugging
Zombie
 NodeJS
 Npm
 Zombie
$ brew install node
$ npm install npm
PhantomJS
 Headless Browser with full JavaScript
Support
$ brew install phantomjs
$ phantomjs your/awesome.js
Setting up Headless Cucumber
 Cucumber + Capybara + Poltergiest
 GitHub :
https://github.com/teampoltergeist/polt
ergeist
 Demo on GitHub:
https://github.com/Shashikant86/Poltergeis
 Blog:
http://shashikantjagtap.net/cucumber-
capybara-poltergeist-rockstar-bdd-
What's There?
 Gemfile
 require 'capybara/poltergeist'
 Register
Capybara.register_driver :poltergeist do |app|
options = {
:js_errors => t rue,
}
Capybara::Poltergeist::Driver.new(app, options)
end
What You Can Do?
 Detect JS Error
 Capture Network Traffic
 Response Headers
 Capture Screenshot
 Play With Cookies
 Responsive Automation
Responsive Test Automation
 Define ViewPort
window_sizes = {
       :'320' => { :width => 320, :height => 480 },
     :'1026' => { :width => 1026, :height => 1200 },
       }
 Capybara.current_session.driver.resize(width, height)
Setting up Headless Behat
 Behat + Mink + Zombie
 Zombie On GitHub
https://github.com/assaf/zombie
 Behat + Mink + Zombie Demo on GitHub
https://github.com/Shashikant86/Behat-Zomb
 Blog
http://shashikantjagtap.net/using-zombie-
js-driver-with-behats-minkextension/
What's There?
 Composer.json
 Package.json
 "behat/mink-zombie-driver": "*@dev",
 Npm
 node_modules
What You Can Do?
 Make Behat Scenarioes SuperFast
 Response Headers
 Cookies
 Screenshot ? Network Traffic ?
 Stuff Coming Soon
Questions?
THANK YOU

Headless BDD & Responsive Test Automation

  • 1.
    Headless BDD &Responsive Test Automation Shashikant Jagtap Twitter: @Shashikant86 Blogs: http://shashikantjagtap.net
  • 2.
    Topics  How BDDTools Work  Headless Drivers, BDD and Benefits  Behat+Zombie & Cucumber+Poltergeist  Demo Cucumber+Capybara+Poltergeist  Demo Behat+Mink+Zombie+PhantomJS  Responsive Automation
  • 3.
    BDD Tools  PopularBDD Tools Cucumber, Behat  Web Acceptance Testing Frameworks Capybara, Mink  Drivers Selenium, Watir, PhantomJS, Zombie
  • 4.
    Benefits of usingHeadless Drivers  Drivers with no reals Browsers PhantomJS, Zombie  Fast  No XVFB, VNC on Linux  Screenshots and JS Error Detection  Debugging
  • 5.
    Zombie  NodeJS  Npm Zombie $ brew install node $ npm install npm
  • 6.
    PhantomJS  Headless Browserwith full JavaScript Support $ brew install phantomjs $ phantomjs your/awesome.js
  • 7.
    Setting up HeadlessCucumber  Cucumber + Capybara + Poltergiest  GitHub : https://github.com/teampoltergeist/polt ergeist  Demo on GitHub: https://github.com/Shashikant86/Poltergeis  Blog: http://shashikantjagtap.net/cucumber- capybara-poltergeist-rockstar-bdd-
  • 8.
    What's There?  Gemfile require 'capybara/poltergeist'  Register Capybara.register_driver :poltergeist do |app| options = { :js_errors => t rue, } Capybara::Poltergeist::Driver.new(app, options) end
  • 9.
    What You CanDo?  Detect JS Error  Capture Network Traffic  Response Headers  Capture Screenshot  Play With Cookies  Responsive Automation
  • 10.
    Responsive Test Automation Define ViewPort window_sizes = {        :'320' => { :width => 320, :height => 480 },      :'1026' => { :width => 1026, :height => 1200 },        }  Capybara.current_session.driver.resize(width, height)
  • 11.
    Setting up HeadlessBehat  Behat + Mink + Zombie  Zombie On GitHub https://github.com/assaf/zombie  Behat + Mink + Zombie Demo on GitHub https://github.com/Shashikant86/Behat-Zomb  Blog http://shashikantjagtap.net/using-zombie- js-driver-with-behats-minkextension/
  • 12.
    What's There?  Composer.json Package.json  "behat/mink-zombie-driver": "*@dev",  Npm  node_modules
  • 13.
    What You CanDo?  Make Behat Scenarioes SuperFast  Response Headers  Cookies  Screenshot ? Network Traffic ?  Stuff Coming Soon
  • 14.
  • 15.