CircleCI rspec実行時にWebdrivers::BrowserNotFound: Failed to find Chrome binary.エラーが出る場合の解決方法

概要

CircleCIでRSpecを実行した際、ブラウザが見つからないというエラーが発生した。
解決方法についてメモ。

環境

ruby 3.0.2
rails 6.1.4
rspec-rails 5.1.2
CircleCI 2.1

先に結論

config.ymlのorbsでbrowser-toolsを指定する。

.circleci/config.yml

version: 2.1
orbs:
  ruby: circleci/ruby@1.4.0
  # 追記
  browser-tools: circleci/browser-tools@1.4.0
jobs:
  build:
    docker:
      - image: cimg/ruby:3.0.2-browsers
        environment:
          APP_BUNDLER_VERSION: 2.1.4
    working_directory: ~/my-app
    steps:
      - checkout:
          path: ~/my-app
      - ruby/install-deps
  test:
    docker:
      - image: cimg/ruby:3.0.2-browsers
      - image: circleci/mysql:8.0
        environment:
          MYSQL_ROOT_PASSWORD: password
          MYSQL_DATABASE: my_app_test
    environment:
      BUNDLE_JOBS: "3"
      BUNDLE_RETRY: "3"
      APP_DATABASE_HOST: "127.0.0.1"
      RAILS_ENV: test
    working_directory: ~/my-app
    steps:
      # 追記
      - browser-tools/install-chrome
      - browser-tools/install-chromedriver    
      - checkout:
          path: ~/my-app
      - ruby/install-deps
      - run:
          name: Database setup
          command: bundle exec rails db:migrate
      - run:
          name: yarn install
          command: yarn install
      - run:
          name: run webpack
          command: bundle exec bin/webpack
      - run:
          name: run rubocop
          command: bundle exec rubocop
      - run:
          name: run rspec
          command: bundle exec rspec spec/
workflows:
  version: 2
  build_and_test:
    jobs:
      - build
      - test:
          requires:
            - build

エラーの発生〜解決までに試したこと

最初の実行

.circleci/config.yml

version: 2.1
orbs:
  ruby: circleci/ruby@1.4.0
jobs:
  build:
    docker:
      - image: cimg/ruby:3.0.2
        environment:
          APP_BUNDLER_VERSION: 2.1.4
    working_directory: ~/my-app
    steps:
      - checkout:
          path: ~/my-app
      - ruby/install-deps
  test:
    docker:
      - image: cimg/ruby:3.0.2
      - image: circleci/mysql:8.0
        environment:
          MYSQL_ROOT_PASSWORD: password
          MYSQL_DATABASE: my_app_test
    environment:
      BUNDLE_JOBS: "3"
      BUNDLE_RETRY: "3"
      APP_DATABASE_HOST: "127.0.0.1"
      RAILS_ENV: test
    working_directory: ~/my-app
    steps:
      - checkout:
          path: ~/my-app
      - ruby/install-deps
      - run:
          name: Database setup
          command: bundle exec rails db:migrate
      - run:
          name: yarn install
          command: yarn install
      - run:
          name: run webpack
          command: bundle exec bin/webpack
      - run:
          name: run rubocop
          command: bundle exec rubocop
      - run:
          name: run rspec
          command: bundle exec rspec spec/
workflows:
  version: 2
  build_and_test:
    jobs:
      - build
      - test:
          requires:
            - build

エラー内容

Failures:

  1) Communities コミュニティの新規作成、画面への表示（ホーム画面/コミュニティ詳細）、編集、削除を行う
     Got 0 failures and 2 other errors:

     1.1) Failure/Error: Capybara.current_session.driver.browser.manage.window.resize_to(1440, 500)
          
          Webdrivers::BrowserNotFound:
            Failed to find Chrome binary.
          # ./spec/rails_helper.rb:78:in `block (2 levels) in <top (required)>'

エラーが発生。
ブラウザーが無いとのこと。

２回目

下記記事を参考に、ブラウザーが含まれたイメージを使用するよう修正。

.circleci/config.yml

version: 2.1
orbs:
  ruby: circleci/ruby@1.4.0
jobs:
  build:
    docker:
      # -browsersに変更
      - image: cimg/ruby:3.0.2-browsers
        environment:
          APP_BUNDLER_VERSION: 2.1.4
    working_directory: ~/my-app
    steps:
      - checkout:
          path: ~/my-app
      - ruby/install-deps
  test:
    docker:
      # -browsersに変更
      - image: cimg/ruby:3.0.2-browsers
      - image: circleci/mysql:8.0
        environment:
          MYSQL_ROOT_PASSWORD: password
          MYSQL_DATABASE: my_app_test
    environment:
      BUNDLE_JOBS: "3"
      BUNDLE_RETRY: "3"
      APP_DATABASE_HOST: "127.0.0.1"
      RAILS_ENV: test
    working_directory: ~/my-app
    steps:
      - checkout:
          path: ~/my-app
      - ruby/install-deps
      - run:
          name: Database setup
          command: bundle exec rails db:migrate
      - run:
          name: yarn install
          command: yarn install
      - run:
          name: run webpack
          command: bundle exec bin/webpack
      - run:
          name: run rubocop
          command: bundle exec rubocop
      - run:
          name: run rspec
          command: bundle exec rspec spec/
workflows:
  version: 2
  build_and_test:
    jobs:
      - build
      - test:
          requires:
            - build

エラー内容

同上

最終

公式ドキュメントをよく読むと、仕様が変更されたとのこと。

ブラウザーテスト
従来のイメージでは、ブラウザーテストを行う場合、利用可能なバリアントタグが 4 種類存在していました。 たとえば、Python v3.7.0 イメージでブラウザー テストを行う場合、circleci/python:3.7.0-browsers という Docker イメージを使用していたかも知れません。 今後、これら 4 つのタグは、CircleCI Browser Tools Orb との併用を前提とした単一のタグに統合されます。

ブラウザーテスト用の新しいバリアントタグには、Node.js およびブラウザーテスト用の一般的なユーティリティ (Selenium など) が含まれていますが、実際のブラウザーは含まれていません。 タグの統合に伴い、ブラウザーはプリインストールされなくなります。 代わりに、Google Chrome や Firefox などのブラウザー、および Chromedriver や Gecko などのドライバーは、browsers-tools Orb でインストールします。 これにより、CircleCI から提供されるツールに縛られることなく、ビルドで必要なブラウザーのバージョンを柔軟に組み合わせることができます。 この Orb の使用例については、こちらを参照してください。

.circleci/config.yml

version: '2.1'
orbs:
  browser-tools: circleci/browser-tools@x.y
jobs:
  test:
    docker:
      - image: 'cimg/node:13.12-browsers'
    steps:
      - browser-tools/install-chrome
      - browser-tools/install-chromedriver
      - run:
          command: |
            google-chrome --version
            chromedriver --version
          name: Check install
workflows: null

上記を参考にconfigを修正したところ、無事にテスト実行できた。
※最終的な.circleci/config.yml

最後に

より良い方法や間違い等ありましたらご指摘いただけますと幸いです！