SystemSpec 実行時のunable to connect to chromedriverエラー

##＃はじめに
SystemSpecを実行したところ以下のエラーが発生。解決した手順を残しておきます。

###環境
windows10 Home
ruby 2.7.0
Rails 6.0.3.4
ubuntu 18.04


<br>

```
     1.1) Failure/Error: visit new_user_session_path

          Selenium::WebDriver::Error::WebDriverError:
            unable to connect to chromedriver 127.0.0.1:9515
          # ./spec/system/users_spec.rb:9:in `block (2 levels) in <main>'

     1.2) Failure/Error: raise Error::WebDriverError, cannot_connect_error_text

          Selenium::WebDriver::Error::WebDriverError:
            unable to connect to chromedriver 127.0.0.1:9515
```
<br>


##＃試したこと

####ターミナルにGoogle chromeをインストール


下の記事を参考にchromeDriverインストールされているか確認、インストールされていなかったのでインストール。
<br>
[UbuntuにChromeをインストールする](https://qiita.com/pyon_kiti_jp/items/e6032eb6061a4774aece)

```
#インストールされていないことを確認
apt list --installed google*


#google.listの最終行に追加
sudo sh -c 'echo "deb http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list'


#登録された事を確認
ls -l /etc/apt/sources.list.d
>-rw-r--r-- 1 root root  55 Jan 21 09:45 google.list

cat /etc/apt/sources.list.d/google.list
>deb http://dl.google.com/linux/chrome/deb/ stable main


#公開鍵をダウンロードして、更に、公開鍵をapt-keyで登録
sudo wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | sudo apt-key add -


#パッケージリストを最新の状態に
sudo apt update


#インストール
sudo apt-get install google-chrome-stable

```
<br>

####別のエラーが発生

capybara-webkitがインストールされていなかったのでインストール


```
     1.1) Failure/Error: visit new_user_session_path

          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/google-chrome is no longer running, so ChromeDriver is assuming that Chrome has crashed.)
          # #0 0x5595e5ed6199 <unknown>
          # ./spec/system/users_spec.rb:9:in `block (2 levels) in <main>'

     1.2) Failure/Error: Unable to infer file and line number from backtrace

          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/google-chrome is no longer running, so ChromeDriver is assuming that Chrome has crashed.)
          # #0 0x555be43fb199 <unknown>
```

Gemfileにcapybara-webkitを追記して`bundle install`

```Ruby:Gemfile
  gem 'capybara-webkit'
```

<br>
####capybara-webkitをインストールする際にエラー

```
Gem::Ext::BuildError: ERROR: Failed to build gem native extension.

    current directory: /home/wayne/.rbenv/versions/2.7.0/lib/ruby/gems/2.7.0/gems/capybara-webkit-1.15.1
/home/wayne/.rbenv/versions/2.7.0/bin/ruby -I /home/wayne/.rbenv/versions/2.7.0/lib/ruby/2.7.0 -r
./siteconf20210121-14230-122xkh.rb extconf.rb
*** extconf.rb failed ***
Could not create Makefile due to some reason, probably lack of necessary
libraries and/or headers.  Check the mkmf.log file for more details.  You may
need configuration options.

Provided configuration options:
        --with-opt-dir
        --without-opt-dir
        --with-opt-include
        --without-opt-include=${opt-dir}/include
        --with-opt-lib
        --without-opt-lib=${opt-dir}/lib
        --with-make-prog
        --without-make-prog
        --srcdir=.
        --curdir
        --ruby=/home/wayne/.rbenv/versions/2.7.0/bin/$(RUBY_BASE_NAME)
        --with-gl-dir
        --without-gl-dir
        --with-gl-include
        --without-gl-include=${gl-dir}/include
        --with-gl-lib
        --without-gl-lib=${gl-dir}/lib
        --with-zlib-dir
        --without-zlib-dir
        --with-zlib-include
        --without-zlib-include=${zlib-dir}/include
        --with-zlib-lib
        --without-zlib-lib=${zlib-dir}/lib
Command 'qmake ' not available
```

<br>
公式サイト参考にして
https://github.com/thoughtbot/capybara-webkit/wiki/Installing-Qt-and-compiling-capybara-webkit

```
sudo apt-get update
sudo apt-get install g++ qt5-default libqt5webkit5-dev gstreamer1.0-plugins-base gstreamer1.0-tools gstreamer1.0-x
```

`bundle install`実行

<br>

####先ほどと同じエラー


```
     1.1) Failure/Error: visit new_user_session_path

          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/google-chrome is no longer running, so ChromeDriver is assuming that Chrome has crashed.)
          # #0 0x5653be207199 <unknown>
          # ./spec/system/users_spec.rb:9:in `block (2 levels) in <main>'

     1.2) Failure/Error: Unable to infer file and line number from backtrace

          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/google-chrome is no longer running, so ChromeDriver is assuming that Chrome has crashed.)
          # #0 0x559795ddb199 <unknown>
```
<br>
下の記事を参考にして
[Rspecの設定はrails_helper.rbにだけ書けばよい](https://qiita.com/kazutosato/items/8255a685206b327ad151)



```Ruby:rails_helper.rb
  # system specでheadless chrome使う
  config.before(:each) do |example|
    if example.metadata[:type] == :system
      driven_by :selenium, using: :headless_chrome, screen_size: [1400, 1400]
    end
  end
```
<br>

`rspec`を実行

```
Finished in 1.22 seconds (files took 0.7511 seconds to load)
14 examples, 0 failures
```
通りました！