I can click a button in Firefox - why not in Chrome? - google-chrome

Question

I'm using Watir WebDriver with Chrome and Firefox.
With FF, I can click the following button:
#browser.button(:id => 'btnSubmit').when_present.click
With Chrome, I get the following message:
Selenium::WebDriver::Error::UnknownError: unknown error: Element is not clickable at point (730, 681). Other element would receive the click: <div class="blockUI blockOverlay" style="z-index: 1000; border: none; margin: 0px; padding: 0px; width: 100%; height: 100%; top: 0px; left: 0px; background-color: rgb(0, 0, 0); opacity: 0.38143215011627357; cursor: default; position: fixed;"></div>
If I place a breakpoint on the offending line, the next single step in debug mode works OK.
As an experiment, in case of timeout issues, I changed the code to:
#browser.button(:id => 'btnSubmit').when_present(100).click
This fails in run mode, with the same error.
If I search the entire page, I can't find the "other element" that would receive the click.
<div class="blockUI.............
Here are the divs before and after the button:
<div id="divSaveCancel" class="row">
<div class="six mobile-four columns">
<ul class="button-group even three-up">
<li>
<button id="cancelBtn" type="button" class="small alert button">
Cancel</button></li>
<li>
<button class="small button" id="btnSave" type="submit" name="command" value="btnSaveDraft"
onclick="beforeSubmit();">
Save Draft</button></li>
<li>
<button class="small success button" id="btnSubmit" type="submit" name="command"
onclick="beforeSubmit();" value="btnSubmit">
Save and Continue</button>
</li>
</ul>
</div>
<div class="six mobile-four columns" style="text-align: right;">
<span style="text-align: right; margin-right: 5%; vertical-align: middle; width: 100%;">
<button id="btnSendNotification2" class="small button" type="button">
Send Notification</button></span>
</div>
</div>

Answer 1

Instead of doing:
while (#browser.div(:class => 'blockUI blockOverlay').present?)
sleep(1)
end
#browser.button(:id => 'btnSubmit').click
You should be able to do:
#browser.div(:class => 'blockUI blockOverlay').wait_while_present
#browser.button(:id => 'btnSubmit').click

Answer 2

#JustinKo: I checked both.
Here is a comment from the developer:
It is a modal ‘Please Wait...’ popup that appears for a very short duration of time when the document is being loaded or when some time consuming activity is being performed. That code is dynamically injected by JQuery plug-in and removed soon after. That may be the reason why we can’t find it in the document source.
Remember that the following did not work:
#browser.button(:id => 'btnSubmit').when_present(100).click
But the following works:
sleep(1)
#browser.button(:id => 'btnSubmit').click
So the target element is always present.
The following does not work:
while !(#browser.button(:id => 'btnSubmit').visible?)
sleep(1)
end
#browser.button(:id => 'btnSubmit').click
So the target element is always visible.
The solution is to wait for the "other element" to disappear:
while (#browser.div(:class => 'blockUI blockOverlay').present?)
sleep(1)
end
#browser.button(:id => 'btnSubmit').click