Capybara Upgrade 2.14.0 to 3.39.0 related Issue

[raoehtesham03]

I have upgraded my rails application from ruby 2.7.8 to 3.0.6. With this I also upgraded Capybara to 2.14.0 to 3.39.0.

But when I am running the feature test cases, my feature test cases as they are not able to find the xpath as the data/page is not loaded
completely till now.
So, how to handle this?

Ruby - 3.0.6
Rails - 6.1
Capybara - 3.39.0

Below is my Capybara.rb file.

`
require "capybara/poltergeist"
require "selenium/webdriver"

    Capybara.register_driver :poltergeist do |app|
      Capybara::Poltergeist::Driver.new(app, js_errors: true, inspector: true)
    end
    
    Capybara.register_driver :chrome do |app|
      args = []
      capabilities = Selenium::WebDriver::Options.chrome(
        "goog:chromeOptions" => { "args" => args }
      )
    
      Capybara::Selenium::Driver.new app,
        browser: :chrome,
        options: capabilities
    end
    
    Capybara.raise_server_errors = false
    
    Capybara.default_max_wait_time = 10
    
    Capybara.default_driver    = :rack_test
    Capybara.default_normalize_ws = true
    Capybara.javascript_driver = :chrome
    
    RSpec.configure do |config|
      config.before(:each, js: true) do
        driver = Capybara.current_session.driver
        driver.browser.manage.window.maximize
    
      end
    
      config.after(:each, js: true) do |example|
        if example.exception.present?
          filename        = File.basename(example.metadata[:file_path])
          line_number     = example.metadata[:line_number]
          screenshot_name = "screenshot__#{filename}:#{line_number}.png"
    
          page.save_screenshot(Rails.root.join("tmp/capybara", screenshot_name))
        end
      end
    end

`

Error

Failure/Error: find(".flexible-col.ml-auto.btn-group.ilter-button.ng-scope").click

 Selenium::WebDriver::Error::ElementClickInterceptedError:
   element click intercepted: Element <div class="flexible-col ml-auto btn-group ilter-button ng-scope" ng-if="filterVisibilityCondition()">...</div> is not clickable at point (644, 119). Other element would receive the click: <div class="flexible-col flex-grow">...</div>
     (Session info: chrome=91.0.4472.114)

[mvz]

It sounds like you are doing a big upgrade in one go, so the cause of this could be anywhere. I recommend upgrading each dependency separately, and running the specs and committing after each upgrade. Then, once the problematic dependency is found, you can try making the upgrade for that dependency smaller. For example, you were not using the latest 2.x version of capybara before. So it is best to first upgrade to 2.18.0 of capybara. The same may apply to other dependencies.

[mvz]

I don't know about any configuration change. I don't think you need to change anything.

Have you tried first upgrading to an earlier Capybara version?

Also, since you're testing with selenium, you can use the non-headless version and visually inspect what the problem may be. The drivers may be more strict about only clicking on elements that are visible and on top.

[raoehtesham03]

Yeah I have upgraded the earlier version.
Maybe as Ruby 3.0 is much faster than ruby 2.7.0 due to which it's not able to find that XPath or element.

[raoehtesham03]

Also if I put debugger point I in my code then the test case passes. As it gets enough time to stay on the page.

[mvz]

Right, so you may want to wait for that element to be visible instead of clicking immediately. Now, I thought find would already wait for the element to be visible, but you could try if find(".flexible-col.ml-auto.btn-group.ilter-button.ng-scope", visible: true) works.

[raoehtesham03]

I tried this but it is also not working.