常連

現在、オリジナルアプリを作成しており、Rspecにてbootstrapを導入したのですがSelenium::WebDriver::Error::ElementClickInterceptedErrorが発生し解決できず困っております。

bootstrap導入前はテストは通っておりました。

何卒よろしくお願いいたします。

エラー
```
Failure/Error: click_on '削除'
     
     Selenium::WebDriver::Error::ElementClickInterceptedError:
       element click intercepted: Element <a class="delete-live_companion" data-confirm="本当に...しますか？" rel="nofollow" data-method="delete" href="/live_companions/1">削除</a> is not clickable at point (699, 261). Other element would receive the click: <div class="row">...</div>
         (Session info: headless chrome=87.0.4280.88)
     

..............................................

 Failure/Error: click_link "編集"
     
     Selenium::WebDriver::Error::ElementClickInterceptedError:
       element click intercepted: Element <a class="edit-live_companion" href="/live_companions/1/edit">...</a> is not clickable at point (653, 261). Other element would receive the click: <div class="row">...</div>
         (Session info: headless chrome=87.0.4280.88)
     
     [Screenshot]: /Users/genkihirano/Portfolio/connect/tmp/screenshots/failures_r_spec_example_groups_live_companions_nested_3_nested_nested_削除成功のフラッシュが表示されること_382.png
```

live_companions_spec.rb(システムテスト)
```

require 'rails_helper'

RSpec.describe "LiveCompanions", type: :system do
  let!(:user) { create(:user) }
  let!(:other_user) { create(:user) }
  let!(:live_companion) { create(:live_companion, :picture, user: user) }
  let!(:comment) { create(:comment, user_id: user.id, live_companion: live_companion) }

  describe "投稿詳細ページ" do
    context "ページレイアウト" do
      before do
        login_for_system(user)
        visit live_companion_path(live_companion)
      end

    context "投稿の削除", js: true do
      it "削除成功のフラッシュが表示されること" do
        login_for_system(user)
        visit live_companion_path(live_companion)
        within find('.change-live_companion') do
          click_on '削除'
        end
        page.driver.browser.switch_to.alert.accept
        expect(page).to have_content '投稿が削除されました'
      end
    end
  end
end
```
show.html.erb
```
<% provide(:title, "#{@live_companion.artist_name}") %>
<% @comments  = @live_companion.feed_comment(@live_companion.id) %>
<div id="fh5co-portfolio">
  <div class="container">
    <div class="row">
      <div class="col-md-4">
        <span class="picture">
          <%= link_to((image_tag @live_companion.picture.thumb400.url), live_companion_path(@live_companion.id), class: 'live_companion-picture') if @live_companion.picture.url.present? %>
        </span>
        <%= render 'users/favorite_form' %>
        <%= render 'users/live_list_form' %>
      </div>
      <div class="col-md-8">
        <h2 class="artist_name"><%= @live_companion.artist_name %></h2>
        <div class="change-live_companion">
          <% if current_user == @live_companion.user %>
            <%= link_to "編集", edit_live_companion_path(@live_companion), class: 'edit-live_companion' %>　
          <% end %>
          <% if current_user.admin? || (current_user == @live_companion.user) %>
            <%= link_to "削除", live_companion_path(@live_companion), method: :delete, class: 'delete-live_companion',
                                          data: { confirm: "本当に削除しますか？" } %>
          <% end %>
        </div>
        <h4 class="live_name"><%= @live_companion.live_name %></h4>
        <h4 class="schedule"><%= @live_companion.schedule %></h4>
        <h4 class="live_memo"><%= @live_companion.live_venue %></h4>
        <h4 class="live_memo"><%= @live_companion.live_memo %></h4>
        <div class="comment">
          <%= render "comments/feed_comments" %>
          <%= render "comments/new" %>
        </div>
      </div>
    </div>
  </div>
</div>
```

Selenium::WebDriver::Error::ElementClickInterceptedError が解決できない

### 前提・実現したいこと
Rspec,factory_bot_rails,capybaraを使用し、syetemspecのログインテストを再現したいです。

capybaraのドライバはselenium_chrome_headlessに設定しています。




### 発生している問題・エラーメッセージ
bundle exec rspec spec/system/user_spec.rbを実行すると以下のエラーが出る。

```terminal
An error occurred while loading spec_helper.
Failure/Error: reqiure 'capybara/rspec'

NoMethodError:
  undefined method `reqiure' for main:Object
  Did you mean?  require
# ./spec/spec_helper.rb:18:in `<top (required)>'
No examples found.


Finished in 0.00003 seconds (files took 0.14022 seconds to load)
0 examples, 0 failures, 1 error occurred outside of examples
```

### 該当のソースコード

```Gemfile
source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby '2.6.3'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails', branch: 'main'
gem 'rails', '~> 6.1.3'
#Bootstrap
gem 'bootstrap', '~> 4.3.1'
gem 'jquery-rails'
#日本語エラー
gem 'rails-i18n'
# Use sqlite3 as the database for Active Record
gem 'sqlite3', group: [:development, :test]
gem 'pg', group: :production
# Use Puma as the app server
gem 'puma', '~> 5.0'
# Use SCSS for stylesheets
gem 'sass-rails', '>= 6'
# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
gem 'webpacker', '~> 5.0'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.7'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 4.0'
# Use Active Model has_secure_password
gem 'bcrypt', '~> 3.1.7'

