Watir-webdriver throws 'not clickable' error even when element is visible, present

Question

I am trying to automate tests in Ruby using the latest Watir-Webdriver 0.9.1, Selenium-Webdriver 2.53.0 and Chrome extension 2.21. However the website that I am testing has static headers at the top or sometimes static footers at the bottom. Hence since Watir auto-scrolls an element into view before clicking, the elements get hidden under the static header or the static footer. I do not want to set desired_capabitlites (ElementScrollBehavior) to 1 or 0 as the websites I am testing can have both - static header or static footer or both.

Hence the question are:
1) Why does Watir throw an exception Element not clickable even when the element is visible and present? See ruby code ( I have picked a random company website for an example) and the results below.
2) How can I resolve this without resorting to ElementScrollBehaviour?

Ruby code:

require 'watir-webdriver'

browser = Watir::Browser.new :chrome

begin
  # Step 1
  browser.goto "shop.coles.com.au/online/mobile/national"

  # Step 2 - click on 'Full Website' link at the bottom
  link = browser.link(text: "Full website")

  #check if link exists, present and visible?
  puts link.exists?
  puts link.present?
  puts link.visible?

  #click on link
  link.click

rescue => e
  puts e.inspect
ensure
  sleep 5
end

puts browser.url
browser.close

Result:

$ ruby link_not_clickable.rb

true
true
true

Selenium::WebDriver::Error::UnknownError: unknown error: Element is not clickable at point (460, 1295). Other element would receive the click: div class="shoppingFooter"...div

  (Session info: chrome=50.0.2661.75)
  (Driver info: chromedriver=2.21.371459 (36d3d07f660ff2bc1bf28a75d1cdabed0983e7c4),platform=Mac OS X 10.10.5 x86_64)>
http://shop.coles.com.au/online/mobile/national

thanks!

Answer 1

You can do a click at any element without getting it visible. Check this out:

link.fire_event('click')

BUT It is very very very not good decision as far as it will click the element even if it is not actually visible or in case when it is just impossible to click it (because of broken sticky footer for example).

That's why much better to wait the fooler, scroll the page and then click like:

browser.div(id: "footerMessageArea").wait_until_present
browser.execute_script("window.scrollTo(0, document.body.scrollHeight);")
link.click

Answer 2

The sticky footer is blocking webdriver from performing the click, hence the message that says 'other element would receive the click'.

There are several different ways you can get around this.

1. Scroll down to the bottom of the page before the click
2. Hide/Delete the sticky footer before any/all link clicks
3. Focus on an element below the element you want to click before you perform the click

Answer 3

I Guess your element is visible in the screen.

Before clicking on the element first you have to scroll the webpage so that element is visible then perform the click. Hope it should work.

Answer 4

I had similar issue, I just used following javascript code with watir:

link = browser.link(text: "Full website")
@browser.execute_script("arguments[0].focus(); arguments[0].click();", link)

Answer 5

Sometimes I have to use .click! which i believe is the fire_event equivalent. Basically something is layered weird, and you just have to go around the front end mess.