Locating a set of elements by class attribute when class attribute contains multiple values

Question

I'm trying to populate a list WebElement by class value. It looks like it should be simple. There are 4 elements that look like my example. The idea is to loop through the list and validate the Product Name. This element is embedded in further parent div but I am looking to print the "Product Name" and not sure why I would need to look further up the DOM tree.

<div class="row prod-name"> == $0
      ::before     
     <h4>Product Name</h4>
      ::after   
</div>

I have tried a lot of combinations and am not getting the expected result. In all cases, I get productName.size() = 0

What feels like the obvious choice

List<WebElement> productNames = driver.findElements(By.cssSelector(".prod-name"));

xpath

List<WebElement> productNames = driver.findElements(By.xpath("//div[@class='prod-name']/h4"));

List<WebElement> productNames = driver.findElements(By.xpath("//*[@class='prod-name']/h4"));

cssSelector again

List<WebElement> productNames = driver.findElements(By.cssSelector(".prod-name h4"));

What am I missing? This should not be this hard. I have tried .row but and got similar results with the following difference productNames is no longer empty in many cases contain everything but the product names.

Answer 1

This appears to be a timing issue. use wait

WebDriverWait wait = new WebDriverWait(driver,30); wait.until(ExpectedConditions.visibilityOfElementLocated(By.cssSelector("button[name='product_code'][value='NELC']")));

on an element that should be late loading, this appears to have fixed my issue.