JavascriptExecutor.executeScript("arguments["+index+"].click();", elementName) does not work

Question

I'm using IntelliJ IDEA 2020.1 Community Edition for automated testing. The issue seems simple enough. I have a Search drop-down menu which also contains a Search menu option (among other options).

enter image description here

The .java code uses xpath to locate the object, which returns 2 elements:

 @FindBy(xpath = "//a[text()='Search']")
 WebElement searchButton;

Both objects are found, with the Search button identified as xpath="1" and the Search option as xpath="2"...

enter image description here

enter image description here

To differentiate between the menu button and menu option, I included two Methods, passing in the element and the Index number (0 for the button or 1 for the option):

 public void clickOnSearchButton(){
 clickIndexedElement(searchButton, 0);
 testLogger.log("Clicked on the 'Search' button");
 }
 public void clickOnSearchOption(){
 clickIndexedElement(searchButton, 1);
 testLogger.log("Clicked on the 'Search' option");
 }

The clickIndexedElement Method also seemed to be quite simple:

 public JavascriptExecutor js;
 js = (JavascriptExecutor) driver;
 public void clickIndexedElement(WebElement elementName, int index) {
 testLogger.log("Clicking on Index ["+index+"]");
 js.executeScript("arguments["+index+"].click();", elementName);
 }

In actuality, clicking on the Search menu button works, but I get an error trying to click on the Search menu option:

LOG: Clicking on Index [0]
LOG: Clicked on the 'Search' button
LOG: Clicking on Index [1]
org.openqa.selenium.JavascriptException: javascript error: Cannot read property 'click' of undefined
 (Session info: MicrosoftEdge=87.0.664.75)

Could someone explain in simple terms why the click on Index 0 works but the click on Index 1 doesn't?

Answer 1

js.executeScript("script", arguments..,);

The above is the syntac for jsexecutor . You can access the arguments you pass to the script as arguments[index]. so in your case,

js.executeScript("arguments[0].click();", elementName);

script is : arguments[0].click();and arguments is: elementName

so you are passing only one argument hence you can use only arguments[0] , which will get elementName.

• K. Deminie: Hi PD. Sorry, but I'm not exactly sure what you're saying. Are you saying only the first argument (Index 0) can be used with executeScript? Since both "Search" objects are being found, how are you supposed to click on the second one? Can you show me how the "ClickOnSearch*" methods should be rewritten so that the correct object is clicked?
• PDHide: The arguments is an array that contains values you pas to the executor, in your case you are passing only one value that is elementName , so arguments will.have size one. You can call only arguments [0].click()
• K. Deminie: Hi PD. Okay... I can understand that. elementName is passing in both objects and executeScript is forced to always click on Index=0. How do I get it to click on Index=1, though? There has to be a way to do that.
• PDHide: what is index ? you are passing a single webelement then how do you think there is an index for that ?
• K. Deminie: What I mean is that when searchButton is identified, 2 different elements are found. The button and the drop-down option. Right now, only the first element (the button) can be clicked on (Index=0). How do I send it the second element (the drop-down option, Index=1)?