6
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

経緯

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

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

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

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

こういうやつ :point_down:

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

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

こいつに阻まれる :dizzy_face: :point_down:

スクリーンショット 2018-02-22 9.28.39.png

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

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

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

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

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

おしまい:wave:

参考

6
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?