# Use Active Storage variant
# gem 'image_processing', '~> 1.2'

# Reduces boot times through caching; required in config/boot.rb
gem 'bootsnap', '>= 1.4.4', require: false


#CarrierWave導入
gem 'carrierwave'
gem 'fog-aws'
gem 'mini_magick'

#開発環境とテスト環境
group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
  gem 'rspec-rails', '~> 5.0.0'
  gem 'factory_bot_rails'
  gem 'capybara', '>= 3.26'
  gem 'selenium-webdriver'
end

group :development do
  # Access an interactive console on exception pages or by calling 'console' anywhere in the code.
  gem 'web-console', '>= 4.1.0'
  # Display performance information such as SQL time and flame graphs for each request in your browser.
  # Can be configured to work on production as well see: https://github.com/MiniProfiler/rack-mini-profiler/blob/master/README.md
  gem 'rack-mini-profiler', '~> 2.0'
  gem 'listen', '~> 3.3'
  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
  gem 'spring'
end

group :test do
  # Adds support for Capybara system testing and selenium driver
 
  # Easy installation and use of web drivers to run system tests with browsers
  gem 'webdrivers'

end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

```
spec/spec_helper.rb
```
# This file was generated by the `rails generate rspec:install` command. Conventionally, all
# specs live under a `spec` directory, which RSpec adds to the `$LOAD_PATH`.
# The generated `.rspec` file contains `--require spec_helper` which will cause
# this file to always be loaded, without a need to explicitly require it in any
# files.
#
# Given that it is always loaded, you are encouraged to keep this file as
# light-weight as possible. Requiring heavyweight dependencies from this file
# will add to the boot time of your test suite on EVERY test run, even for an
# individual file that may not need all of that loaded. Instead, consider making
# a separate helper file that requires the additional dependencies and performs
# the additional setup, and require it from the spec files that actually need
# it.
#
# See http://rubydoc.info/gems/rspec-core/RSpec/Core/Configuration

#Rspecでcapybaraを扱うための読み込み
reqiure 'capybara/rspec'

RSpec.configure do |config|
  #Systemspecを実行するドライバの設定
  config.before(:each, type: :system) do
    driven_by :selenium_chrome_headless
  end
  # rspec-expectations config goes here. You can use an alternate
  # assertion/expectation library such as wrong or the stdlib/minitest
  # assertions if you prefer.
  config.expect_with :rspec do |expectations|
    # This option will default to `true` in RSpec 4. It makes the `description`
    # and `failure_message` of custom matchers include text for helper methods
    # defined using `chain`, e.g.:
    #     be_bigger_than(2).and_smaller_than(4).description
    #     # => "be bigger than 2 and smaller than 4"
    # ...rather than:
    #     # => "be bigger than 2"
    expectations.include_chain_clauses_in_custom_matcher_descriptions = true
  end

  # rspec-mocks config goes here. You can use an alternate test double
  # library (such as bogus or mocha) by changing the `mock_with` option here.
  config.mock_with :rspec do |mocks|
    # Prevents you from mocking or stubbing a method that does not exist on
    # a real object. This is generally recommended, and will default to
    # `true` in RSpec 4.
    mocks.verify_partial_doubles = true
  end

  # This option will default to `:apply_to_host_groups` in RSpec 4 (and will
  # have no way to turn it off -- the option exists only for backwards
  # compatibility in RSpec 3). It causes shared context metadata to be
  # inherited by the metadata hash of host groups and examples, rather than
  # triggering implicit auto-inclusion in groups with matching metadata.
  config.shared_context_metadata_behavior = :apply_to_host_groups

# The settings below are suggested to provide a good initial experience
# with RSpec, but feel free to customize to your heart's content.
=begin
  # This allows you to limit a spec run to individual examples or groups
  # you care about by tagging them with `:focus` metadata. When nothing
  # is tagged with `:focus`, all examples get run. RSpec also provides
  # aliases for `it`, `describe`, and `context` that include `:focus`
  # metadata: `fit`, `fdescribe` and `fcontext`, respectively.
  config.filter_run_when_matching :focus

  # Allows RSpec to persist some state between runs in order to support
  # the `--only-failures` and `--next-failure` CLI options. We recommend
  # you configure your source control system to ignore this file.
  config.example_status_persistence_file_path = "spec/examples.txt"

  # Limits the available syntax to the non-monkey patched syntax that is
  # recommended. For more details, see:
  #   - http://rspec.info/blog/2012/06/rspecs-new-expectation-syntax/
  #   - http://www.teaisaweso.me/blog/2013/05/27/rspecs-new-message-expectation-syntax/
  #   - http://rspec.info/blog/2014/05/notable-changes-in-rspec-3/#zero-monkey-patching-mode
  config.disable_monkey_patching!

  # Many RSpec users commonly either run the entire suite or an individual
  # file, and it's useful to allow more verbose output when running an
  # individual spec file.
  if config.files_to_run.one?
    # Use the documentation formatter for detailed output,
    # unless a formatter has already been configured
    # (e.g. via a command-line flag).
    config.default_formatter = "doc"
  end

  # Print the 10 slowest examples and example groups at the
  # end of the spec run, to help surface which specs are running
  # particularly slow.
  config.profile_examples = 10

  # Run specs in random order to surface order dependencies. If you find an
  # order dependency and want to debug it, you can fix the order by providing
  # the seed, which is printed after each run.
  #     --seed 1234
  config.order = :random

  # Seed global randomization in this process using the `--seed` CLI option.
  # Setting this allows you to use `--seed` to deterministically reproduce
  # test failures related to randomization by passing the same `--seed` value
  # as the one that triggered the failure.
  Kernel.srand config.seed
