I'm trying to write an RSpec system spec to test working functionality through a responsive web layout that could emulate how one would use things in a mobile.
How do I get the window size to have a width below 500px when testing responsive web layouts in mobile with Rspec + chrome driver + System tests using Capybara + Selenium
As per the common screen resolutions here, mobile devices usually have a width in pixels of less than 500. When I'm trying to specify this in the code below to resize the window to be less than 500px in width, like lets say 374px, it automatically resets the width value to be 500px and its able to take custom values above 500px.
The code for spec looks like(from here):
# frozen_string_literal: true
require 'rails_helper'
module Mobile
describe 'User sign up & sign in flow', type: :system do
describe 'Mobile User sign up flow', :mobile_dimensions do
let(:activity_day) { create(:activity_day) }
before do
page.current_window.resize_to(501, 764)
end
it 'returns error with invalid credentials. Creates a new user, returns welcome message with valid credentials' do
visit '/users/sign_up'
fill_in 'user_first_name', with: 'Racquel'
fill_in 'user_last_name', with: 'R'
fill_in 'user_email', with: '[email protected]'
fill_in 'user_password', with: 'short'
save_and_open_page
click_button 'Sign Up'
expect(page)
.to have_text("Password #{I18n.t ('activerecord.errors.models.user.attributes.password.too_short')}")
expect(User.count).to eq(0)
fill_in 'user_password', with: 'testpass768'
click_button 'Sign Up'
expect(page).to have_text("Welcome to #{I18n.t('learner')}, Racquel R")
expect(User.count).to eq(1)
end
end
end
end
I'm using:
- Selenium webdriver gem version 4.25.0
- Rspec Rails gem version 7.0.1
- Capybara gem version 3.40.0
- Ruby 3.3.5
- Rails 7.2.1
