Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

Capybaraで詳細画面の検証方法

More than 5 years have passed since last update.

Capybaraで詳細画面の検証方法

初投稿。
railsの詳細画面(いわゆるshowアクションで表示する画面)で、htmlテーブルに表示されている情報のうち、ヘッダ列と内容列の結びつきが正しいかCapybaraで検証する方法の個人的メモ。

検証対象の画面

ヘッダ 内容
ユーザ名 user_name
年齢 28
電話番号 03-0000-0001

検証の方針

  1. withinメソッドで、検証範囲をhtmlテーブルの1行(trタグ)に制限する。
  2. 右列(tdタグ)内の情報をexpectで検証する。

理由

  • わざわざスコープを1行に固定する意味あんの?
    • 単純にexpectで検証すると、画面内の別の箇所にある同値にヒットしてしまう可能性があるため
  • そもそもヘッダ列と内容列の一致を確認する必要あんの?
    • htmlテーブルとヘッダ列と内容列で違うものを表示してしまううっかりミスはやりがち・・・だと思うため
    • たとえばラジオボックスで選択して数値情報が入るようなカラムが2つあり、詳細画面で参照するカラムが誤って逆になってても気づきにくいため。(実際に発生した問題)ただこれを人力で検証するのはしんどいので自動化できるならしたい。
    • 丁寧に全カラムに対してチェックしておくと、ついでに「詳細画面に表示すべき全カラムが表示されているか(表示し忘れているカラムがないか)」もチェックできる。

実装

1.以下のような独自セレクタを定義する。

Capybara.add_selector(:column) do
  xpath do |column|
    i18n_path = "activerecord.attributes.table_name."
    # htmlテーブルのヘッダ列の文字列を入手
    search_text = I18n.t(i18n_path + column)
    # 上記文字列を持つthタグを持つ、trタグをXpathで検索
    "//tr[contains(.//th/text(), '#{search_text}')]"
  end
end

2.カラムの数だけ以下のようなテストケースを作成する。

it "column_name" do
  # 独自セクレタを使って、検証対象カラムのtrタグを検索
  within(:column, "column_name") do
    # tdタグ内の値の検証
    expect(find(:xpath, ".//td")).to have_content "表示されている期待値"
  end
end
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away