A while ago we were working on an application that had an entire version specially created for mobiles, such as the iPhone. This specific application was entirely tested with Capybara, Steak and Selenium Webdriver. Although the test suite wasn’t the fastest one in the world, the web application was very well tested, and to guarantee that we would also be testing the mobile version, we would have to simulate an iPhone user agent accessing the application.<\/p>\n
But wait, you might be thinking that we are not able to change browser headers while dealing with Selenium.\u00a0Capybara has a nice API to define new drivers and Selenium allows us to define different profiles with custom configurations for each driver. Lets see how we can put all this together to handle that:<\/p>\n
Capybara.register_driver :iphone do |app|\r\n require 'selenium\/webdriver'\r\n profile = Selenium::WebDriver::Firefox::Profile.new\r\n profile['general.useragent.override'] = \"iPhone\"\r\n\r\n Capybara::Driver::Selenium.new(app, :profile => profile)\r\nend<\/pre>\nYup, it’s that simple =). We are creating a new driver for Capybara called :iphone<\/code>, that will use Selenium with Firefox, but with a different profile, overriding the user agent string. This way you can pretend to your application that you are accessing through a “real” iPhone, by giving the “iPhone” string as user agent. You could also configure an :android<\/code> driver, for instance, by simply changing the user agent string.<\/p>\nSo now, how do we make use of that new driver in our specs? Here comes a simple example:<\/p>\n
scenario 'access phone information using a modal box', :driver => :iphone do\r\n visit root_path\r\n\r\n page.should have_no_css \"#fancybox-wrap\"\r\n page.should have_no_content \"0800 123456\"\r\n\r\n within(\"header\") { click_link \"Telefones \u00fateis\" }\r\n\r\n within(\"#fancybox-wrap\") do\r\n page.should have_content \"0800 123456\"\r\n end\r\nend<\/pre>\nWe are just passing the :driver => :iphone<\/code> option to our scenario. Remember that the latest Capybara versions use RSpec metadata options and will apply the :driver<\/code> option automatically, changing the current driver to our registered :iphone<\/code> in this case. For more info please refer to Capybara’s README<\/a>.<\/p>\nYou are now able to configure different user agents based on your application requirements, and test it in a full stack way. How about you, do you have any quick hint on how to test different user agents using another driver? Let us know in the comments \ud83d\ude42<\/p>\n
Updates (04\/04\/2014)<\/h3>\n
We were told that if you’re using Selenium Webdriver version 2.41.0, the code above will raise an exception. In order to fix that problem, you just need to replace Capybara::Driver::Selenium.new<\/code> by Capybara::Selenium::Driver.new<\/code>. Thanks Michael Joseph<\/a> for suggesting that update.<\/p>\n","protected":false},"excerpt":{"rendered":"A while ago we were working on an application that had an entire version specially created for mobiles, such as the iPhone. This specific application was entirely tested with Capybara, Steak and Selenium Webdriver. Although the test suite wasn’t the fastest one in the world, the web application was very well tested, and to guarantee … \u00bb<\/a><\/p>\n","protected":false},"author":7,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"footnotes":""},"categories":[1],"tags":[130,94,7,127,96,128],"aioseo_notices":[],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/blog.plataformatec.com.br\/wp-json\/wp\/v2\/posts\/1572"}],"collection":[{"href":"https:\/\/blog.plataformatec.com.br\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.plataformatec.com.br\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.plataformatec.com.br\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.plataformatec.com.br\/wp-json\/wp\/v2\/comments?post=1572"}],"version-history":[{"count":24,"href":"https:\/\/blog.plataformatec.com.br\/wp-json\/wp\/v2\/posts\/1572\/revisions"}],"predecessor-version":[{"id":3853,"href":"https:\/\/blog.plataformatec.com.br\/wp-json\/wp\/v2\/posts\/1572\/revisions\/3853"}],"wp:attachment":[{"href":"https:\/\/blog.plataformatec.com.br\/wp-json\/wp\/v2\/media?parent=1572"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.plataformatec.com.br\/wp-json\/wp\/v2\/categories?post=1572"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.plataformatec.com.br\/wp-json\/wp\/v2\/tags?post=1572"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}