Finding an element that have multiple on the page

Question

I am using Ghost Inspector and I have an element on the page that has an attribute that we use for QA. But there are more than one of them and I need to find the second one on the page. If i just select the attribute it grabs the first one on the page.

driver.findElement(By.cssSelector[data-qa="settings:unfollow-business"][1])

data-qa="settings:unfollow-business" this is my attribute that I can select.

Answer 1

If you are 100% sure that the second element is the one you want, you can try the below.

var secondwebelement = driver.findElements(By.cssSelector(data- 
qa="settings:unfollow-business"))[1];

Answer 2

No need to go over a list since you should only query those things you actually need because querying over the browser is slow and expensive (especially when your tests run in a selenium grid).

Just use the Selector "*[data-qa="settings:unfollow-business"]:nth-of-type(2)" and you'll actually get only the second element.

But just as advice, using the position in a list makes for rather unstable selectors, so you might want to look into using the structure of your application rather than the position.

Answer 3

Basically you need to generate List of Webelements (and put there all items with given selectors). The code higher might not work if you are using Java8 (there is no var there).

In that case you need to use:

// create list of elements
List<WebElement> elements = driver.findElements(By.cssSelector(data-qa="settings:unfollow-business"))[1];

// now access element from list above
elements[1].click();