ユーザーを削除するsystemspecを通したいです

前提・実現したいこと

お世話になります。
現在ruby(ruby on rails)でポートフォリオ用アプリを制作しております。

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

ユーザーを削除する挙動のテストをsystem specで書いておりますが、
こちらのエラーが出ており解決できません。

Failure/Error: fill_in "user_email",    with: user.email
     
     Capybara::ElementNotFound:
       Unable to find field "user_email" that is not disabled
     
     [Screenshot]: tmp/screenshots/failures_r_spec_example_groups_users_nested_3_nested_2_正しく削除できること_952.png

エラーのスクリーンショットはこちらです。

該当のソースコード

通したいテストは以下の通りです。

  describe "プロフィール編集ページ" do
    before do
      login_for_system(user)
      visit user_path(user)
      click_link "プロフィール編集"
    end
　  context "アカウント削除処理", js: true do
      it "正しく削除できること" do
        click_link "アカウントを削除する"
        page.accept_confirm do
          click_on :delete_button
        end
        expect(page).to have_content "アカウントを削除しました"
      end
    end
  end

login_for_system(user)はspec/support/test_helperに書いています。

def login_for_system(user)
  visit login_path
  fill_in "user_email",    with: user.email
  fill_in "user_password", with: user.password
  click_button "ログイン"
end

試したこと

そもそも以下のエラーが出ており、Docker環境内のためChromeが入っていないのかと考え、docker-compose.ymlやcapybara.rbにselenium_chromeに関連する記述をしました。そうすると初めに提示したエラーになった次第です。

Failure/Error: visit login_path
          
          Webdrivers::BrowserNotFound:
            Failed to find Chrome binary.

またvisitlogin_pathの後にputs page.bodyを入れたところ、
テスト失敗箇所のhtmlは作成中のアプリと全く関係のない何かのゲーム?の様なコードが出てきました。

// Game intro animation, T-rex moves in from the left.
if (this.playingIntro && this.xPos < this.config.START_X_POS) {
  this.xPos += Math.round((this.config.START_X_POS /
      this.config.INTRO_DURATION) * deltaTime);
  this.xInitialPos = this.xPos;
}

スクリーンショットの127.0.0.1についても調べておりますが、解決に到っておりません。

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

開発環境は、
ruby 2.5.1
rails 5.2.4
docker,rails,puma,nginx,mysqlで動かしています。

Dockerfile

FROM ruby:2.5.1

RUN apt-get update -qq && \
    apt-get install -y build-essential \
                       nodejs

RUN mkdir /webapp
WORKDIR /webapp

ADD Gemfile /webapp/Gemfile
ADD Gemfile.lock /webapp/Gemfile.lock

RUN bundle install

ADD . /webapp

RUN mkdir -p tmp/sockets

docker-compose.yml

version: '3'
services:
  app:
    build:
      context: .
    env_file:
      - ./environments/db.env
    command: bundle exec puma -C config/puma.rb
    volumes:
      - .:/webapp
      - public-data:/webapp/public
      - tmp-data:/webapp/tmp
      - log-data:/webapp/log
    depends_on:
      - db
    environment:
    - "SELENIUM_DRIVER_URL=http://selenium_chrome:4444/wd/hub"
  db:
    image: mysql:5.7
    env_file:
      - ./environments/db.env
    volumes:
      - db-data:/var/lib/mysql
  web:
    build:
      context: containers/nginx
    volumes:
      - public-data:/webapp/public
      - tmp-data:/webapp/tmp
    ports:
      - 80:80
    depends_on:
      - app
  selenium_chrome:
    image: selenium/standalone-chrome-debug
    logging:
      driver: none
volumes:
  public-data:
  tmp-data:
  log-data:
  db-data:

spec/support/capybara.rb

Capybara.javascript_driver = :chrome_headless

RSpec.configure do |config|
  config.before(:each, type: :system) do
    driven_by :rack_test
  end

  config.before(:each, type: :system, js: true) do
    if ENV["SELENIUM_DRIVER_URL"].present?
      driven_by :selenium, using: :chrome, options: {
        browser: :remote,
        url: ENV.fetch("SELENIUM_DRIVER_URL"),
        desired_capabilities: :chrome
      }
    else
      driven_by :selenium_chrome_headless
    end
  end
end

以上です。
何卒、宜しくお願い致します。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーー
追記

ログインフォームのビューは以下の通りです。

<% provide(:title, "ログイン") %>
<h1>ログイン</h1>
<div class="row">
  <div class="col-md-6 col-md-offset-3">
    <%= form_for(:session, url: login_path, local: true) do |f| %>
      <div class = 'form-group'>
        <%= f.label 'メールアドレス' %>
        <%= f.email_field :email, class: 'form-control', id: 'user_email' %>
      </div>
      <div class = 'form-group'>
        <%= f.label 'パスワード' %>
        <%= f.password_field :password, class: 'form-control', id: 'user_password' %>
      </div>
      <div class = 'form-group'>
        <%= f.label :remember_me, class: "checkbox inline" do %>
          <%= f.check_box :remember_me %>
          <span>ログインしたままにする</span>
        <% end %>
      </div>
      <%= f.submit 'ログイン', class: 'btn btn-primary' %>
    <% end %>
    <br>ユーザー登録されていない方は<%= link_to 'こちら', signup_path %><br>
    パスワードをお忘れの方は<%= link_to 'こちら', '#' %>
  </div>
</div>

rootは以下の様に記述しております。

  get    :login,     to: 'sessions#new'
  post   :login,     to: 'sessions#create'

Dockerファイルに以下を追加してみましたがダメでした....

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

