title: Error with headless chrome driver unable to click an anchor element
body: <p>I'm trying to test my pagination feature with rspec, capybara, selenium, and chrome headless driver. I keep running into this error:</p>
  <pre><code>Failures:
  
    1) Paginations user clicks on next button
       Failure/Error: click_link('next page')
       
       Selenium::WebDriver::Error::ElementClickInterceptedError:
         element click intercepted: Element &lt;a class=&quot;paginator-btn&quot; href=&quot;/articles?page=2&amp;amp;items_limit=10&quot; style=&quot;pointer-events: none;&quot;&gt;...&lt;/a&gt; is not clickable at point (603, 217). Other element would receive the click: &lt;div class=&quot;paginator-container&quot;&gt;...&lt;/div&gt;
           (Session info: headless chrome=98.0.4758.109)
       # 0   chromedriver                        0x0000000102e87960 chromedriver + 4438368
       # 1   chromedriver                        0x0000000102e1d03c chromedriver + 4001852
       # 2   chromedriver                        0x0000000102a7230c chromedriver + 156428
       # 3   chromedriver                        0x0000000102aa73bc chromedriver + 373692
       # 4   chromedriver                        0x0000000102aa55e0 chromedriver + 366048
       # 5   chromedriver                        0x0000000102aa341c chromedriver + 357404
       # 6   chromedriver                        0x0000000102aa23cc chromedriver + 353228
       # 7   chromedriver                        0x0000000102a97c50 chromedriver + 310352
       # 8   chromedriver                        0x0000000102a97648 chromedriver + 308808
       # 9   chromedriver                        0x0000000102aca454 chromedriver + 517204
       # 10  chromedriver                        0x0000000102a96400 chromedriver + 304128
       # 11  chromedriver                        0x0000000102e4a4a8 chromedriver + 4187304
       # 12  chromedriver                        0x0000000102e60588 chromedriver + 4277640
       # 13  chromedriver                        0x0000000102e65268 chromedriver + 4297320
       # 14  chromedriver                        0x0000000102e60dd0 chromedriver + 4279760
       # 15  chromedriver                        0x0000000102e402ec chromedriver + 4145900
       # 16  chromedriver                        0x0000000102e79f0c chromedriver + 4382476
       # 17  chromedriver                        0x0000000102e7a080 chromedriver + 4382848
       # 18  chromedriver                        0x0000000102e8e28c chromedriver + 4465292
       # 19  libsystem_pthread.dylib             0x00000001b54e9240 _pthread_start + 148
       # 20  libsystem_pthread.dylib             0x00000001b54e4024 thread_start + 8
       # ./spec/features/pagination_spec.rb:46:in `block (2 levels) in &lt;top (required)&gt;'
  </code></pre>
  <p>gemfile:</p>
  <pre><code>source 'https://rubygems.org'
  git_source(:github) { |repo| &quot;https://github.com/#{repo}.git&quot; }
  
  ruby '3.0.3'
  
  # Bundle edge Rails instead: gem 'rails', github: 'rails/rails', branch: 'main'
  gem 'rails', '~&gt; 6.1.4', '&gt;= 6.1.4.4'
  
  gem 'react-rails'
  
  # Use postgresql as the database for Active Record
  gem 'pg', '~&gt; 1.1'
  # Use Puma as the app server
  gem 'puma', '~&gt; 5.0'
  # Use SCSS for stylesheets
  gem 'sass-rails', '&gt;= 6'
  # Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
  gem 'webpacker', '~&gt; 5.0'
  # Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
  gem 'turbolinks', '~&gt; 5'
  # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
  gem 'jbuilder', '~&gt; 2.7'
  # Use Redis adapter to run Action Cable in production
  # gem 'redis', '~&gt; 4.0'
  # Use Active Model has_secure_password
  # gem 'bcrypt', '~&gt; 3.1.7'
  
  # Use Active Storage variant
  # gem 'image_processing', '~&gt; 1.2'
  
  # Reduces boot times through caching; required in config/boot.rb
  gem 'bootsnap', '&gt;= 1.4.4', require: false
  
  gem &quot;aws-sdk-s3&quot;, require: false
  
  group :development, :test do
    gem 'rspec-rails', '~&gt; 5.0.0'
    # Call 'byebug' anywhere in the code to stop execution and get a debugger console
    gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
  
    gem 'factory_bot_rails'
  
    gem 'lorem_ipsum_amet'
  
    gem 'dotenv-rails'
  end
  
  group :development do
    # Access an interactive console on exception pages or by calling 'console' anywhere in the code.
    gem 'web-console', '&gt;= 4.1.0'
    # Display performance information such as SQL time and flame graphs for each request in your browser.
    # Can be configured to work on production as well see: https://github.com/MiniProfiler/rack-mini-profiler/blob/master/README.md
    gem 'rack-mini-profiler', '~&gt; 2.0'
    gem 'listen', '~&gt; 3.3'
    # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
    gem 'spring'
  end
  
  group :test do
    gem 'simplecov', require: false
    gem 'codecov', require: false
    gem 'capybara'
    gem 'webdrivers', '~&gt; 5.0'
    gem 'launchy', '~&gt; 2.5'
    gem 'database_cleaner-active_record'
  end
  
  # Windows does not include zoneinfo files, so bundle the tzinfo-data gem
  gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
  </code></pre>
  <p>test suite (the examples marked xscenario pass):</p>
  <pre><code>require 'rails_helper'
  
  RSpec.feature &quot;Paginations&quot;, type: :feature do
  
    before(:all) do
      ActionController::Base.allow_forgery_protection = true
    end
  
    after(:all) do
      ActionController::Base.allow_forgery_protection = false
    end
  
    xscenario &quot;user visits articles home page to see only 10 articles&quot;, js: true do
      FactoryBot.create_list(:article, 11)
  
      visit articles_path
  
      expect(page).to have_css &quot;h2.clickable-link&quot;, count: 10
    end
  
    xscenario &quot;user clicks on prev button&quot;, js: true do
      FactoryBot.create_list(:article, 11)
  
      visit articles_path
  
      click_link('next page')
      click_link('prev page')
     
      expect(Article.count).to eq(11)
      expect(page).to have_content(Article.last.title)
    end
  
    xscenario &quot;user tries to click prev button on first page but button is disabled&quot;, js: true do
      FactoryBot.create(:article)
  
      visit articles_path
  
      expect(page).to have_link('prev page', style: 'pointer-events: none;')
    end
  
    scenario &quot;user clicks on next button&quot;, js: true do
      FactoryBot.create(:article)
  
      visit articles_path
  
      click_link('next page')
      # save_and_open_page
  
      expect(page).to have_content(Article.first.title)
    end
  
    xscenario &quot;user tries to click next button on last page but button is disabled&quot;, js: true do
      FactoryBot.create_list(:article, 11)
  
      visit articles_path
  
      click_link('last page')
  
      expect(page).to have_link('next page', style: 'pointer-events: none;')
    end
  
    xscenario &quot;user clicks on first page button&quot;, js: true do
      FactoryBot.create_list(:article, 1)
  
      visit articles_path
  
      click_link('first page')
  
      expect(page).to have_content(Article.last.title)
    end
  
  
    xscenario &quot;user clicks on last page button&quot;, js: true do
      FactoryBot.create_list(:article, 15)
  
      visit articles_path
  
      click_link('last page')
  
      expect(page).to have_content(Article.first.title)
    end
  
    xscenario &quot;user selects 5 for limit of items&quot;, js: true do
      FactoryBot.create_list(:article, 6)
  
      visit articles_path
  
      select '5', from: 'paginator'
  
      expect(page).to have_css &quot;h2.clickable-link&quot;, count: 5
    end
  
    xscenario &quot;user selects 10 for limit of items&quot;, js: true do
      FactoryBot.create_list(:article, 11)
  
      visit articles_path
  
      select '10', from: 'paginator'
  
      expect(page).to have_css &quot;h2.clickable-link&quot;, count: 10
    end
  
    xscenario &quot;user selects 25 for limit of items&quot;, js: true do
      FactoryBot.create_list(:article, 26)
  
      visit articles_path
  
      select '25', from: 'paginator'
  
      expect(page).to have_css &quot;h2.clickable-link&quot;, count: 25
    end
  
  
    xscenario &quot;user selects 50 for limit of items&quot;, js: true do
      FactoryBot.create_list(:article, 51)
  
      visit articles_path
  
      select '50', from: 'paginator'
  
      expect(page).to have_css &quot;h2.clickable-link&quot;, count: 50
    end
  
  
    xscenario &quot;user selects all for limit of items&quot;, js: true do
      FactoryBot.create_list(:article, 11)
  
      visit articles_path
  
      select 'all', from: 'paginator'
  
      expect(page).to have_css &quot;h2.clickable-link&quot;, count: 11
    end
  end
  </code></pre>
  <p>here is the pagination component (react):</p>
  <pre><code>import React from 'react';
  import PropTypes from 'prop-types';
  import GetURLSearchParams from '../util/get-url-search-params';
  
  const Paginator = (props) =&gt; {
  
      const { link, lastPage } = props;
  
      const { page, items_limit } = GetURLSearchParams(window.location);
  
      const itemsLimitParam = items_limit || 10;
      const pageNumber = page || 1;
      
      function submitHandler(e) {
          e.preventDefault;
          window.location.href = `${link}?page=1&amp;items_limit=${e.target.value}`;
      }
  
    return (
      &lt;div className=&quot;paginator-container&quot;&gt;
          &lt;a 
              className=&quot;paginator-btn&quot;
              style={{&quot;pointerEvents&quot;: itemsLimitParam !== 0 ? &quot;auto&quot; : &quot;none&quot;}}
              href={`${link}?page=1&amp;items_limit=${itemsLimitParam}`}
          &gt;
              first page
          &lt;/a&gt;
  
          &lt;a 
              className=&quot;paginator-btn paginator-btn-margin-left&quot;
              style={{&quot;pointerEvents&quot;: pageNumber &gt; 1 ? &quot;auto&quot; : &quot;none&quot;}}
              href={`${link}?page=${pageNumber - 1}&amp;items_limit=${itemsLimitParam}`}
          &gt;
              prev page
          &lt;/a&gt;
  
          &lt;form onChange={submitHandler}&gt;
              &lt;select name=&quot;paginator&quot;&gt;
                  &lt;option selected disabled&gt;--Select limit of items--&lt;/option&gt;
                  &lt;option value={0}&gt;all&lt;/option&gt;
                  &lt;option value={5}&gt;5&lt;/option&gt;
                  &lt;option value={10}&gt;10&lt;/option&gt;
                  &lt;option value={25}&gt;25&lt;/option&gt;
                  &lt;option value={50}&gt;50&lt;/option&gt;
              &lt;/select&gt;
          &lt;/form&gt;
  
          &lt;a 
              className=&quot;paginator-btn&quot;
              style={{&quot;pointerEvents&quot;: pageNumber &lt; lastPage ? &quot;auto&quot; : &quot;none&quot;}}
              href={`${link}?page=${pageNumber + 1}&amp;items_limit=${itemsLimitParam}`}
          &gt;
              next page
          &lt;/a&gt;
          
          &lt;a 
              className=&quot;paginator-btn paginator-btn-margin-left&quot;
              style={{&quot;pointerEvents&quot;: itemsLimitParam !== 0 ? &quot;auto&quot; : &quot;none&quot;}}
              href={`${link}?page=${lastPage}&amp;items_limit=${itemsLimitParam}`}
          &gt;
              last page
          &lt;/a&gt;
      &lt;/div&gt;
    )
  }
  
  Paginator.propTypes = {
      link: PropTypes.string.isRequired,
      lastPage: PropTypes.number.isRequired,
  }
  
  export default Paginator
  </code></pre>
  <p>I have tried several ways to be more specific with querying the link but nothing I've tried works. Could it be a configuration setting?</p>