Find div element by multiple class names?

css, java, selenium, selenium-webdriver

Solution

I don't think barak manos's answer has fully explained it.

Imagine we have few elements as the followings:

- `<div class="value test"></div>`

- `<div class="value test "></div>`

- `<div class="first value test last"></div>`

- `<div class="test value"></div>`

How XPath matches

Match only 1 (exact match), barak's answer

driver.findElement(By.xpath("//div[@class='value test']"));

Match 1, 2 and 3 (match class contains `value test`, class order matters)

driver.findElement(By.xpath("//div[contains(@class, 'value test')]"));

Match 1, 2, 3 and 4 (as long as elements have class `value` and `test`)

driver.findElement(By.xpath("//div[contains(@class, 'value') and contains(@class, 'test')]"));

Also, in cases like this, Css Selector is always in favor of XPath (fast, concise, native).

Match 1

driver.findElement(By.cssSelector("div[class='value test']"));

Match 1, 2 and 3

driver.findElement(By.cssSelector("div[class*='value test']"));

Match 1, 2, 3 and 4

driver.findElement(By.cssSelector("div.value.test"));

Problem

Original source