How to click on the image inside a grid using selenium webdriver?

Question

I have to click on an image inside a grid. Grid elements have dynamic ID's. Therefore it's impossible to capture elements as usual. How can click on this image?

I have boxed the image I want to click using a red color. I have tried using classname, css locators. Didn't try xpath because it changes.
Im using testng,java,selenium webdriver, chromdriver

This is what I have developed upto now using given answers. But I get and exception when I run the code. I have added the code relevant for clicking the image (Which doesn't work as expected).

//Locator class 
public static final String RegistrationArrowButton = "x-tree-elbow-img x-tree-elbow-plus x-tree-expander";  



//Method class      
List<WebElement> listOfElements = driver.findElements(
        By.cssSelector(RecordDealLocators.RegistrationArrowButton)
);                               




//Exception occurd
java.lang.IndexOutOfBoundsException: Index: 1, Size: 0

at java.util.ArrayList.rangeCheck(ArrayList.java:657)
at java.util.ArrayList.get(ArrayList.java:433)
at BaseUtils.LaunchDriver.clickList(LaunchDriver.java:47)
at Pages.PurchaseDealPage.PurchasePage.clickNavigateArrow(PurchasePage.java:34)
at Test.DealsTest.PurchaseTest.PurchaseDeal(PurchaseTest.java:29)
at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
at java.lang.reflect.Method.invoke(Method.java:498)
at org.testng.internal.MethodInvocationHelper.invokeMethod(MethodInvocationHelper.java:104)
at org.testng.internal.Invoker.invokeMethod(Invoker.java:645)
at org.testng.internal.Invoker.invokeTestMethod(Invoker.java:851)
at org.testng.internal.Invoker.invokeTestMethods(Invoker.java:1177)
at org.testng.internal.TestMethodWorker.invokeTestMethods(TestMethodWorker.java:129)
at org.testng.internal.TestMethodWorker.run(TestMethodWorker.java:112)
at org.testng.TestRunner.privateRun(TestRunner.java:756)
at org.testng.TestRunner.run(TestRunner.java:610)
at org.testng.SuiteRunner.runTest(SuiteRunner.java:387)
at org.testng.SuiteRunner.runSequentially(SuiteRunner.java:382)
at org.testng.SuiteRunner.privateRun(SuiteRunner.java:340)
at org.testng.SuiteRunner.run(SuiteRunner.java:289)
at org.testng.SuiteRunnerWorker.runSuite(SuiteRunnerWorker.java:52)
at org.testng.SuiteRunnerWorker.run(SuiteRunnerWorker.java:86)
at org.testng.TestNG.runSuitesSequentially(TestNG.java:1293)
at org.testng.TestNG.runSuitesLocally(TestNG.java:1218)
at org.testng.TestNG.runSuites(TestNG.java:1133)
at org.testng.TestNG.run(TestNG.java:1104)
at org.testng.IDEARemoteTestNG.run(IDEARemoteTestNG.java:72)
at org.testng.RemoteTestNGStarter.main(RemoteTestNGStarter.java:127)
at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
at java.lang.reflect.Method.invoke(Method.java:498)
at com.intellij.rt.execution.application.AppMain.main(AppMain.java:147)

Please note that I have used Page Object Model

Answer 1

I would try to select all the IMGs that have those three specific classes:

List<WebElement> listOfElements = driver.findElements(
   By.cssSelector("img[class='x-tree-elbow-img x-tree-elbow-plus x-tree-expander']")
);
listOfElements.get(0).click();

The get(0) takes the first found IMG, but you could also use this to click the second if needed.

You can also find elements in other elements. So find the first item of the page that does not change. Now within find the first table, then the first row, the first cell and the first image. This page has some examples: https://seleniumjava.com/2017/12/07/find-child-elements-with-locator-chaining/

WebElement result = driver.findElement(By.id("an_id_that_doesnt_change"));
WebElement table = result.findElement(By.cssSelector("table"));
WebElement first_row = table .findElement(By.cssSelector("tr"));
WebElement first_cell = first_row .findElement(By.cssSelector("td"));
WebElement first_img = first_cell .findElement(By.cssSelector("img"));
first_img.click();

Answer 2

You have a grid structure so that you can just use coordinates like the image is in first row and first column.

Answer 3

Will the src attribute be unique inside the image? You can try something like

Xpath: //img[@src="<Paste that long string here>"]
CSS Selector: img[src='<Paste that long string here>']