Rspec実行時におけるエラー

エラー内容

system specを用いて新規作成機能のコードをテストした際、
「Failure/Error: fill_in '名称', with: task_name」と
「Capybara::ElementNotFound: Unable to find field "タイトル"」エラーがでた。

エラー画面

「名称」は無効になっているので使用することはできないということから、テストコードに書かれているfieldの名称が異なっていることがわかる。

エラー解決手順

①chromeのデベロッパーツールを使用しfieldの名称を確かめる。

検証画像 テストするタスク新規登録画面のフォーム入力のところにカーソルを近づけ調べるとfill_inのname属性と異なっていることがわかった。’名称’ではなく、'task[name]'であった。

fill_inについて

fill_inはフォーム入力を行うことができる「fill_in 'フォーム名' , with: フォームへ入力する文字列」と記述する。フォーム名にはname属性を記述される。

②name属性が違っていたので、テストコードを正しい記述へ変更する。

変更前のテストコード

describe '新規作成機能' do
    let(:login_user) { user_a }

    before do
      visit new_task_path
      fill_in '名称', with: task_name</span>
      click_button '登録する'
    end

    context '新規作成画面で名称を入力したとき' do
      let(:task_name) { '新規作成のテストを書く' }
      it '正常に登録される' do
        expect(page).to have_selector '.alert-success', text: '新規作成のテストを書く'
      end
    end

    context '新規作成画面で名称を入力しなかったとき' do
      let(:task_name) { '' }

      it 'エラーとなる' do
        within '#error_explanation' do
          expect(page).to have_content '名称を入力してください'</span>
        end
      end
    end
  end

変更後

describe '新規作成機能' do
    let(:login_user) { user_a }

    before do
      visit new_task_path
      fill_in 'task[name]', with: task_name
      click_button '登録する'
    end

    context '新規作成画面で名称を入力したとき' do
      let(:task_name) { '新規作成のテストを書く' }
      it '正常に登録される' do
        expect(page).to have_selector '.alert-success', text: '新規作成のテストを書く'
      end
    end

    context '新規作成画面で名称を入力しなかったとき' do
      let(:task_name) { '' }

      it 'エラーとなる' do
        within '#error_explanation' do
          expect(page).to have_content 'Nameを入力してください'
        end
      end
    end
  end

再度テストを実行し確認。

無事にエラーが解決。

追記

bundle exec rspecについて

Rspecには表示を詳細に出力する--format documentationというものがある。上記画像のテストコードは-fdオプションで実行している。

-fdオプションの使い方

テスト実行時に以下のように指定

$ bundle exec rspec -fd

または、.rspecに下記の記述を追加する。

--format documentation

どのように表示が変わるか

通常時　bundle exec rspec　では　.　で表示される。

$ bundle exec rspec spec/system/tasks_spec.rb 
2021-04-06 04:42:19 WARN Selenium [DEPRECATION] Selenium::WebDriver::Chrome#driver_path= is deprecated. Use Selenium::WebDriver::Chrome::Service#driver_path= instead.
Capybara starting Puma...
* Version 3.12.6 , codename: Llamas in Pajamas
* Min threads: 0, max threads: 4
* Listening on tcp://127.0.0.1:61777
.....

Finished in 3.44 seconds (files took 1.82 seconds to load)
5 examples, 0 failures

-fdオプションを指定するとテストコードのcontextとitを表示してくれる。

$ bundle exec rspec -f d  spec/system/tasks_spec.rb
2021-04-06 04:07:10 WARN Selenium [DEPRECATION] Selenium::WebDriver::Chrome#driver_path= is deprecated. Use Selenium::WebDriver::Chrome::Service#driver_path= instead.

タスク管理機能
  一覧表示機能
    ユーザーAがログインしているとき
      behaves like ユーザーAが作成したタスクが表示される
Capybara starting Puma...
* Version 3.12.6 , codename: Llamas in Pajamas
* Min threads: 0, max threads: 4
* Listening on tcp://127.0.0.1:53137
        is expected to have text "最初のタスク"
    ユーザーBがログインしているとき
      ユーザーAが作成したタスクが表示されない
  詳細表示機能
    ユーザーAがログインしているとき
      behaves like ユーザーAが作成したタスクが表示される
        is expected to have text "最初のタスク"
  新規作成機能
    新規作成画面で名称を入力したとき
      正常に登録される
    新規作成画面で名称を入力しなかったとき
      エラーとなる

Finished in 3.52 seconds (files took 1.8 seconds to load)
5 examples, 0 failures