Rails6のsystem_spec実行時にブラウザーに表示される「ユーザーの現在地の認識」を許可したい

Question

googlemapsAPIを使用して現在地が表示される地図を実装したのですが、Rspecのsystem_specで地図が表示されるページにvisitすると「ユーザーの現在地の認識」のポップアップが出てきて地図表示のテストがパスしません。
save_and_open_pageでブラウザー上に表示して手動で「ユーザーの現在地の認識」を許可すると地図が表示されるため、system_spec内で許可する動作を記述できれば良いかと考えているのですが、実装方法がわかりません。
ご教示のほどお願いいたします。

##設定
/capybara.rb

RSpec.configure do |config|
  Capybara.register_driver :selenium_chrome do |app|
    options = ::Selenium::WebDriver::Chrome::Options.new

    options.add_argument('--headless')
    options.add_argument('--no-sandbox') # chrootで隔離された環境(Sandbox)での動作を無効
    options.add_argument('--disable-gpu')
    options.add_argument('--window-size=1400,1400')

    Capybara::Selenium::Driver.new(app, browser: :chrome, options: options)
  end

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

  config.before(:each, type: :system, js: true) do
    driven_by :selenium_chrome
  end
end

##テストコード
system/maps_spec.rb

RSpec.describe 'Spots', type: :system do
  describe '表示とリンクのテスト', js: true do
    before do
      page.accept_confirm do
        visit spots_path
      end
    end

    it '地図が表示されること' do
      expect(page).to have_css '.gm-style'
    end
  end
end

##地図表示ページのコード
maps/index.rb

<div class="container">
  <div class="row">
    <div class="col-12 my-5 d-flex justify-content-center">
      <h2><i class="fas fa-map-marked-alt"></i>現在地から探す</h2>
    </div>
    <div id="map" class="mt-5 mx-auto"></div>
  </div>
</div>

<script>
  let map, geocoder, icon, storeMarker = [], infoWindow = [];
  const stores = gon.stores;
  let currentInfoWindow = null;

  function initMap(){
    geocoder = new google.maps.Geocoder()
    if(!navigator.geolocation) {
      alert('Geolocation APIに対応していません');
      return false;
    }
    // 現在地が取得できたら地図の中心にピンを立てて表示、取得に失敗したらアラートを表示
    navigator.geolocation.getCurrentPosition(function(position) {
      latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
      map = new google.maps.Map(document.getElementById('map'), {
        center: latLng,
        zoom: 12,
      });
      image = {
        url: "<%= asset_path('gmap_icon.png') %>",
        scaledSize: new google.maps.Size(50, 50),
      }
      marker = new google.maps.Marker({
        position:  latLng,
        map: map,
        icon: image,
        animation: google.maps.Animation.DROP,
        title:"現在地",
      });

      for (let i = 0; i < stores.length; i++){
        storeMarker[i] = new google.maps.Marker({
          map: map,
          position: {
            lat: stores[i].latitude,
            lng: stores[i].longitude,
          }
        });
        contentString =
          `<p class="mb-0">施設名：<a href='/stores/${stores[i].id}'>${stores[i].name}</a></p>` +
          '<hr class="my-0">' +
          `<p class="mt-3 mb-0">施設紹介:${stores[i].introduction}</p>` +
          `<p class="mt-1 mb-0">住所　　:${stores[i].prefecture_code}${stores[i].city}</p>`;

        infoWindow[i] = new google.maps.InfoWindow({
          content: contentString,
        });
        storeMarker[i].addListener("click", () => {
          if (currentInfoWindow) {
            currentInfoWindow.close();
          }
          infoWindow[i].open(map,storeMarker[i]);
          currentInfoWindow = infoWindow[i];
        });
      }
    }, function() {
      alert('位置情報取得に失敗しました！位置情報へのアクセスが許可されているか確認してください');
    });
  }
</script>

<script async defer
      src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=<%= Rails.application.credentials.g_map[:api] %>&callback=initMap">
</script>