Enable mobile emulation

Gemfile

@@ -4,6 +4,7 @@ source "https://rubygems.org"
 
 gem "byebug", "~> 11.1", platforms: %i[mri mingw x64_mingw]
 gem "chunky_png", "~> 1.4"
+gem "ferrum", github: "radiopaedia/ferrum", branch: "94-expose-mobile"
 gem "image_size", "~> 3.0"
 gem "launchy", "~> 2.5"
 gem "pdf-reader", "~> 2.12"

README.md

@@ -27,7 +27,7 @@ Capybara.register_driver(:cuprite) do |app|
 end
 ```
 
-if you use `Docker` don't forget to pass `no-sandbox` option:
+If you use `Docker` don't forget to pass `no-sandbox` option:
 
 ```ruby
 Capybara::Cuprite::Driver.new(app, browser_options: { 'no-sandbox': nil })
@@ -64,6 +64,14 @@ end
   * `:url_blacklist` (Array) - array of regexes to match against requested URLs
   * `:url_whitelist` (Array) - array of regexes to match against requested URLs
 
+You can emulate specific devices at the time you register a driver:
+
+```ruby
+require "capybara/cuprite/devices"
+Capybara.register_driver(:cuprite) do |app|
+  Capybara::Cuprite::Driver.new(app, Capybara::Cuprite::Devices::IPHONE_14)
+end
+```
 
 ## Debugging
 

lib/capybara/cuprite/devices.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+module Capybara
+  module Cuprite
+    module Devices
+      IPHONE_14 = { window_size: [390, 844], mobile: true, scale_factor: 3 }
+    end
+  end
+end

lib/capybara/cuprite/page.rb

@@ -144,7 +144,7 @@ def prepare_page
         super
 
         width, height = @options.window_size
-        resize(width: width, height: height)
+        resize(width: width, height: height, mobile: @options.mobile)
 
         if @options.url_blacklist.any?
           network.blacklist = @options.url_blacklist

spec/features/driver_spec.rb

@@ -8,11 +8,12 @@ module Capybara
   module Cuprite
     describe Driver do
       let(:device_pixel_ratio) { @driver.device_pixel_ratio }
+      let(:mobile) { false }
 
       include Spec::Support::ExternalBrowser
 
       around do |example|
-        @session = TestSessions::Cuprite
+        @session = mobile ? TestSessions::CupriteMobile : TestSessions::Cuprite
         @driver = @session.driver
         example.run
       ensure
@@ -50,6 +51,30 @@ def session_url(path)
         driver&.quit
       end
 
+      describe "mobile emulation" do
+        context "when mobile emulation is enabled" do
+          let(:mobile) { true }
+
+          it "emulates a mobile browser" do
+            @session.visit("/cuprite/mobile")
+            expect(@session).to have_text("I am a mobile.")
+            expect(@session).to have_no_text("I am a desktop.")
+            expect(@session.evaluate_script("'ontouchstart' in window || navigator.maxTouchPoints > 0")).to be_truthy
+          end
+        end
+
+        context "when mobile emulation is disabled" do
+          let(:mobile) { false }
+
+          it "does not emulate a mobile browser" do
+            @session.visit("/cuprite/mobile")
+            expect(@session).to have_text("I am a desktop.")
+            expect(@session).to have_no_text("I am a mobile.")
+            expect(@session.evaluate_script("'ontouchstart' in window || navigator.maxTouchPoints > 0")).to be_falsy
+          end
+        end
+      end
+
       context "output redirection" do
         let(:logger) { StringIO.new }
         let(:session) { Capybara::Session.new(:cuprite_with_logger, TestApp) }

spec/spec_helper.rb

@@ -11,6 +11,7 @@
 
 require "capybara/spec/spec_helper"
 require "capybara/cuprite"
+require "capybara/cuprite/devices"
 
 require "support/test_app"
 require "support/external_browser"
@@ -29,8 +30,17 @@
   Capybara::Cuprite::Driver.new(app, options)
 end
 
+Capybara.register_driver(:cuprite_mobile) do |app|
+  options = Capybara::Cuprite::Devices::IPHONE_14
+  options.merge!(inspector: true) if ENV["INSPECTOR"]
+  options.merge!(logger: StringIO.new) if ENV["CI"]
+  options.merge!(headless: false) if ENV["HEADLESS"] == "false"
+  Capybara::Cuprite::Driver.new(app, options)
+end
+
 module TestSessions
   Cuprite = Capybara::Session.new(:cuprite, TestApp)
+  CupriteMobile = Capybara::Session.new(:cuprite_mobile, TestApp)
 end
 
 RSpec.configure do |config|

spec/support/views/mobile.erb

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Mobile test page</title>
+    <style>
+      @media (min-width: 1000px) {
+        .desktop { display: block; }
+        .mobile { display: none; }
+      }
+
+      @media (max-width: 999px) {
+        .desktop { display: none; }
+        .mobile { display: block; }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="desktop">
+      I am a desktop.
+    </div>
+
+    <div class="mobile">
+      I am a mobile.
+    </div>
+  </body>
+</html>