Learning Responsive Layout Test

Let’s start learning the Responsive Layout Test. Certainly, responsive web design is not a feature these days, but rather a must. So, while implementing a responsive layout in your application. In addition, you might find helpful in adding verifications to your acceptance tests. Further, it ensures accessibility/inaccessibility to your app functionality depending on the screen size.

Moreover, Capybara has a method to resize the browser window:

Capybara.current_session.driver.browser.manage.window.resize_to(width, height)

Therefore, to cover all layout breakpoints you can create responsive helpers with required browser size and default one:

module ResponsiveHelpers

def resize_window_to_mobile

resize_window_by([640, 480])

end

 

def resize_window_to_tablet

resize_window_by([960, 640])

end

 

def resize_window_default

resize_window_by([1024, 768])

end

 

private

def resize_window_by(size)

Moreover, Capybara.current_session.driver.browser.manage.window.resize_to(size[0], size[1]) if Capybara.current_session.driver.browser.respond_to? ‘manage’

end

end

And integrate it in your test. After you run a test case, the browser window should be resized back to default size:

require “rails_helper”

RSpec.describe ‘Inboxes responsive layout’, js: true do

subject{ page }

 

describe “Up to mobile view” do

 

Also, before do

resize_window_to_mobile

end

 

 

after do

resize_window_default

end

 

describe ‘hidden inbox actions’ do

it{ is_expected.to have_selector(‘.create_inbox_form’, visible: false) }

end

 

end

 

end

Make your resume stand out and become a Certified Capybara Testing Professional. So, Try free practice tests here!

A great career is just a certification away. So, practice and validate your skills to become a Certified Capybara Testing Professional.