RSpec・Capybaraを使用した、jQueryの自動スクロール(scrollTop)のテスト方法

Question

前提・実現したいこと

Rails(devise)で作成した新規登録のformに、jQueryでエラーメッセージの表示とその箇所への自動スクロール機能を実装しました。
0. 未入力のままtext_fieldからフォーカスが外れるとエラーメッセージが表示される
0. そのまま新規登録しようとすると、submitは中断され、エラーメッセージがウィンドウ中央になるように自動でスクロールされる。

この機能をsystem specでテストしようと思ったのですが、記述方法が分からずうまくいきません。アドバイスいただけないでしょうか。

該当のソースコード

.new-user-title
    新規登録

  .new-user-form
    = form_for(resource, as: resource_name, url: registration_path(resource_name), html: {id: 'new-user'}) do |f|

      .new-user-employee
        = f.label :employee_id, '社員ID', class: 'new-user-employee__title-label'
        = f.text_field :employee_id, autocomplete: "username", id: 'user-employee', class: 'new-user-employee__input-text'

     ------------------- (中略) -------------------

      .new-user-actions
        = f.submit "新規登録", class: 'user-register-button'

(document).on('turbolinks:load', function(){
  $('#user-employee').blur(function(){
    if ($(this).val() == '') {
      $(this).before(`<div id='presence-error' class='error-message'>社員IDを入力してください</div>`);
      $(this).addClass('error-frame');
    };
  });

  $('#new-user').submit(function() {
    if ($('div').hasClass('error-message')) {
      let errorPosition = $('.error-message').offset().top
      let whindowHalf = $(window).height() / 2
      $('html, body').animate({scrollTop:(errorPosition - whindowHalf)})
      return false;
    };
  });
});

RSpec.describe 'Users', type: :system do
  describe '新規登録', js: true do
    it '新規登録ボタンを押した時、エラー箇所まで自動スクロールされること' do
      fill_in 'user[employee_id]', with: ''
      click_on '新規登録'
      expect(page).to have_content '社員IDを入力してください'
    end
  end
end

上記の状態でRSpecを実行すると、jQueryの.submitの記述があってもなくてもテストが通ってしまいます。

試したこと

• GitHub/Capybaraを参考に、page.save_screenshot('screenshot.png')でスクリーンショットを確認すると、ページ全体がブラウザ画面に収まってしまっていた。そこで、page.driver.browser.manage.window.resize_to(500, 100)をRSpecに追加し、ウィンドウのサイズを縮小。

=> 変化なし [原因] rspec + capybaraのpageの中身 - xengineer's diaryを参考にputs page.bodyでpageの中身を確認すると、hamlのbody全てが対象になっていました。

• ecpect(page).to have_contentのpage部分を現在ウィンドウで表示されている場所にすればいいと考えググってみる。

=> 見つかりませんでした。

補足情報（FW/ツールのバージョンなど）

rails (6.0.3.2)
ruby (2.7.1)
rspec-rails (4.0.1)
capybara (3.33.0)
selenium-webdriver (3.142.7)

Answer 1

スクロールすることを確かめたいのであれば、

page.execute_script('window.scroll(0, 1000)') # 適当なところにスクロール位置セットしておく
click_on '新規登録'
# sleep 1 スクロールに時間かかるだろうなので、適宜 sleep や待ち合わせるメソッドが必要かも
scrollY = page.evaluate_script('window.pageYOffset') # スクロール位置取得
# scrollY = page.evaluate_script('document.documentElement.scrollTop')
expect(scrollY).to eq(0) # 望む位置になっているか

Comments

[yukihide1188]

ありがとうございます。

sleep 1 を設定したら、スクリーンショット上ではうまく動いているようなのですが、
やはりテストではjQuerynの記述があってもなくても結果が同じになってしまいます。

page.driver.browser.manage.window.resize_to(1000, 300)
fill_in 'user[employee_id]', with: ''
page.execute_script('window.scroll(0, 1000)')
scrollY_b = page.execute_script('window.pageYOffset').to_i
click_on '新規登録'
sleep 1
scrollY = page.execute_script('window.pageYOffset').to_i
expect(scrollY).to eq(0)

試しに　scrollY = page.execute_script('window.pageYOffset').to_i　をいろいろな位置に置いてみたのですが、全て値は０でした。
(　scrollY = page.execute_script('window.pageYOffset')　とすると、　scrollY => nill　となってしまったため、　.to_i　を付けました)

[unhappychoice]

失礼しました、 execute_script は値を返さないようなので、 evaluate_script でどうでしょうか

[yukihide1188]

できました！ありがとうございます！！

it '新規登録ボタンを押した時、エラー箇所まで自動スクロールされること' do
page.driver.browser.manage.window.resize_to(1000, 300)
fill_in 'user[employee_id]', with: ''
click_on '新規登録'
sleep 1
errorCenterPosition = page.evaluate_script('Math.floor($(".error-frame").offset().top - ($(window).height() / 2))')
scrollY = page.evaluate_script('window.pageYOffset')
expect(scrollY).to eq(errorCenterPosition)
end

最終的にこんな感じになりました。本当にありがとうございました。