=end
end
```
spec/system/user_spec.rb
```
require 'rails_helper'

describe 'ログイン成功テスト',type: :system do
    describe'user詳細画面が表示される' do
        #仮ユーザー作成
        before do
            user_a =FactoryBot.create(:user,name:'ユーザーA',email:'a@example.com')
        end
        context 'ログインしている時の操作' do
            before do
                #入力された値
                visit: login_path
                fill_in: 'メールアドレス',with: 'a@example.com'
                fill_in: 'パスワード',with: 'password'
                click_botton: 'ログイン'
            end
            it '正しい値が設定してあればログインは成功する' do
                expect(@user.valid?).to eq(true)
            end   
        end
    end
end
```
spec/factories/user.rb
```
FactoryBot.define do
    factroy :user do
        name('テストユーザー')
        email('test@example.com')
        password('password')
    end
end
```
### 試したこと

capybaraの読み込みがうまくいっていないのかと思い
```
RSpec.configure do |config|
  #Systemspecを実行するドライバの設定
  config.before(:each, type: :system) do
     config.include Capybara::DSL ←追記
    driven_by :selenium_chrome_headless
  end
```
DSLで強制読み込みしようと試みましたが、エラー内容が変わりませんでした。

### 補足情報（FW/ツールのバージョンなど）

MacOS 10.15.7

Rspecをまだ触りたてで不足部分が多々あると思いますが、ご教授のほどよろしくお願いします。

Rspec実行時にエラー　An error occurred while loading spec_helper.

### 前提・実現したいこと
Docker環境でRailsの開発をしています。
RailsでSystem Testできるようにしたいです。
■■な機能を実装中に以下のエラーメッセージが発生しました。
`Gemfile`には`capybara`と`selenium`、`webdrivers`を導入して`bundle install`。
([参考記事](https://qiita.com/jnchito/items/c7e6e7abf83598a6516d))

`Dockerfile`に`chrome-driver`を入れて、`bundle exec rspec spec/system/**`と実行して結果、以下のエラーが発生しました。
([参考記事](https://qiita.com/hoshitocat/items/c48bfdce867fc852e829))
### 発生している問題・エラーメッセージ

```
Selenium::WebDriver::Error::UnknownError:
            unknown error: Chrome failed to start: exited abnormally
              (unknown error: DevToolsActivePort file doesn't exist)
              (The process started from chrome location /usr/bin/chromium is no longer running, so ChromeDriver is assuming that Chrome has crashed.)
```

[翻訳]
- Chromeが異常終了
- DevToolsActivePortファイルが存在しません
- CHromeの場所(/usr/bin/chromium)から開始したプロセスはもう実行されていないので、ChromeDriverはChromeがクラッシュしたと見なします。

`chromedriver`起動後↓
```
Starting ChromeDriver 75.0.3770.90 (a6dcaf7e3ec6f70a194cc25e8149475c6590e025-refs/branch-heads/3770@{#1003}) on port 9515
Only local connections are allowed.
Please protect ports used by ChromeDriver and related test frameworks to prevent access by malicious code.
[1562475145.473][SEVERE]: bind() failed: Cannot assign requested address (99)
```

### 該当のソースコード

```Gemfile
gem 'rails', '~> 5.1.0'
...
...
group :development, :test do
  gem "rspec-rails"
end

group :test do
  gem 'capybara'
  gem 'selenium-webdriver'
  gem 'webdrivers'
end

```


```Dockerfile
FROM ruby:2.3.7

ENV LANG C.UTF-8
RUN apt-get update -qq && apt-get install -y build-essential node.js
RUN curl -sL https://deb.nodesource.com/setup_10.x | bash - \
        && apt-get install -y nodejs

# chromeの追加
RUN apt-get update && apt-get install -y unzip && \
    CHROME_DRIVER_VERSION=`curl -sS chromedriver.storage.googleapis.com/LATEST_RELEASE` && \
    wget -N http://chromedriver.storage.googleapis.com/$CHROME_DRIVER_VERSION/chromedriver_linux64.zip -P ~/ && \
    unzip ~/chromedriver_linux64.zip -d ~/ && \
    rm ~/chromedriver_linux64.zip && \
    chown root:root ~/chromedriver && \
    chmod 755 ~/chromedriver && \
    mv ~/chromedriver /usr/bin/chromedriver && \
    sh -c 'wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -' && \
    sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google-chrome.list' && \
    apt-get update && apt-get install -y google-chrome-stable

RUN mkdir /app
WORKDIR /app
COPY Gemfile /app/Gemfile
COPY Gemfile.lock /app/Gemfile.lock
RUN bundle install
COPY . /app
CMD ["rails", "server", "-b", "0.0.0.0"]
```

`chromedriver -v`
↓
```
ChromeDriver 75.0.3770.90 (a6dcaf7e3ec6f70a194cc25e8149475c6590e025-refs/branch-heads/3770@{#1003})
```

`spec/rails_helper.rb`は特にいじってません。

### 試したこと
####1. gemを最新にする
`bundle update rspec-rails capybara selenium-webdriver`のようにブラウザテストに利用するgemwをすべてupdateしましたが、変化なし

####2.Sandboxオプションをつける

`spec/rails_helper.rb`に以下の内容を記述。
```
Capybara.register_driver :selenium do |app|
  Capybara::Selenium::Driver.new(app, {
    browser: :chrome,
    desired_capabilities: Selenium::WebDriver::Remote::Capabilities.chrome(
      chrome_options: {
        # NOTE: ここでno-sandboxオプション追加する
        args: %w[no-sandbox headless disable-gpu window-size=1680,1050],
      }
    )
  })
end
Capybara.javascript_driver = :selenium
```
同じエラーを吐いたので、
[こちらの記事](https://github.com/heroku/heroku-buildpack-google-chrome/issues/46)にあったようchromeのoptionに`disable-dev-shm-usage`を追加。

```
args: %w[no-sandbox disable-dev-shm-usage headless disable-gpu window-size=1680,1050]
```
しかし、エラー内容は変わりませんでした。

##3.chromedriverが通ったときと同じoptionを追加


`selenium-webdriver`が正常に動いた時と同じオプションを追加し、`spec/rails_helper.rb`に　include。

`spec/support/selenium_chrome.rb`
```
Capybara.register_driver :chrome_headless do |app|
  options = ::Selenium::WebDriver::Chrome::Options.new


  options.add_argument('--headless')
  options.add_argument('--no-sandbox')
  options.add_argument('--disable-dev-shm-usage')
  options.add_argument('--window-size=1400,1400')


  Capybara::Selenium::Driver.new(app, browser: :chrome, options: options)
end
```

`spec/rails_helper.rb`
```
Dir[Rails.root.join('spec/support/**/*.rb')].each { |f| require f }

