15
Headless BDD & Responsive Test Automation Shashikant Jagtap Twitter: @Shashikant86 Blogs: http://shashikantjagtap.net

Headless BDD & Responsive Test Automation

Embed Size (px)

DESCRIPTION

This talk is delivered at CukeUp 2014, London. This include using BDD tools like Behat and Cucumber with headless drivers like PhantomJS and ZombieJS.

Citation preview

Page 1: Headless BDD & Responsive Test Automation

Headless BDD & Responsive Test Automation

Shashikant JagtapTwitter: @Shashikant86

Blogs: http://shashikantjagtap.net

Page 2: Headless BDD & Responsive Test Automation

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

Page 3: Headless BDD & Responsive Test Automation

BDD Tools

● Popular BDD Tools Cucumber, Be-hat

● Web Acceptance Testing Frame-works Capybara, Mink

● Drivers Selenium, Watir, Phan-tomJS, Zombie

Page 4: Headless BDD & Responsive Test Automation

Benefits of using Headless Drivers

● Drivers with no reals Browsers PhantomJS, Zombie

● Fast ● No XVFB, VNC on Linux● Screenshots and JS Error Detec-

tion● Debugging

Page 5: Headless BDD & Responsive Test Automation

Zombie

● NodeJS● Npm● Zombie

$ brew install node

$ npm install npm

Page 6: Headless BDD & Responsive Test Automation

PhantomJS

● Headless Browser with full JavaScript Support

$ brew install phantomjs

$ phantomjs your/awesome.js

Page 7: Headless BDD & Responsive Test Automation

Setting up Headless Cucumber

● Cucumber + Capybara + Poltergi-est

● GitHub : https://github.com/team-poltergeist/poltergeist

● Demo on GitHub: https://github.com/Shashikant86/Poltergeist-Demo

● Blog:

http://shashikantjagtap.net/cu-cumber-capybara-poltergeist-rockstar-bdd-combo/

Page 8: Headless BDD & Responsive Test Automation

What's There?

● Gemfile● require 'capybara/poltergeist'● RegisterCapybara.register_driver :poltergeist do |app|

    options = {

        :js_errors => true,

    }

    Capybara::Poltergeist::Driver.new(app, options)

end

Page 9: Headless BDD & Responsive Test Automation

What You Can Do?

● Detect JS Error● Capture Network Traffic● Response Headers● Capture Screenshot● Play With Cookies● Responsive Automation

Page 10: Headless BDD & Responsive Test 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)

Page 11: Headless BDD & Responsive Test Automation

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-Zombie

● Blog

http://shashikantjagtap.net/using-zombie-js-driver-with-behats-minkextension/

Page 12: Headless BDD & Responsive Test Automation

What's There?

● Composer.json● Package.json● "behat/mink-zombie-driver": "*@dev

",● Npm ● node_modules

Page 13: Headless BDD & Responsive Test Automation

What You Can Do?

● Make Behat Scenarioes SuperFast● Response Headers● Cookies● Screenshot ? Network Traffic ? ● Stuff Coming Soon

Page 14: Headless BDD & Responsive Test Automation

Questions?

Page 15: Headless BDD & Responsive Test Automation

THANK YOU