Same button is on 2 pages,but on one of the page its not clickable by selenium

Question

The button is visible on UI and isdisplayed() is telling its displaying, but only the problem is, selenium is not clicking this button. The same button is placed on 2 pages, on first page its clickable and on other page its not clicking.

Tried css selector,relative xpath and absolute xpath, result is same.

Info:-

first page HTML where button [xpath: html/body/div[1]/div/div[2]/div[2]/div[2]/ng-include[2]/div/div[1]/div/div[1]/ul/li[2]/div/button] getting clicked:

<-div class="ng-scope" ng-if="info.complete">
<-ng-include class="ng-scope" src="getURL('logvault')" sly-show="info.current == 'logvault'">
<-div class="gb-logvault-bg gb-logvault ng-scope" ng-controller="LogVaultCtrl">
<-div class="row-fluid filter-container gb-logvault-filter-container">
<-div class="col-sm-12 gb-logvault-quick-filter">
<-div class="filter-btn-contents gb-logvault-filter-btn-contents pull-right">
<-ul class="nav navbar-nav">
<-li>
<-span class="icon-disk gb-icon gb-search-icon" title="Save view" ng-click="showSaveFilterModal()"><-/span>
<-/li>
<-li>
<-div class="btn-group">
<-button class="btn btn-xs dropdown-toggle gb-explorer-saved-filters-btn" ng-click="getSavedFilters()" data-toggle="dropdown" title="Select View">
<-span class="pull-left ng-binding">Select View<-/span>
<-span class="caret pull-right gb-explorer-saved-filters-caret"><-/span>
<-/button>

========================================

Second page HTML where same button

[xpath : 
    html/body/div[1]/div/div[2]/div[2]/div[2]/ng-include[1]/div/div/div[1]/div[3]/ul/li[2]/div/button]

is NOT getting clicked:

<-div class="ng-scope" ng-if="info.complete">
<-ng-include class="ng-scope" src="getURL('explorer')" sly-show="info.current == 'explorer'">
<-div class="gb-explorer ng-scope" ng-controller="ExplorerCtrl">
<-div class="col-sm-12 content-col">
<-div class="row-fluid filter-container">
<-div class="col-sm-3 input-group-1">
<-div class="col-sm-4 input-group-2">
<-div class="col-sm-4 gb-explorer-filter-selection-div">
<-ul class="nav navbar-nav">
<-li>
<-span class="icon-disk gb-icon gb-search-icon" title="Save View" ng-click="showSaveFilterModal()"></span>
<-/li>
<-li>
<-div class="btn-group">
<-button class="btn btn-xs dropdown-toggle gb-explorer-saved-filters-btn" ng-click="getSavedFilters()" data-toggle="dropdown" title="Select View">
<-span class="pull-left ng-binding">Select View<-/span>
<-span class="caret pull-right gb-explorer-saved-filters-caret"><-/span>
<-/button>

Answer 1

I would try selecting the element and dump its text instead of clicking it, to see if it's a matter of selection or event activation.

Two other possible problems could be:

• a race condition where this DOM is not rendered yet when you select (although usually there are implicit waits preventing this in place)
• the element not being displayed, as WebDriver tends to replicate the user's behavior and not interact with currently not visible elements.

Answer 2

The button that's not working is missing the closing dash in the span tag - is that a copy and paste issue, or have you lifted it straight from your script?

For example:

<-span class="icon-disk gb-icon gb-search-icon" title="Save view" ng-click="showSaveFilterModal()"><-/span>

versus:

<-span class="icon-disk gb-icon gb-search-icon" title="Save View" ng-click="showSaveFilterModal()">< /span>

The Xpath's are slightly different as well (so it's not the exact same button), but I imagine this is intentional.

Hope this helps!

Answer 3

I just upgraded my selenium to 2.53 and upgraded to Firefox latest 46.0.1 and everything started working fine with relative xpath.