Test that we can register a driver with mobile emulation

duncan-bayne · duncan-bayne · commit 9fbeb038b14b · 2025-05-14T11:40:45.000+10:00
This tests for mobile emulation by:

* Checking that text controlled by a CSS media query is / isn't
visible.

* Checking that touch input is enabled / disabled.
diff --git a/spec/features/driver_spec.rb b/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) }
diff --git a/spec/spec_helper.rb b/spec/spec_helper.rb
@@ -30,6 +30,14 @@
   Capybara::Cuprite::Driver.new(app, options)
 end
 
+Capybara.register_driver(:cuprite_mobile) do |app|
+  options = { mobile: true }
+  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)
 end
diff --git a/spec/support/views/mobile.erb b/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>
