【Rspec】systemスペックで画面外の表示されていない要素をクリックする方法

systemスペックを書いているときに、入力項目を全部記入して送信ボタンを押そうと思ったらボタンが画面外にあってクリックできない！というときの対処法です。基本的にはどれも表示させてからクリックする形になります。

画面をスクロールする

こちらはよくある方法で、任意の場所で画面をスクロールさせることで要素を表示させる方法です。

require 'capybara/rspec'

describe "Clicking a button outside the viewport" do
  it "clicks the button" do
    visit '/your_page_with_button'
    
    # ページの下までスクロール
    page.execute_script("window.scrollTo(0, document.body.scrollHeight)")
    
    # ボタンが表示されるまで待機
    find('your_button_selector').click
    
    # ボタンがクリックされたことを確認するアサーションを追加
    expect(page).to have_content 'Button clicked'
  end
end

上記コードの page.execute_script("window.scrollTo(0, document.body.scrollHeight)") この部分が該当のコードです。

画面サイズを広げておく

こちらはそもそも最初から画面サイズを広げておく方法です。私はこちらの方が都度指定する必要がなくなるので良いのではないかな？と思っています。

before do
	page.driver.browser.manage.window.resize_to(1200, 1000)
end

上記は拡張が必要なファイルで before を使って事前に画面サイズを広げています。もしsystemスペックでは常に画面サイズを広げた状態で行って欲しい場合は、 rails_helper.rb で設定しておくのが便利です。

RSpec.configure do |config|
	# windowサイズを1200x1000に設定
  config.before(:each, type: :system) do
    Capybara.current_session.driver.browser.manage.window.resize_to(1200, 1000)
  end
end

以上です。