Rails用capybara模拟移动设备

Question

如何用capybara模拟移动设备视图?

当前代码是

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

我应该做什么来模拟移动视图?

Answer 1

Chrome驱动程序通过mobileEmulation功能支持移动仿真:

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/"

Answer 2

您可以在这里找到一个使用不同驱动程序名称用于不同分辨率的示例。此外，它还使用了参数变更解析和用户代理。例如:

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)

Answer 3

你想看看它在移动视图上的样子吗?

您可以使用#resize_to方法将其调整为移动大小，执行Capybara.current_se‌​ssion.current_window.‌​resize_to(768, 480)

在此找到http://www.rubydoc.info/github/jnicklas/capybara/Capybara%2FWindow%3Aresize_to

Answer 4

试试https://github.com/renuo/so_many_devices，它已经更新了:

这个gem提供了一个可以使用的Capybara Selenium配置列表。在不同的设备上运行系统测试可能很有用。

Answer 5

在水豚测试期间，我遇到了在移动模拟模式下运行chrome的问题。如果有人有类似的问题，你必须将'chromeOptions'键更改为'goog:chromeOptions'在Capybara驱动程序选项，因为它在Selenium中以这种方式更改。