RSpec.configure do |config|
  config.before(:each, type: :system) do
    driven_by :rack_test
  end

  config.before(:each, type: :system, js: true) do
    driven_by :selenium_chrome_headless
  end
end
```

すると9515番ポートの接続を拒否されました。

```
     1.3) Failure/Error:
            raise e, "Failed to open TCP connection to " +
              "#{conn_address}:#{conn_port} (#{e.message})"
          
          Errno::ECONNREFUSED:
            Failed to open TCP connection to 127.0.0.1:9515 (Connection refused - connect(2) for "127.0.0.1" port 9515)
          
          [Screenshot]: tmp/screenshots/failures_r_spec_example_groups_ideas_xxxx_690.png


          
          # /usr/local/bundle/gems/selenium-webdriver-3.142.3/lib/selenium/webdriver/remote/http/default.rb:129:in `response_for'
          # /usr/local/bundle/gems/selenium-webdriver-3.142.3/lib/selenium/webdriver/remote/http/default.rb:82:in `request'
          # /usr/local/bundle/gems/selenium-webdriver-3.142.3/lib/selenium/webdriver/remote/http/common.rb:64:in `call'
          # /usr/local/bundle/gems/selenium-webdriver-3.142.3/lib/selenium/webdriver/remote/bridge.rb:167:in `execute'
          # /usr/local/bundle/gems/selenium-webdriver-3.142.3/lib/selenium/webdriver/remote/w3c/bridge.rb:567:in `execute'
          # /usr/local/bundle/gems/selenium-webdriver-3.142.3/lib/selenium/webdriver/remote/w3c/bridge.rb:173:in `window_handles'
          # /usr/local/bundle/gems/selenium-webdriver-3.142.3/lib/selenium/webdriver/common/driver.rb:187:in `window_handles'
          # /usr/local/bundle/gems/capybara-3.15.1/lib/capybara/selenium/driver.rb:178:in `window_handles'
          # /usr/local/bundle/gems/capybara-3.15.1/lib/capybara/selenium/driver_specializations/chrome_driver.rb:34:in `reset!'
          # /usr/local/bundle/gems/capybara-3.15.1/lib/capybara/session.rb:128:in `reset!'
          # /usr/local/bundle/gems/capybara-3.15.1/lib/capybara.rb:315:in `block in reset_sessions!'
          # /usr/local/bundle/gems/capybara-3.15.1/lib/capybara.rb:315:in `reverse_each'
          # /usr/local/bundle/gems/capybara-3.15.1/lib/capybara.rb:315:in `reset_sessions!'
          # /usr/local/bundle/gems/capybara-3.15.1/lib/capybara/rspec.rb:18:in `block (2 levels) in <top (required)>'
          # ------------------
          # --- Caused by: ---
          # Errno::ECONNREFUSED:
          #   Connection refused - connect(2) for "127.0.0.1" port 9515
          #   /usr/local/bundle/gems/selenium-webdriver-3.142.3/lib/selenium/webdriver/remote/http/default.rb:129:in `response_for'
