[Rails]新規ユーザー登録画面のRSpecテストで"Capybara::ElementNotFound: Unable to find field ..."が解消できない。

Question

Docker上でRailsアプリのRSpecテスト実行を試みています。
新規ユーザー登録画面のsystem specで"Capybara::ElementNotFound: Unable to find field ..."が長時間解決できません。
ご助言をいただけると幸いです。

開発環境

• ruby 3.0.1
• Rails 6.1.4.4
• puma 5.5.2
• nginx 1.21.6
• docker 20.10.12
• docker-compos 1.29.2

前提事項

ユーザー認証にはdeviseを使用しています。

# ディレクトリ構造
myapp
  ├── app
  │   ├── assets
  │   ├── ...
  │   └──  views
  │       ├── ...
  │       ├── ...
  │       └──  users
  │             ├── ...
  │             ├── registrations
  │             │    ├── edit.html.erb
  │             │    └── new.html.erb  <= ここでエラー発生
  │             ├── sessions
  │             │    └── new.html.erb
  │             ├── sessions
  │             ├── ...
  │             ├── index.html.erb
  │             └── show.html.erb
  ├── ...
  ├── Dockerfile
  ├── tailwind.config.js
  └── ...

起きている問題

docker-compose exec app bashでコンテナ内に入りbundle exec rspecを実行すると、新規登録フォームの「アカウント名 *」のみ表題のエラーが出る。

$ bundle exec rspec

Running via Spring preloader in process 841

User
  User CRUD
    ログイン前
      ユーザー新規登録
        フォームの入力値が正常
          ユーザーの新規作成が成功 (FAILED - 1)
        メールアドレス未記入
          ユーザーの新規作成が失敗 (FAILED - 2)
        登録済メールアドレス
          ユーザーの新規作成が失敗 (FAILED - 3)
        パスワードが未記入
          ユーザーの新規作成が失敗 (FAILED - 4)
        パスワードが６文字未満かつパスワード（確認）の入力値が異常
          ユーザーの新規作成が失敗 (FAILED - 5)

Failures:

  1) User User CRUD ログイン前 ユーザー新規登録 フォームの入力値が正常 ユーザーの新規作成が成功
     Failure/Error: fill_in 'アカウント名 *', with: "test"
     
     Capybara::ElementNotFound:
       Unable to find field "アカウント名 *" that is not disabled
     # /usr/local/bundle/gems/capybara-3.36.0/lib/capybara/node/finders.rb:303:in `block in synced_resolve'
     # /usr/local/bundle/gems/capybara-3.36.0/lib/capybara/node/base.rb:83:in `synchronize'
     # /usr/local/bundle/gems/capybara-3.36.0/lib/capybara/node/finders.rb:292:in `synced_resolve'
     # /usr/local/bundle/gems/capybara-3.36.0/lib/capybara/node/finders.rb:53:in `find'
     # /usr/local/bundle/gems/capybara-3.36.0/lib/capybara/node/actions.rb:91:in `fill_in'
     # /usr/local/bundle/gems/capybara-3.36.0/lib/capybara/session.rb:772:in `fill_in'
     # /usr/local/bundle/gems/capybara-3.36.0/lib/capybara/dsl.rb:53:in `call'
     # /usr/local/bundle/gems/capybara-3.36.0/lib/capybara/dsl.rb:53:in `fill_in'
     # ./spec/systems/users_spec.rb:13:in `block (6 levels) in <main>'

  2) User User CRUD ログイン前 ユーザー新規登録 メールアドレス未記入 ユーザーの新規作成が失敗
     Failure/Error: fill_in 'アカウント名 *', with: 'test'
     
     Capybara::ElementNotFound:
       Unable to find field "アカウント名 *" that is not disabled
...

関連するコード

