Selenium webdriver select element "next to" already selected element

Question

Hi I'm using selenium on Java and here's the situation:

<article>
  <div class="inner-article">
    <a style="height:150px;" href="link">
      <img width="150" height="150" src="//somelink.jpg" alt="Qxvd 81gof8" />
     </a>
     <h1>
       <a class="name-link" href="something">THE NAME I"M USING TO FIND THIS ELEMENT
       </a>
     </h1>
     <p>
       <a class="name-link" href="somelink">Colour1</a>
     </p>
  </div>
</article>
<article>
  <div class="inner-article">
    <a style="height:150px;" href="somelink">
      <img width="150" height="150" src="someotherlink.jpg" alt="S83glqvbtt8" />
    </a>
    <h1>
      <a class="name-link" href="link">THE SAME NAME I"M USING</a>
    </h1>
    <p>
      <a class="name-link" href="">Colour2</a>
    </p>
  </div>
</article>

What I want to do is to click on the item with colour2 in it. For now I'm just clicking on the first item on the site by searching for the name of element "THE NAME I"M USING TO FIND THIS ELEMENT".

driver.findElement(By.xpath("//*[text()[contains(., 'THE NAME I"M USING TO FIND THIS ELEMENT')]]")).click();

Also wanted to add that there's more elements containing "colour 2" on the site so I need something that will find "colour2" by will start searching from ">THE SAME NAME I"M USING" element

Answer 1

I would try to avoid a find strategy that relies upon the text content as typically this most likely to change over time. It would also prevent you from finding an element and asserting on the text content. If that's not possible then the answers above are useful.

Instead I would use xpath or css selectors where you can determine which occurrence of the match that you wish to select. There are numerous options for navigating both xpath and css (I'd recommend going the css route for all selectors, though that is for a different discussion).

driver.findElement(By.xpath("//a[@class='name-link'][4]"))
driver.findElement(By.cssSelector(".name-link:nth-of-type(4)"))

Note these are very basic, you can nest and make your selectors more explicit as necessary.

Given my preference for CSS, this is my bible.

Answer 2

Use driver.findElements() function. It will find multiple items with the same By clauses.

Here some example code to click on both elements:

 List<WebElement> elements = box.findElements(By.something);
 elements.get(0).click();
 elememts.get(1).click();

Update:

If you want to find and click on this element:

<a class="name-link" href="">Colour2</a>

You might want to try this:

driver.findElement(By.linkText("Colour2")).click();

Other reads:

• https://stackoverflow.com/questions/8882295/how-to-get-the-first-element-of-the-list-or-set
• http://www.techbeamers.com/findelement-and-findelements-commands-examples/

Answer 3

If you don't actually need the item with text "Colour1", and the text is a link, your best option is to start with findElements(By.ByLinkText("Colour2")).

You should then be able to check each element in the list by navigating the DOM (element.parent.parent) and check for the parent element's innerText containing your search string. (parentElement.findElement(By.ByLinkText("THE SAME NAME I"M USING")))

Alternatively, you can do findElements(By.ByTagName("article")) and then do a search for the element that contains both your search string and "Colour2" in its innerText.

Answer 4

In most of the software testing companies we use below solutions:

driver.findElement(By.xpath("//h1[contains(text(),'THE SAME NAME I"M USING')]following-sibling::p//a[contains(text(),'Colour2')]")).click();

This will help as per your requirement

Further below are some other options you can try

Using Link text:

driver.findElement(By.linkText("Colour1")).click();
driver.findElement(By.linkText("Colour2")).click();

Using xpath:

driver.findElement(By.xpath("//a[contains(text(),'Colour1')]")).click();
driver.findElement(By.xpath("//a[contains(text(),'Colour2')]")).click();