何卒宜しくお願い致します。

shota-imoto

2020/08/05 12:44

``` Unable to find field "user_email" that is not disabled ``` user_emailというフィールドが見当たりませんと書いているので、ビューがどうなっているのか気になります。掲載いただけますか？

makobe

2020/08/09 05:02

追記依頼いただきましてありがとうございます！また返信が遅くなりまして大変申し訳ありません。ビューを追加で掲載いたしました。 emailフォームのidにuser_emailを入れている形です。ご確認をお願い致します。

行動規範の内容に同意します

回答3件

自己解決

最終的にこの様な形で解決することが出来ました。

spec/support/capybara.rb

Capybara.register_driver :selenium_container do |app|
  url = ENV["SELENIUM_DRIVER_URL"]
  caps = ::Selenium::WebDriver::Remote::Capabilities.chrome(
    chromeOptions: {
      args: [
        'headless',
        'no-sandbox',
        'disable-gpu',
        'window-size=1400,1400'
      ],
      w3c: false
    }
  )
  Capybara::Selenium::Driver.new(app, browser: :remote, url: url, desired_capabilities: caps)
end

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_container

    Capybara.server_host = IPSocket.getaddress('app')
    Capybara.server_port = 3002
    Capybara.app_host = "http://#{Capybara.server_host}:#{Capybara.server_port}"
  end
end

投稿2020/09/15 11:47

makobe

総合スコア7

修正ありがとうございます^^
fill_inの指定でうまくいっていないのかもしれません。
makobeさんの書き方で動く、ようなことがネットの記事でいくつか書いていますが、↓試してみてください。

def login_for_system(user)
  visit login_path
  fill_in "メールアドレス", with: user.email
  fill_in "パスワード", with: user.password
  click_button "ログイン"def login_for_system(user)
end

ちなみにビューのフォームヘルパーで

<%= f.email_field :email, class: 'form-control', id: 'user_email', placeholder: 'メールアドレス' %>

のようにすると上述のfeatureスペックの書き方で通りますが、デザイン変わるのでナンセンスですね。。。

これが無理なら

  visit login_path
  find("#user_email").set(user.email)
  find("#user_password").set(user.password)
  click_button "ログイン"
end

ただ、この書き方だとパット見なにやっているか分からないし、ユーザーの操作を再現する、という意味ではいまいちかもしれません。

どちらも動かなければ、念の為、ルーティングできているか確認しても良さそうです。

def login_for_system(user)
  visit login_path
  save_and_open_page　# 追加
  fill_in "user_email",    with: user.email
  fill_in "user_password", with: user.password
  click_button "ログイン"
end

ご存知と思いますが、↑のようにすると途中でページを表示できます

投稿2020/08/09 06:15

shota-imoto

総合スコア37

makobe

2020/08/10 04:18

ご回答いただきましてありがとうございます！アドバイスいただいた通り全て試してみたのですが、どれもUnable to find field "user_email"...... のエラーになってしまいます。またsave_and_open_pageでページを開こうとしたところ、アカウント削除処理 /usr/bin/xdg-open: 778: /usr/bin/xdg-open: links2: not found /usr/bin/xdg-open: 778: /usr/bin/xdg-open: elinks: not found /usr/bin/xdg-open: 778: /usr/bin/xdg-open: links: not found /usr/bin/xdg-open: 778: /usr/bin/xdg-open: lynx: not found /usr/bin/xdg-open: 778: /usr/bin/xdg-open: w3m: not found xdg-open: no method available for opening '/webapp/tmp/capybara/capybara-202008091352493197630988.html' xprop: unable to open display '' xprop: unable to open display '' Couldn't find a suitable web browser! Set the BROWSER environment variable to your desired browser. Warning: program returned non-zero exit code #1 /usr/bin/xdg-open: 778: /usr/bin/xdg-open: www-browser: not found /usr/bin/xdg-open: 778: /usr/bin/xdg-open: links2: not found /usr/bin/xdg-open: 778: /usr/bin/xdg-open: elinks: not found /usr/bin/xdg-open: 778: /usr/bin/xdg-open: links: not found /usr/bin/xdg-open: 778: /usr/bin/xdg-open: lynx: not found /usr/bin/xdg-open: 778: /usr/bin/xdg-open: w3m: not found xdg-open: no method available for opening '/webapp/tmp/capybara/capybara-20200809135252276535053.html' 正しく削除できること (FAILED - 1) この様な表示になります。この辺りきちんと動く設定ができていない様に思われますので、調べて動く様にしてみます。

行動規範の内容に同意します

spec/support/capybara.rbを

ruby
1config.before(:each, type: :system, js: true) do
2    if ENV["SELENIUM_DRIVER_URL"].present?
3      driven_by :selenium, using: :chrome, options: {
4        browser: :remote,
5        url: ENV.fetch("SELENIUM_DRIVER_URL"),
6        desired_capabilities: :chrome
7      }
8     Capybara.server_host = 'app'
9     Capybara.app_host='http://app'
10    else
11      driven_by :selenium_chrome_headless
12    end
13  end
14

として見てはいかがでしょうか。

投稿2020/08/08 11:14

yuki-dukepi

総合スコア4

makobe

2020/08/09 13:39

ご回答いただきましてありがとうございます! アドバイス通り記載してみたのですが、同じエラーのままでした.... 編集に記載しましたが、別の方のDockerファイルを参考に、試しにDockerファイルにchromeのインストールをする記述をしてみましたが、同じ結果に終わってしまいました。 chromeのインストールが出来ていないのが原因かと考えていたのですが、別に原因があるのでしょうか....