How to test mobile responsive layout using Ruby on Rails 8 and RSpec System Tests

07 Oct 2024

The below Rspec code shows testing the navigation to the sign up page using the mobile’s burger menu(see below screenshots)
- Post running the mobile spec(s), one needs to resize to normal window size defaults for running other web app tests
The Rails 8 app with the below code is available here
- Update: Reverted Rails 8 app related deploy on render.com as some new dependencies don’t work currently with Rails 8.0.0.beta1. More details here

# frozen_string_literal: true

require 'rails_helper'

module Mobile
  describe 'User sign up flow', type: :system do
    describe 'Mobile User sign up flow' do
      let(:activity_day) { create(:activity_day) }

      before do
        page.current_window.resize_to(501, 764) # Resize window to a size similar to that of mobile devices
      end

      after do
        page.current_window.resize_to(1200, 815) # Resize to normal window size defaults
      end

      it 'can access mobile sign up page via burger menu' do
        visit root_path

        find(".navbar-burger").click
        click_on I18n.t("shared.navbar.sign_up")

        expect(page).to have_current_path(new_user_registration_path)
      end
    end
  end
end

Mobile Screenshots

App home page on Mobile

Mobile responsive layout app homepage with Rails 8

Sign Up button shows on clicking the mobile burger menu
Sign up page on Mobile