Element is not clickable error Ruby / Watir

Question

In my test, I am attempting to hit etsy.com, do a search, click on a result, and add the item to my cart. I'm able to do everything up until the point where I attempt to click on the 'add to cart' button. The code below actually works in the IRB so I know my locator is solid, but when I run the test I get an element is unclickable at point error

C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/selenium-webdriver-3.6.0/lib/selenium/webdriver/remote/response.rb:71:in 'assert_ok': unknown error: Element is not clickable at point (930, 586) (Selenium::WebDriver::Error::UnknownError) (Session info: chrome=61.0.3163.100)

Here's my test

require 'watir'

# test that a user can search for and add an item to shopping cart
b = Watir::Browser.new :chrome

begin
  b.goto "http://etsy.com"
  b.text_field(:id => 'search-query').set 'bacon is my spirit animal coaster'
  b.button(:value => 'Search').present?
  b.button(:value => 'Search').click
  b.p(:text => /Bacon Spirit Animal Coaster/).click
  b.select_list(:id => 'inventory-variation-select-0').option(:text => 'Single ($8.00)').select
  b.button(:text => /Add to cart/).click

  if b.text.include?("item in your cart")
    puts "Test passed!"
  else
    puts "Test failed!"
  end 

ensure
  b.close
end

And here is the page HTML for the button.

<button class="btn-transaction" type="submit">
            <div class="btn-text">Add to cart</div>
            <div class="ui-toolkit">
                <div class="btn-spinner spinner spinner-small display-none"></div>
            </div>
        </button>

Answer 1

Depending on the browser width (and likely other factors), there may be dialogs floating over the add to cart button. For example, when the test failed for me, there was a get started dialog on top of the button. Chrome attempts to click by a location. If another element is on top of your element at that location, Chrome will throw the exception.

The easiest solution is to bypass Chrome's check by directly triggering the click event:

# Watir > 6.8.0:
b.button(:text => /Add to cart/).click! # note the exclamation mark

# Watir < 6.8.0:
b.button(:text => /Add to cart/).fire_event(:onclick)

Other solutions that may conditionally work:

• Maximize the browser before clicking the button - browser.window.maximize. This can move the floating element away from the button.
• Close the floating dialog.