```

##4. chromedriverが起動しているか確かめる

chromedriverが起動していないのでは？と思い、以下のコマンドで確認したところ、9515番portは起動していませんでした。
`netstat -atn|grep LISTEN`
```
tcp6       0      0  ::1.3000               *.*                    LISTEN     
tcp4       0      0  *.3000                 *.*                    LISTEN     
tcp6       0      0  ::1.4306               *.*                    LISTEN     
tcp4       0      0  *.4306                 *.*                    LISTEN     
tcp4       0      0  127.0.0.1.53253        *.*                    LISTEN     
tcp6       0      0  ::1.53253              *.*                    LISTEN     
tcp4       0      0  127.0.0.1.631          *.*                    LISTEN     
tcp6       0      0  ::1.631                *.*                    LISTEN     
tcp46      0      0  *.33060                *.*                    LISTEN     
tcp4       0      0  127.0.0.1.3306         *.*                    LISTEN
```

##chromeのversionを合わせる
`ChromeDriver`を`Google Chrome`のバージョンに合わせてみようとしましたが、`ChromeDriver 75.0.3770.100`が見つかりませんでした。
- ChromeDriver 75.0.3770.90
- Google Chrome 75.0.3770.100 
参考: https://chida09.com/selenium-error-tcpconnection/



`chromedriver`が起動しない原因がわかりません。

ここ数日間ハマっており、、なかなか解決しません。。よろしくお願いいたします????‍♂️
### 補足情報（FW/ツールのバージョンなど）
- **Rails 5.1.7**
- **RSpec 3.8**
- **ChromeDriver 75.0.3770.90**
- **Google Chrome 75.0.3770.100**
- **capybara (3.15.1)**
- **[DockerImage](https://hub.docker.com/_/ruby?tab=tags&page=9)**
- chromedriverのパスは通っている。
- スクリーンショットは真っ白
- 使用できるドライバ↓
`:selenium, :selenium_headless, :selenium_chrome, :selenium_chrome_headless`の4つ。

Docker環境で、Capybaraとseleniumを使ってSystemテストをしたい。

### 実現したいこと

RSpecのSystem specにて
ログイン画面にあるパスワードフォームに入力された値を特定のアイコンをクリックすることによって表示⇔非表示に変える機能をテストしたい

### 前提

windows11
ruby 3.0.5
rails 7.0.4.2
rspec-rails 6.0.1
capybara 3.38.0
selenium-webdriver 4.8.1
webdrivers 5.2.0

ローカルでのブラウザ操作では機能しています。

### 発生している問題・エラーメッセージ

```
 Failure/Error: expect(find('#textPassword1')[:type]).to eq "text"

       expected: "text"
            got: "password"

       (compared using ==)
```

### 該当のソースコード

```systemspec.rb
before do
  driven_by(:rack_test)
end

it "", js:true do
  visit login_path
  expect(find('#textPassword1')[:type]).to eq "password"
  find('#buttonEye1').click
  expect(find('#textPassword1')[:type]).to eq "text"
end
```

```new.html.erb
該当箇所のみ抜粋
<div class="input-group d-flex">
  <%= f.password_field :password, class: 'form_control w-auto mb-0 flex-grow-1', id: "textPassword1" %>
  <span id="buttonEye1" class="input-group-text fa fa-eye" onclick="pushHideButton(1)"></span>
</div>
```

```show_password.js
function pushHideButton(num) {
  var txtPass = document.getElementById(`textPassword${num}`);
  var btnEye = document.getElementById(`buttonEye${num}`);
  if (txtPass.type === "text") {
    txtPass.type = "password";
    btnEye.className = "input-group-text fa fa-eye";
  } else {
    txtPass.type = "text";
    btnEye.className = "input-group-text fa fa-eye-slash";
  }
}
```
### 試したこと

visit・findの後にsleepで時間を置いてみてもダメでした。

### 補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。


rails capybaraでjavascriptが動かない

### 前提・実現したいこと
ruby on rails にて　rspec を使ったテストコードを書こうと思っています。
rspecをインストールして.rspecに	
--format documentationを記述し、
Userモデルは作成してあるので、spec/models/user_spec.rbにテストコードを記述しようとしていますが、bundle exec rspec でエラーが出てしまいます。


### 発生している問題・エラーメッセージ

```
An error occurred while loading ./spec/models/user_spec.rb.
Hint: Install the `did_you_mean` gem in order to provide suggestions for similarly named files.
Failure/Error: require File.expand_path('../config/environment', __dir__)

