OldGrantonian
OldGrantonian

Reputation: 607

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

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>

Upvotes: 2

Views: 1043

Answers (2)

Justin Ko
Justin Ko

Reputation: 46826

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

Upvotes: 1

OldGrantonian
OldGrantonian

Reputation: 607

@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

Upvotes: 0

Related Questions