CODEWITHSUNDEEP
ruby-on-railsseleniumcapybara
user
user

Reputation: 1381

Rails simulate mobile device with capybara

How i can simulate mobile device view with capybara?

my current code is

require 'spec_helper'

Capybara.register_driver :selenium do |app|
  Capybara::Selenium::Driver.new(app, :browser => :chrome)
end

feature 'User', integration: true, :js => true do
  scenario 'favorite products' do
    4.times { create(:advices) }
    category = create(:category)
    sub_category = create(:subcategory, category_id: category.id)
    brand = create(:brand, title: 'Fender')
    create(:banner, position: 1)

    visit '/'
    binding.pry
  end
end

what should i do to simulate mobile view?

Upvotes: 1

Views: 3344

Answers (5)

Fangxing
Fangxing

Reputation: 6125

Try https://github.com/renuo/so_many_devices, it's updated:

This gem provides a list of Capybara Selenium configurations that you can use. Probably useful to run your system tests on different devices.

Upvotes: 1

remo
remo

Reputation: 780

I had problem with making chrome to run in mobile emulation mode during capybara tests. If somebody has similar problem you have to change 'chromeOptions' key to 'goog:chromeOptions' in Capybara driver options, because it was changed this way in Selenium.

Upvotes: 0

Ropeney
Ropeney

Reputation: 1065

Are you looking to see what it looks like on mobile views?

You could use the #resize_to method to resize it to mobile doing something like Capybara.current_se‌​ssion.current_window.‌​resize_to(768, 480)

Found here http://www.rubydoc.info/github/jnicklas/capybara/Capybara%2FWindow%3Aresize_to

Upvotes: 1

Florent B.
Florent B.

Reputation: 42528

The Chrome driver supports mobile emulation via the mobileEmulation capability:

require 'capybara'
require 'selenium-webdriver'

Capybara.register_driver :iphone do |app|
  Capybara::Selenium::Driver.new(app,
    :browser => :chrome,
    :desired_capabilities => Selenium::WebDriver::Remote::Capabilities.chrome(
      'chromeOptions' => {
        'mobileEmulation' => {
          'deviceMetrics' => { 'width' => 360, 'height' => 640, 'pixelRatio' => 3.0 },
          'userAgent' => "Mozilla/5.0 (Linux; Android 4.2.1; en-us; Nexus 5 Build/JOP40D) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.166 Mobile Safari/535.19"
        }
      }
    )
  )
end

session = Capybara::Session.new(:iphone)
session.visit "http://stackoverflow.com/"

Upvotes: 5

slowjack2k
slowjack2k

Reputation: 2586

Here you can find an example using different driver names for different resolutions. Furthor more it uses args the change resolution and user agent. For example:

args = []
args << "–window-size=320,480"
args << "–user-agent='Mozilla/5.0 (iPhone; CPU iPhone OS 5_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A334 Safari/7534.48.3'"
Capybara::Selenium::Driver.new(app, :browser => :chrome, :args => args)

Upvotes: 3

Related Questions