LoadError:
  cannot load such file -- io/like
# ./config/application.rb:7:in `<top (required)>'
# ./config/environment.rb:2:in `require_relative'
# ./config/environment.rb:2:in `<top (required)>'
# ./spec/rails_helper.rb:5:in `require'
# ./spec/rails_helper.rb:5:in `<top (required)>'
# ./spec/models/user_spec.rb:1:in `require'
# ./spec/models/user_spec.rb:1:in `<top (required)>'
No examples found.

Finished in 0.00004 seconds (files took 1.05 seconds to load)
0 examples, 0 failures, 1 error occurred outside of examples
```

### 該当のソースコード

```ここに言語名を入力
require 'rails_helper'
describe User do
  describe '#create' do
    it "is invalid without a nickname" do
      user = User.new(nickname: "", email: "kkk@gmail.com", password: "00000000", password_confirmation: "00000000")
      user.valid?
      expect(user.errors[:nickname]).to include("can't be blank")
    end
  end
end
```

### 試したこと

require 'rails_helper'とせずに単純な足し算のテストをするとパスする。
'rails_helper'ではなく'spec_helper'とするとuninitialized constant Userとなるが
ENV["RAILS_ENV"] ||= 'test'
require File.expand_path("../../config/environment", __FILE__)
require 'rspec/rails'をhelperに記述するとrails_helperと同じエラーになる。
exampleの中身を書かなくても同じエラーになる。
以上のことからrails_helperがうまく読み込めないのかな？と思って調べるもそれ以上分からず、と言った状態です。

### 補足情報（FW/ツールのバージョンなど）
rspecのバージョンは3.9であることを確認。
railsは5.2.4.1
rubyは2.5.1p57です

Rspecが動かない　rails_helperの読み込み

## 問題
Ruby on Rails5速習実践ガイドに則って学習をすすめているのですが、
エラー時のスクリーンショットが真っ白になってしまい困っています。

```
# frozen_string_literal: true

require "rails_helper"

describe "タスク管理機能", type: :system do
  let(:user_a) { FactoryBot.create(:user, name: "ユーザーA", email: "a@example.com") }
  let(:user_b) { FactoryBot.create(:user, name: "ユーザーB", email: "b@example.com") }
  let!(:task_a) { FactoryBot.create(:task, name: "最初のタスク", user: user_a) }

  before do
    puts("タスク管理画面_before")
    visit login_path
    fill_in "メールアドレス", with: login_user.email
    fill_in "パスワード", with: login_user.password
    click_button "ログインする"
  end

  shared_examples_for "ユーザーAが作成したタスクが表示される" do
    it { expect(page).to have_content "最初のタスク" }
  end

  describe "一覧表示機能" do
    context "ユーザーAがログインしているとき" do
      let(:login_user) { user_a }

      it_behaves_like "ユーザーAが作成したタスクが表示される"
    end

    context "ユーザーBがログインしているとき" do
      let(:login_user) { user_b }

      it "ユーザーAが作成したタスクが表示されない" do
        expect(page).to have_no_content "最初のタスク"
      end
    end
  end

  describe "詳細表示機能" do
    context "ユーザーAがログインしているとき" do
      let(:login_user) { user_a }

      before do
        visit task_path(task_a)
      end

      it_behaves_like "ユーザーAが作成したタスクが表示される"
    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
  end
end

```

上のようなテストコードを書いています。
`詳細表示機能`の`ユーザーAがログインしているとき`のテストと
`新規作成機能`のテストが正常に通らず、エラーが発生するのですが、その際のスクリーンショットが真っ白になってしまい、
画像からなぜエラーが起きたのかわかりません。

下が実行時のエラーです。
```
$ bundle exec rspec spec/system/tasks_spec.rb
DEPRECATION WARNING: Static attributes will be removed in FactoryBot 5.0. Please use dynamic
attributes instead by wrapping the attribute value in a block:

email { "test1@example.com" }

To automatically update from static attributes to dynamic ones,
install rubocop-rspec and run:

rubocop \
  --require rubocop-rspec \
  --only FactoryBot/AttributeDefinedStatically \
  --auto-correct

 (called from block (2 levels) in <main> at /Users/wawawatataru/Documents/rails_tut_taskleaf/taskleaf/spec/factories/users.rb:6)
タスク管理画面_before
Capybara starting Puma...
* Version 3.12.1 , codename: Llamas in Pajamas
* Min threads: 0, max threads: 4
* Listening on tcp://127.0.0.1:62395
.タスク管理画面_before
.タスク管理画面_before
[Screenshot]: /Users/wawawatataru/Documents/rails_tut_taskleaf/taskleaf/tmp/screenshots/failures_r_spec_example_groups_nested_nested_2_a_behaves_like_a_example_at___spec_system_tasks_spec_rb_19_565.png
Fタスク管理画面_before
[Screenshot]: /Users/wawawatataru/Documents/rails_tut_taskleaf/taskleaf/tmp/screenshots/failures_r_spec_example_groups_nested_nested_3_nested_正常に登録される_940.png
F

