如何在Rspec+ChromeDriver移动端测试中设置低于500px的窗口宽度

编写Rspec系统测试模拟移动端使用场景，测试响应式网页布局功能时，遇到以下问题：使用Rspec+ChromeDriver+Capybara+Selenium进行系统测试，无法将窗口宽度设置为500px以下（如374px），设置后会自动重置为500px；500px以上的自定义宽度值可正常生效。而常见移动设备的屏幕宽度通常低于500px，这导致无法准确测试移动端布局。

测试代码示例 #

# 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: 'racquel.r@example.com'
        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

当前使用技术版本 #

• Selenium webdriver gem 4.25.0
• Rspec Rails gem 7.0.1
• Capybara gem 3.40.0
• Ruby 3.3.5
• Rails 7.2.1

内容的提问来源于stack exchange，提问作者boddhisattva