# myapp/views/users/registrations/new.html.erb
...
<div class="bg-white py-6 sm:py-8 lg:py-12">
  <div class="max-w-screen-2xl px-4 md:px-8 mx-auto justify-center">
    <h2 class="text-gray-800 text-2xl lg:text-3xl font-bold text-center mb-4 md:mb-8">アカウント登録</h2>
      <%= form_with(model: @user, url: registration_path(@user)) do |f| %>
      <div class="flex justify-center items-center p-4">
        <%= render "devise/shared/error_messages", resource: resource %>
      </div>  
      <div class="max-w-lg border border-gray-300 shadow rounded-lg mx-auto">
        <div class="flex flex-col gap-4 p-4 md:p-8">
          <div>
            <%= f.label :name, "アカウント名 *", class: 'inline-block text-gray-800 text-sm sm:text-base mb-2' %>
            <%= f.text_field :name, autofocus: true, autocomplete: "name", class: 'w-full bg-gray-50 text-gray-800 border border-gray-300  focus:ring ring-indigo-500 rounded outline-none transition duration-100 px-3 py-2' %>
          </div> 
          <div>
            <%= f.label :email, "メールアドレス *", class: 'inline-block text-gray-800 text-sm sm:text-base mb-2' %>
            <%= f.text_field :email, autofocus: true, autocomplete: "email", class: 'w-full bg-gray-50 text-gray-800 border border-gray-300 focus:ring ring-indigo-500 rounded outline-none transition duration-100 px-3 py-2' %>
          </div>
...

試したこと

よくあるエラーの様で、対象となるfieldのname属性の値を調べてfill inの要素にするなどの方法を試しましたが結果は変わりませんでした。
https://qiita.com/pooooon/items/4fbc429d07e4b65ed928
https://stackoverflow.com/questions/70671277/capybara-with-rails-6-1-4-4-element-not-found

<!-- Chromeブラウザ -->

<div>
   <label class="inline-block text-gray-800 text-sm sm:text-base mb-2" for="user_name">アカウント名 *</label>
   <input autofocus="autofocus" autocomplete="name" class="w-full bg-gray-50 text-gray-800 border border- 
      gray-300  focus:ring ring-indigo-500 rounded outline-none transition duration-100 px-3 py-2" type="text" 
      value="" name="user[name]" id="user_name">
</div>
<div>
   <label class="inline-block text-gray-800 text-sm sm:text-base mb-2" for="user_email">メールアドレス *</label>
   <input autofocus="autofocus" autocomplete="email" class="w-full bg-gray-50 text-gray-800 border border- 
      gray-300 focus:ring ring-indigo-500 rounded outline-none transition duration-100 px-3 py-2" type="text" 
      value="" name="user[email]" id="user_email">
</div>
...

# myapp/spec/systems/users_spec.rb

require 'rails_helper'

RSpec.describe User, type: :system do
  describe 'User CRUD' do
    describe 'ログイン前' do
      let(:user) { create(:user) }
      let(:other_user) { create(:user) }

      describe 'ユーザー新規登録' do
        context 'フォームの入力値が正常' do
          it 'ユーザーの新規作成が成功' do
            visit new_user_registration_path
            fill_in "user[name]", with: "test"
            fill_in 'メールアドレス *', with: '[e-mail]'
            fill_in 'パスワード', with: 'password'
            fill_in 'パスワード（確認） *', with: 'password'
            click_button '認証メールを送信する'
            expect(current_path).to eq new_user_session_path
            expect(page).to have_content '本人確認用のメールを送信しました。メール内のリンクからアカウントを有効化させてください。'
          end
        end
        context 'メールアドレス未記入' do
          it 'ユーザーの新規作成が失敗' do
            visit new_user_registration_path
            fill_in "user[name]", with: 'test'
            fill_in 'メールアドレス *', with: nil
            fill_in 'パスワード', with: 'password'
            fill_in 'パスワード（確認） *', with: 'password'
            click_button '認証メールを送信する'
            expect(current_path).to eq users_path
            expect(page).to have_content 'Eメールを入力してください'
          end
        end
...

※"user_name"と"user[name]"の両方を試しました。

---

解決につながるヒントをいただけないでしょうか。
よろしくお願いいたします。

Comments

[satoru3106]

コメント失礼致します。
こちらのようなエラーで私自身も行き詰まっており、その後の状況についてお伺いしたくご連絡させて頂きました。