Failures:

  1) タスク管理機能 詳細表示機能 ユーザーAがログインしているとき behaves like ユーザーAが作成したタスクが表示される should text "最初のタスク"
     Failure/Error: it { expect(page).to have_content "最初のタスク" }
       expected to find text "最初のタスク" in "Taskleaf\nタスク一覧\nログアウト\nログインしました\nログイン\nメールアドレス\nパスワード"
     
     
     
     Shared Example Group: "ユーザーAが作成したタスクが表示される" called from ./spec/system/tasks_spec.rb:46
     # ./spec/system/tasks_spec.rb:19:in `block (3 levels) in <top (required)>'

  2) タスク管理機能 新規作成機能 新規作成画面で名称を入力したとき 正常に登録される
     Failure/Error: fill_in "task-name", with: task_name
     
     Capybara::ElementNotFound:
       Unable to find field "task-name" that is not disabled
     
     
     
     # ./spec/system/tasks_spec.rb:54:in `block (3 levels) in <top (required)>'

Finished in 9.31 seconds (files took 4.73 seconds to load)
4 examples, 2 failures

Failed examples:

rspec './spec/system/tasks_spec.rb[1:2:1:1:1]' # タスク管理機能 詳細表示機能 ユーザーAがログインしているとき behaves like ユーザーAが作成したタスクが表示される should text "最初のタスク"
rspec ./spec/system/tasks_spec.rb:61 # タスク管理機能 新規作成機能 新規作成画面で名称を入力したとき 正常に登録される
```


また、能動的にスクリーンショットを撮ろうとして、以下のように記述するとスクリーンショットが正常に撮れるばかりか、
テスト通ってしまいます。

```
  describe "新規作成機能" do
    let(:login_user) { user_a }
    before do
      page.save_screenshot "#{DateTime.now}.png"
      visit new_task_path
      page.save_screenshot "#{DateTime.now}.png"
      fill_in "task-name", with: task_name
      click_button "登録する"
    end
```

以下が実行結果です。
```
bundle exec rspec spec/system/tasks_spec.rb
DEPRECATION WARNING: Static attributes will be removed in FactoryBot 5.0. Please use dynamic
attributes instead by wrapping the attribute value in a block:

email { "test1@example.com" }

To automatically update from static attributes to dynamic ones,
install rubocop-rspec and run:

rubocop \
  --require rubocop-rspec \
  --only FactoryBot/AttributeDefinedStatically \
  --auto-correct

 (called from block (2 levels) in <main> at /Users/wawawatataru/Documents/rails_tut_taskleaf/taskleaf/spec/factories/users.rb:6)
タスク管理画面_before
Capybara starting Puma...
* Version 3.12.1 , codename: Llamas in Pajamas
* Min threads: 0, max threads: 4
* Listening on tcp://127.0.0.1:63723
.タスク管理画面_before
.タスク管理画面_before
.タスク管理画面_before
.

Finished in 5.3 seconds (files took 5.82 seconds to load)
4 examples, 0 failures
```

どのような原因が考えられるでしょうか。

Rails Rspec Capybara でテストを実行するとエラー時のスクリーンショットが真っ白になってしまう

### 前提・実現したいこと

投稿に対するコメント機能(新規作成、削除)をAjax通信で実装しました。
これに対するテストがAjax通信でなければ成功するのですが、Ajax通信では失敗してしまいます。
なのでAjax通信でも成功させたいです。

### 発生している問題・エラーメッセージ
System Specで必要条件を満たしたコメントを投稿したら、Commentモデルの数が1つ変わることを確認するテストでエラーが発生します。
```
expected `Comment.count` to have changed by 1, but was changed by 0
```

## 失敗した時のスクリーンショット
画面上は想定通りです。
画面左側が投稿、右側が今回作成したコメントです。
吹き出しアイコンの隣にはコメント数が表示されるのですが、正常に「1」と表示されています。
![イメージ説明](14160ab23e31b12e5916ca84c3ddcece.png)

### 該当のソースコード
[spec/system/comments_spec.rb]
```ruby
require 'rails_helper'

describe 'コメント投稿機能', type: :system do
  let!(:user) { FactoryBot.create(:user) }
  let!(:post) { FactoryBot.create(:other_post, user: user)}

  context '新規作成機能' do
    before do
      sign_in_as user
      find('.post-show-link').click #投稿詳細画面をモーダルウィンドウで開く(Ajax通信)
    end

    it 'コメントが正常の投稿されること' do
      expect {
        fill_in 'comment[content]', with: "コメントテスト"
        click_button '送信'
      }.to change(Comment, :count).by(1)
    end
  end
