前提・実現したいこと

テストがパスできないので、

spec/system/drinks_spec.rb

      expect(page).to have_no_content(drink.image)
      save_and_open_page
      expect(page).to have_no_content(drink.name)
      expect(page).to have_no_content(drink.price)
      expect(page).to have_no_content(drink.explain)
    end

をやったら

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: 870: /usr/bin/xdg-open: www-browser: not found
/usr/bin/xdg-open: 870: /usr/bin/xdg-open: links2: not found
/usr/bin/xdg-open: 870: /usr/bin/xdg-open: elinks: not found
/usr/bin/xdg-open: 870: /usr/bin/xdg-open: links: not found
/usr/bin/xdg-open: 870: /usr/bin/xdg-open: lynx: not found
/usr/bin/xdg-open: 870: /usr/bin/xdg-open: w3m: not found
xdg-open: no method available for opening '/coffee_passport/capybara-202104190513288288833744.html'

とエラーが出ました

適切なブラウザが見つけられない、とあったので、dockerにchromeをインストールしたつもりですが、おそらくできてないように思えます。

後、Set the BROWSER environment variable to your desired browser.
とあったので、何かしらのBROESERという環境変数に何かしらの値をセットする必要があると思います。
.envファイルにBROUSER = chrome
とかやるのか、docker-compose-ymlにBROUSER = chromeとやるのか分かりませんが、、、、。。。

https://qiita.com/ryohei_kh/items/6d142b7bd1a88980d332

の記事を見たら、手動で開くことができました。

またこちらの記事は擬似的に「save_and_open_page」を使用してるそうです。
このやり方の場合

soichirohara@SoichironoMBP capybara % brew install fswatch
Updating Homebrew...
==> Auto-updated Homebrew!
Updated 1 tap (homebrew/core).
==> New Formulae
conftest        epr             net-tools       six             zinit
dory            marcli          organize-tool   systemd         zsh-vi-mode
dua-cli         minisat         pcp             xplr
==> Updated Formulae
Updated 446 formulae.
==> Renamed Formulae
fcct -> butane

==> Downloading https://homebrew.bintray.com/fswatch-1.15.0.catalina.bottle.tar.
#=#=-#  #                                                                     
curl: (22) The requested URL returned error: 404 Not Found
Trying a mirror...
==> Downloading https://ghcr.io/v2/homebrew/core/fswatch-1.15.0.catalina.bottle.
==> Downloading from https://github.com/-/v2/packages/container/package/homebrew
##O#- #                                                                       
curl: (22) The requested URL returned error: 404 
Error: Failed to download resource "fswatch"
Download failed: https://ghcr.io/v2/homebrew/core/fswatch-1.15.0.catalina.bottle.tar.gz

となりました
ベストなやり方があればご教授いただければと思います。

追記

ruby-jpさんの方で、@wakaba260さんから

save_and_open_pageってスクリーンショットを取る＋ブラウザを立ち上げてページを開くメソッドなんですが、docker上で実行するとdockerコンテナ内でブラウザを開こうとしてエラーになってると思います

save_and_open_pageじゃなくてsave_pageを使って、コンテナとホスト側で共有してるボリューム上に保存してから、ホスト側でブラウザを開くのがいいんじゃないでしょうか
コンテナ上で開いてるブラウザをホスト側から見るのは難易度が高いと思うので、興味あるなら時間のあるときに調べてみるぐらいが良さそうかと

とのご意見をいただきました。ありがとうございます。

chromeのインストール手順

docker-compose.yml

  web:
    environments:
      SELENIUM_DRIVER_URL: http://selenium_chrome:4444/wd/hub"
  selenium_chrome:
    image: selenium/standalone-chrome-debug
    logging:
      driver: none

Dockerfile

# 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 bundle update capybara selenium-webdriver

Gemfile

group :test do
  # Adds support for Capybara system testing and selenium driver
  gem 'capybara', '>= 2.15'
  gem 'selenium-webdriver'
  # Easy installation and use of web drivers to run system tests with browsers
  gem 'webdrivers'
  gem 'launchy'
end

spec/support/capybara.rb

require 'selenium-webdriver'
require 'capybara/rspec'

Capybara.configure do |config|

  config.default_driver = :chrome
  config.javascript_driver = :chrome
  config.run_server = true
  config.default_selector = :css 
  config.default_max_wait_time = 5  
  config.ignore_hidden_elements = true
  config.save_path = Dir.pwd     
  config.automatic_label_click = false 
end

Capybara.register_driver :chrome do |app|

  options = Selenium::WebDriver::Chrome::Options.new

  options.add_argument('disable-notifications')       
  options.add_argument('disable-translate')          
  options.add_argument('disable-extensions')         
  options.add_argument('disable-infobars')           
  options.add_argument('window-size=1280,960')        


  # ブラウザーを起動する
  Capybara::Selenium::Driver.new(
    app,
    browser: :chrome,
    options: options)
end

spec/spec_helper.rb


ENV["RAILS_ENV"] ||= 'test'
require File.expand_path("../../config/environment", __FILE__)
require 'rspec/rails'
require 'support/capybara.rb'

Dir[Rails.root.join("spec/support/*.rb")].each { |f| require f }
ActiveRecord::Migration.check_pending! if defined?(ActiveRecord::Migration)

RSpec.configure do |config|
  config.include Rails.application.routes.url_helpers
  config.include Capybara::DSL
end

を記述しました。

試したこと

https://stackoverflow.com/questions/36741273/capybara-save-and-open-page-error-no-display-specified-couldnt-find-a-suita

この記事が出てきたコマンドを実行

  xdg-settings set default-web-browser google-chrome.desktop
zsh: command not found: xdg-settings
soichirohara@SoichironoMBP coffee_passport % locate .desktop | grep chrome

WARNING: The locate database (/var/db/locate.database) does not exist.
To create the database, run the following command:

  sudo launchctl load -w /System/Library/LaunchDaemons/com.apple.locate.plist

Please be aware that the database can take some time to generate; once
the database has been created, this message will no longer appear.