HTML5のフォームバリデーションメッセージをテストする

4997 ワード
HTML5 RSpec selenium-webdriver Capybara Selenium HTML5 テキストリンク

経緯

phantomjsがメンテされないこともあり、capybaraのドライバーをpoltergeistからchrome(headless)に移行しました。
移行についてはこの記事がよくまとまっていました。感謝
RSpec の feature spec でヘッドレス Chrome を使う - Speee DEVELOPER BLOG

APIの修正（.trigger('click')→.clickなど）をすればいいかなーと思っていたら、HTML5のフォームバリデーションが有効になったおかげ？で、一部のfeatureテストが通らなくなりました。

不正値のfeature specが通らなくなる

今まではフォームに不正値を入力して送信ボタンを押下した場合、アプリケーション側（rails）でバリデーションして、その結果を検証していました。

こういうやつ 

context 'emailのフォーマットが間違ってる場合' do
  scenario '登録に失敗する' do
    fill_in 'email', with: 'hogehoge'
    click_on '登録する'
    expect(page).to have_content('メールアドレスの形式が不適切です')
  end
end

しかし、HTML5のバリデーションに引っかかるようになったため、そもそもアプリケーション側にリクエストが届かなくなり、rails側が返却したエラーメッセージを検証できなくなりました。

こいつに阻まれる

どうやら、featureテストではrailsでの検証ではなくHTML5のフォームバリデーションの検証をする必要がありそうです。

HTML5のバリデーションメッセージを検証する

いろいろ探した結果、この記事にたどりつきました。

Testing HTML5 Messages with RSpec/Selenium – Mike Schutte – Medium

featureテストも以下のように書き換えました。

context 'emailのフォーマットが間違ってる場合' do
  scenario '登録に失敗する' do
    fill_in 'email', with: 'hogehoge'
    click_on '登録する'
    message = page.find('#email').native.attribute('validationMessage')
    expect(message).not_to be_empty
   end
end

バリデーションのメッセージ自体はカスタマイズできるので、「設定した値が表示されているか」の検証もできるといいですね

おしまい

参考