end
```

[comments_controller.rb]

```ruby
def create
  @post = Post.find(params[:comment][:post_id])
  @comment = @post.comments.build(comment_params)
  @comment.user_id = current_user.id
  if @comment.save
    respond_to do |format|
      format.html { redirect_back(fallback_location: root_url) }
      format.js
    end
  end
end
```

## Ajax通信でなければ成功する
form_withにlocal: trueを指定するとテストは成功します。
```ruby
<%= form_with(model: Comment.new(id: current_user.id), class: 'comment-form', local: true) do |f| %>
  <%= f.text_area :content, class: 'comment-form__textarea', placeholder: 'コメントを入力' %>
  <%= hidden_field_tag 'comment[post_id]', post.id %>
  <%= f.submit "送信", id: 'button-post', class: 'comment-form__submit disabled', disabled: true %>
<% end %>
```

## リロードすると成功する
送信ボタンをクリック後、リロード(visit current_path)するとテストは成功します。
```ruby
it 'コメントが正常の投稿されること' do
  expect {
    fill_in 'comment[content]', with: "コメントテスト"
    click_button '送信'
    visit current_path
  }.to change(Comment, :count).by(1)
end
```


### 補足情報（FW/ツールのバージョンなど）
* Ruby 2.6.2
* Rails 5.2.3
* capybara 3.26.0
* rspec-rails 3.8.2
* selenium-webdriver 3.142.3
* webdrivers 4.1.1

足りない情報等ございましたら、ご指摘ください。
よろしくお願いします。

【RSpec】Capybaraを使ったSystem SpecでAjax通信のテストが失敗する

### 前提・実現したいこと
Ruby, Rails6でアプリを開発しています。
その中でテストを書いているのですが、Rspec; system_specでCapybara::ElementNotFound:が出てしまい解消できません。

手動で自分で登録をやってみたりすると、普通にできるのですがいざテストを書いてみると、Capybara::ElementNotFound:と出てしまいます。

### 発生している問題・エラーメッセージ


```
Failure/Error: fill_in 'user[username]', with: 'Alice'
Capybara::ElementNotFound:
Unable to find field "user[username]" that is not disabled
```


### 該当のソースコード
users_spec.rb
```
require 'rails_helper'

RSpec.describe User, type: :system do
  
  let(:alice) { create(:alice)}
  

  describe 'User CRUD' do
    describe 'before sign in' do
      describe 'sign in as new user' do
        context 'sign_in form is valid' do
          it "successed with sign in" do
            visit new_user_session_path
            fill_in 'user[username]', with: 'Alice'
            fill_in 'user[birthday]', with: '001996-11-09'
            fill_in 'user[email]', with: 'alice@example.com'
            fill_in 'user[password]', with: 'Password'
            fill_in 'user[password_confirmation]', with: 'Password'
            click_button 'Signup'
            expect(current_path).to eq login_path
            expect(page).to have_content 'User was successfully created'
          end

        end
      end
    end
  end
end
```


devise/registrations/new.html.erb
bootstrapを使っているのでこんなコードになっています。
```
<div class="card col-sm-6 mx-auto mt-5">
  <div class="card-body">

    <h2 class="mt-1 mb-3"><%= t('.sign_up') %></h2>

    <%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
      <%= render "devise/shared/error_messages", resource: resource %>

      <div class="form-group">
        <%= f.label :username %><br />
        <%= f.text_field :username, class: "form-control" %>
        
      </div>

      <div class="form-group">
        <%= f.label :birthday %><br />
        <%= f.date_field :birthday %>
      </div>

      <div class="form-group">
        <%= f.label :email %><br />
        <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
      </div>

      <div class="form-group">
        <%= f.label :password %>
        <% if @minimum_password_length %>
        <em><%= t('devise.shared.minimum_password_length', count: @minimum_password_length) %></em>
        <% end %><br />
        <%= f.password_field :password, autocomplete: "new-password" %>
      </div>

      <div class="form-group">
        <%= f.label :password_confirmation %><br />
        <%= f.password_field :password_confirmation, autocomplete: "new-password" %>
      </div>

      <div class="actions">
        <%= f.submit t('.sign_up'), :class => "btn btn-primary btn-block" %>
      </div>
    <% end %>

    <%= render "devise/shared/links" %>
  </div>
</div>
```

### 試したこと

とりあえず調べて出てくる以下の記事みたいなことは試しました。

[CapybaraでElementNotFoundと出た時の対処法](https://qiita.com/pooooon/items/4fbc429d07e4b65ed928)

[Capybara の fill_in 対象はラベル以外でも指定できることを思い出そう](https://zenn.dev/tatsurom/articles/1976321aae77f4b63a14)

rails sで起動して新規登録画面に遷移し、記事のように開発者ツールを使って該当する箇所を見たのですが、
```
<input class="form-control" type="text" value="" name="user[username]" id="user_username">
```
このuser[username], user_usernameのどちらを試してもパスしませんでした。

どこに原因があるのかわからないので教えていただきたいです。

### 補足情報（FW/ツールのバージョンなど）
ruby3.0.2
rails 6.1.4.1
rspec 3.10