How can i click an image from the search results page - selenium

Question

I am writing a test in Webdriver C# with Nunit. I have a search results page loaded with a list of products with images. I want to click the 1st image in the results.
I have tried using the Xpath (I used firepath to get this value)
[FindsBy(How = How.XPath, Using = "html/body/form/div[2]/div[4]/div/div[2]/p")]
private IWebElement ProductImage_xpath {get; set; }
When it runs it says:
Could not find element by XPath.
I would like to use CSS selector if possible as that is faster than finding by Xpath.
What syntax could I use to locate the image from the code snipped below?
Note: the hyperlinks are dynamic, I don't want to use the href.
public SearchResultsPage clickProduct_Image()
{
ProductImage_xpath.Click();
Console.Out.WriteLine("ProductImage = " + ProductImage_xpath.Text);
return new SearchResultsPage(Driver);
}
The Code snippet:
<div id="main" class="nav_redesign s-left-nav-rib-redesign" data-page-construction="aui" skeleton-key="results--searchTemplate listLayout so_gb_en --left-nav--shopping-engine">
<div id="topStatic">
<div id="top">
<div id="topAmabot"> </div>
<div id="searchTemplate" class="searchTemplate listLayout so_gb_en ">
<div id="topDynamicContent">
<div id="rightContainerATF">
<div id="rightResultsATF">
<div id="widthPreserver"></div>
<div id="centerPlus">
<div id="rhsAjax"></div>
<div id="resultsCol" class="">
<div id="centerMinus" class="">
<div id="atfResults" class="list results apsList">
<div id="result_0" class="fstRow prod celwidget" name="1780974728">
<div class="linePlaceholder"></div>
<div class="image imageContainer">
<a href="http://testerServer1co.uk/SpaceExplorer/dp/1780974728/ref=sr_1_1?ie=UTF8&qid=1409311161&sr=8-1&keywords=planets+1">
<div class="imageBox">
<img class="productImage cfMarker" alt="Product Details" src="http://ecx.images-test.com/images/I/51iYWWt1BqL._SL160_PIsitb-sticker-arrow-dp,TopRight,12,-18_SH30_OU02_AA160_.jpg" onload="viewCompleteImageLoaded(this, new Date().getTime(), 16, false);">
</div>

Answer 1

Xpath is very very bad choice to find element on the page =). As you said better use css selector. I don't know how your image presents on the page, but i'll write possible variants, choose the best one. So, using css selectors to find your image:
1. You can find any element using it's class
//will find "div class="image imageContainer""
driver.findElement(By.Css(".imageContainer"))
2. Combine searching by class and find first "a" child in that div
driver.findElement(By.css(".imageContainer > a"))
3.Find element using known attribute
driver.findElement(By.css("img[alt='Product Details']"))
4. Find element by ID
driver.findElement(By.Css("#atfResults"));
//or
driver.findElement(By.Id("atfResults"));
Well, it will be enough for you, i think. If you have any questions, you are welcome.