查找要在Selenium WebDriver中使用的HTML元素

Question

Using Selenium WebDriver in a java class where I try to find that specific element and then automatically add a needed amount of that element in the input field.

I have an HTML table with each row specifying a type of element and an input field used to add X to the amount of element in the specific row.

<tr>
  <td class="non-sortable-table">
    <input class="required text" type="text" value="0" name="plate_order{pageFlow.plateorders[0].numberOfPlates}" tabindex="25">
  </td>
  <td class="non-sortable-table">
    <span>20% - White plates</span>
  </td>
  ...
</tr>

I have tried the following in my Java code in order to get that element, but with no luck:

WebElement element = (WebElement) js.executeScript("return ${\"document.getElementsByName('plate_order{pageFlow.plateorders[0].numberOfPlates}')\"");

WebElement element = driver.findElement(By.ByName('plate_order{pageFlow.plateorders[0].numberOfPlates}'))

how could i retreive that element in order to edit its input? Is it possible when parts of the name of the element is a reference to a controller, ie pageFlow?

what if i wanted to retrieve the following element identified by 20% ....

I have tried to get that one using xpath and cssSelector with no luck. Any suggestions?

Answer 1

To return an element from a JavaScript result, you can use the following syntax (i used jQuery as simplification):

RenderedWebElement webElement = (RenderedWebElement) ((JavascriptExecutor) webDriver).executeScript("return jQuery('input[name^=plate_order]').get(0);");

You can also pass an element which was previosly selected in Selenium:

((JavascriptExecutor) webDriver).executeScript("return doSomethingWithElement(arguments[0]);", webElement);

Answer 2

It looks to me like you might want to use a starts-with type operator in your XPath or CSS.

Something like:

XPath: //input[starts-with(@name, 'plate_order')]
CSS: input[name^='plate_order']

Similar things should work for the span, too (if you know the text):

XPath: //span[starts-with(., '20%')]
CSS/Sizzle*: span:contains('20%')

If you don't know the text, then something this xpath might work.

XPath: //input[starts-with(@name, 'plate_order]/../../td/span

* The contains function is not pure CSS. It's an addition provided by the Sizzle library. This may or may not work, depending on whether Selenium is using a built-in CSS library or injecting Sizzle.