How to Identify a Web element if there are two or more elements having exactly the same attributes?

Question

Below is a Piece of Code having three elements with same attributes. How do i access the third element(3^rd div).

<pre>
  <div class="tab-bar ons-tab-bar__footer ons-tabbar-inner" qmx-tabs="">
    <div class="tab-bar__item ng-scope" ng-repeat="tab in tabbarTabsList track by tab.page">

      <div class="tab-bar__item ng-scope" ng-repeat="tab in tabbarTabsList track by tab.page">
        <button class="tab-bar__button tab-bar-inner qmx-tab-active" ng-class="{'qmx-tab-active' : $index === activeTabIndex }" ng-click="loadTab($index)">
      </div>


        <div class="tab-bar__item ng-scope" ng-repeat="tab in tabbarTabsList track by tab.page">
          <button class="tab-bar__button tab-bar-inner" ng-class="{'qmx-tab-active' : $index === activeTabIndex }" ng-click="loadTab($index)">
        </div>

    </div>
  </div>
</pre>

I need to use findElement(By.) method.

RemcoW · Answer 1 · 2016-06-02T15:54:25.000

0

If you really need to use the findElement(By.) method you can use xpath to select the Nth element matching the descriptor

(//div)[3]

Alternatively you could use the findElements(By.) method to find all elements matching the descriptor an getting the Nth element out of this list (or iterate over it if you need multiple elements)

edited Jun 02 '16 at 15:54

answered Jun 02 '16 at 15:32

RemcoW

4,196
1
22
37

I used **driver.findElement(By.xpath("//div[3]/button/")).click();** but got this error "The given selector //div[3]/button/ is either invalid or does not result in a WebElement." – Pawan Juyal Jun 02 '16 at 15:40
Remove the last `/` to make it a valid selector – Mobrockers Jun 02 '16 at 15:49
@PawanJuyal I'm having trouble with your HTML. Could you fix the indentation in your example? I think the problem is that the 3rd div is enclosed in a tag. If thats the case you could try somethings like //pre/b/div/button – RemcoW Jun 02 '16 at 15:50
1

Use brackets: `(//div)[3]` to select div. See this: http://stackoverflow.com/questions/3674569/how-to-select-specified-node-within-xpath-node-sets-by-index-with-selenium. – timbre timbre Jun 02 '16 at 15:52
alternatively, use css: `div:nth-of-type(3)` – ddavison Jun 02 '16 at 18:17
@RemcoW sorry for that tag. It wasn't supposed to be there. – Pawan Juyal Jun 03 '16 at 03:49
@RemcoW I used driver.findElement(By.xpath("//div[3]/button").click(); and received this error "Element is not clickable at point (1126.3333129882812, 634). Other element would receive the click:
" ** I even used selenium IDE's record feature. It also uses the same xpath which is working.** – Pawan Juyal Jun 03 '16 at 03:57
driver.findElement(By.xpath("//div[3]/button")).sendKeys(Keys.RETURN); Appears to be working here. Still I'm confused as to why click() method won't work. – Pawan Juyal Jun 03 '16 at 04:14
@PawanJuyal Seems like a modal is blocking the button. Try using a javascript click as explained here http://stackoverflow.com/questions/11947832/how-to-click-an-element-in-selenium-webdriver-using-javascript – RemcoW Jun 03 '16 at 08:43

score 0 · Answer 2 · answered Jun 02 '16 at 18:19

You can use By.cssSelector(), also since your item is under a <b> tag,

driver.findElement(By.cssSelector("div.tab-bar b > div.tab-bar__item"));

Additionally, looking at your code, you probably want to click it. If you want to click it, then you need to click the button underneath it.

driver.findElement(By.cssSelector("div.tab-bar b > div.tab-bar__item > button")).click();

How to Identify a Web element if there are two or more elements having exactly the same attributes?

2 Answers2