Develop Reference

Selenium | Unable to locate input element

No idea how to address this input text field element with selenium / Java (openjdk 11 2018-09-25).
I tried xpath, cssSelector etc. it never works. Its always "Unable to locate element".
<slot name="input">
<input part="value" tabindex="0" aria-labelledby="vaadin-text-field-input-3">
</slot>
This did NOT work:
driver.findElement(By.xpath("//input[#aria-labelledby='vaadin-text-field-input-3']")).sendKeys("test");
Is there a solution for this?
UPDATE:
This thread solved partly my problem. The solution that worked for me can be found here link.

To send a character sequence to the element you need to induce WebDriverWait for the elementToBeClickable() and you can use either of the following locator strategies:
css_selector:
new WebDriverWait(driver, 20)
.until(ExpectedConditions.elementToBeClickable(
By.cssSelector("div.vaadin-text-field-container div[part=input-field][id^='vaadin-text-field-input'] slot[name='input'] > input[part='value'][aria-labelledby^='vaadin-text-field-input']")
)).sendKeys("pixelhead");
xpath:
new WebDriverWait(driver, 20)
.until(ExpectedConditions.elementToBeClickable(
By.xpath("//div[#class='vaadin-text-field-container']//div[#part='input-field' and starts-with(#id, 'vaadin-text-field-input')]//slot[#name='input']/input[#part='value' and starts-with(#aria-labelledby, 'vaadin-text-field-input')]")
)).sendKeys("pixelhead");

Xpath:
//div[#class='vaadin-text-field-container']//descendant::input[#part='value' and starts-with(#aria-labelledby, 'vaadin-text-field-input')]
Please check in the dev tools (Google chrome) if we have unique entry in HTML DOM or not.
Steps to check:
Press F12 in Chrome -> go to element section -> do a CTRL + F -> then paste the xpath and see, if your desired element is getting highlighted with 1/1 matching node.
If this is unique //div[#class='vaadin-text-field-container']//descendant::input[#part='value' and starts-with(#aria-labelledby, 'vaadin-text-field-input')] then you need to check for the below conditions as well.
Check if it's in any iframe/frame/frameset.
Solution: switch to iframe/frame/frameset first and then interact with this web element.
Check if it's in any shadow-root.
Solution: Use driver.execute_script('return document.querySelector to have returned a web element and then operates accordingly.
Make sure that the element is rendered properly before interacting with it. Put some hardcoded delay or Explicit wait and try again.
Solution: time.sleep(5) or
WebDriverWait(driver, 20).until(EC.visibility_of_element_located((By.XPATH, "//div[#class='vaadin-text-field-container']//descendant::input[#part='value' and starts-with(#aria-labelledby, 'vaadin-text-field-input')]"))).send_keys("test")
If you have redirected to a new tab/ or new windows and you have not switched to that particular new tab/new window, otherwise you will likely get NoSuchElement exception.
Solution: switch to the relevant window/tab first.
If you have switched to an iframe and the new desired element is not in the same iframe context then first switch to default content and then interact with it.
Solution: switch to default content and then switch to respective iframe.
You can start debugging from step1.
Update:
Solution specific to the problem:
Thread.sleep(2000);
WebElement inputButton = (WebElement) ((JavascriptExecutor)driver).executeScript("return document.querySelector('#TextFieldTitle').shadowRoot.querySelector('#vaadin-text-field-input-3 > slot:nth-child(2) > input')");
inputButton.sendKeys("test");
in the place of paste query selector here you will have to go to dev tools again in goog chrome by pressing F12, and then
Go to that input box
Do a right click
Select copy
Select copy JS path.
Ctrl + v into notepad to see what you've got from the dev tool.
It'd be something like this:
document.querySelector("#vaadin-text-field-input-3 > slot:nth-child(2) > input")
replace this paste query selector here with the stuff that is wrapped inside ""

Per the html provided, this works:
driver.find_element(By.XPATH, "//input[#part='value' and contains(#aria-labelledby, 'vaadin-text-field-input')]"]
x = WebDriverWait(driver, 10).until(EC.element_to_be_clickable((By.XPATH, "//input[#part='value' and contains(#aria-labelledby, 'vaadin-text-field-input')]")))
x.send_keys('This is typed here by selenium')
print(f"the typed text in input box is: {x.get_attribute('value')}")
Output:
the typed text in input box is: This is typed here by selenium
Process finished with exit code 0

Looks like part of HTML looks like:
<div class="vaadin-text-field-container">
<label part="label" id="vaadin-text-field-label-3"></label>
<div part="input-field" id="vaadin-text-field-input-3">
<slot name="prefix"></slot>
<slot name="input">
<input part="value" tabindex="0" aria-labelledby="vaadin-text-field-input-3">
</slot>
</div>
</div>
Much better is to build your XPATH locator from some id field:
//div[#id='vaadin-text-field-input-3']//input[contains(#aria-labelledby, 'vaadin-text-field-input')]"]
Also, as mentioned earlier have to check:
if it is unique for this page
if the input element is not dynamic
If you found solved that comment you could move to the code part and use the founded locator with WebDriver:
driver.findElement(
By.xpath("//div[#id='vaadin-text-field-input-3']//input[contains(#aria-labelledby, 'vaadin-text-field-input-3')]"]"
)).sendKeys("test");
Also, keep in mind that you have to know that element is already loaded on a page. As suggested before you could use some explicit wait for your element.

Get HTML element generated from JavaScript

I have this input field generated by JavaScript
<input class="postal-code form-text required form-control" autocomplete="postal-code" data-drupal-selector="edit-field-client-address-0-address-postal-code" type="text" id="edit-field-client-address-0-address-postal-code--bwzakXWpxR0" name="field_client_address[0][address][postal_code]" value="" size="10" maxlength="128" required="required" aria-required="true">
As you can see every time the id String is different: id="edit-field-client-address-0-address-postal-code--bwzakXWpxR0"
What is the proper way to locate this id using Selenium?

you can try using the following
driver.findElement(By.className("postal-code")).sendKeys("your value");

There are a LOT of attributes that seem to be unique. Have you tried any of them? Potential CSS selectors
input[autocomplete='postal-code']
input[data-drupal-selector='edit-field-client-address-0-address-postal-code']
input[name='field_client_address[0][address][postal_code]']
or you can try ID starts with, e.g.
input[id^='id="edit-field-client-address-0-address-postal-code--']

You can try with other locators if the id is dynamic.
CSS Selector:
driver.findElement(By.cssSelector(input[data-drupal-selector='edit-field-client-address-0-address-postal-code'])).sendKeys("your value");

As the desired element is an <input> element so moving next you would either invoke click() or sendKeys(), so to locate the element you need to use elementToBeClickable() and you can use either of the following Locator Strategies:
cssSelector:
WebElement element = new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.cssSelector("input.postal-code[id*='address-postal-code'][name^='field_client_address']")));
xpath:
WebElement element = new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//input[#class='postal-code form-text required form-control' and contains(#id, 'address-postal-code')][starts-with(#name, 'field_client_address')]")));

Unique name for the button with plus sign - want to click this button

The code is:
<button class="btn btn-default btn-xs" style="padding:0 5px" id="addPiidRelatedNumberBtn_332741000" ng-click="AddPiidRelatedNumber($event)" ng-show="EnableEditable && CanEdit">
<span class="glyphicon glyphicon-plus" title="Add New Related Number"></span>
I wrote this selenium code in STS bundle:
WaitUtility.ThreadSleep(1000);
driver.findElement(By.xpath("//button[#id='addPiidRelatedNumberBtn_332741000']")).click();
But I know the id can be changed anytime as it has some digits in it. Is there a better way to code this to click this button?

You can try something like this:
driver.findElement(By.xpath("//button[starts-with(#id,'addPiidRelatedNumberBtn_')]")).click();
You can find more info on XPath use for testing in this article:
XPath tutorial on guru99

The desired element is an Angular element so you need to induce WebDriverWait for the element to be clickable and you can use either of the following solution:
cssSelector:
new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.cssSelector("button.btn.btn-default.btn-xs>span.glyphicon.glyphicon-plus[title='Add New Related Number']"))).click();
xpath:
new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//button[#class='btn btn-default btn-xs']/span[#class='glyphicon glyphicon-plus' and #title='Add New Related Number']"))).click();

You can use angular attribute,
driver.findElement(By.xpath("//button[#ng-click='AddPiidRelatedNumber($event)']"));

Selecting a value from <md-select> tag using Selenium Webdriver

I am using Selenium Webdriver and working on automating an AngularJS Web App on Chrome. It was going pretty well until I hit a dropdown list on the app.
My test keeps crashing everytime I try to select a value from it. I have been doing my research on this and I have only seen 2 solutions (both of which I have tried but don't work)
Use the Select object. This doesn't work because the html tag is not <select>, its <md-select> and this fails the test.
I then tried to just click on the dropdown element and click on the value - driver.findElement(By.xpath("xpath to dropdown list")).click(); and driver.findElement(By.xpath("xpath do dropdown value")).click();
With example 2, I also tried creating it as a WebElement variable and calling click() separate, but this did not work either.
Any ideas on how I can solve this issue?
Update
HTML for the dropdown list
<div ng-switch-when="dropdown" class="ng-scope">
<zf-form-dropdown>
<div class="dropdown">
<div layout="row">
<div flex="50" class="quote-label">
<p ng-bind-html="::label" class="ng-binding">Title</p>
</div>
<div ng-show="false" flex="10" class="tooltip-icon ng-hide" ng-click="showToolTip(field.get('toolTip'))" role="button" tabindex="0" aria-hidden="true"><img src="img/item-question#2x.png"></div>
<md-select flex="" ng-disabled="quote.isRated() || !input.enabled" ng-change="onDropdownChange()" ng-model="input.value" class="ng-valid md-default-theme ng-touched ng-dirty" role="combobox" id="select_0Q9" aria-haspopup="true" aria-expanded="false" aria-labelledby="select_label_0I1" tabindex="0" aria-disabled="false" aria-invalid="false" aria-owns="select_menu_0Q8"><md-select-label class="md-select-label md-placeholder" id="select_label_0I1"><span></span><span class="md-select-icon" aria-hidden="true"></span></md-select-label></md-select>
</div>
</div>
</zf-form-dropdown>
</div>
HTML for the value I want to select
<md-option ng-value="::item.val" ng-selected="item.checked" ng-repeat="item in getOpts()" tabindex="0" class="ng-scope" role="option" aria-selected="false" id="select_option_0QD" value="MR">
<div class="md-text ng-binding">Mr</div>
<div class="md-ripple-container"></div>
</md-option>
The xpath for the dropdown list is //*[#id="select_0Q9"]
The xpath for the dropdown value is //*[#id="select_option_0QD"]

If you are sure that your Xpath is fine then you can also click using javascriptexecutor so try it out like below:-
WebElement element= driver.findElement(By.xpath("//md-option[#id='select_option_0QD']/div[1]"));
JavascriptExecutor executor = (JavascriptExecutor) driver;
executor.executeScript("arguments[0].click();", element);
Please feel free to locate the element in above code as per your convenience .
As per me your xpath of dropdown should be like below:-
//md-option[#id='select_option_0QD']
And xpath of first div which I suppose want to click is:-
//md-option[#id='select_option_0QD']/div[1]
Change [1] to [2] if you want 2nd value.
In an another aspect you can also store all your element in the list(As you know you can't use select) and click them as per your need or all.
For that you need to use xpath like:-
//md-option[#id='select_option_0QD']/div
Now implement it into code:-
List<WebElement> allelemts = driver.findElements(By.xpath("//md-option[#id='select_option_0QD']/div"));
for(WebElement ele: allelemts){
driver.findElement(By.xpath("//md-option[#id='select_option_0QD']")).click();
JavascriptExecutor executor = (JavascriptExecutor) driver;
executor.executeScript("arguments[0].click();", ele);
}
Hope it will help you :)

Since you are receiving a NoSuchElementException exception, I believe the issue lies in Selenium not able to identify the element. Try any of the following wait methods and then try to click the element.
Explicit Wait: (Most Preferred)
WebDriverWait wait = new WebDriverWait(driver, 20);
WebElement element = wait.until(ExpectedConditions.elementToBeClickable(By.id("elementID")));
or
WebDriverWait wait = new WebDriverWait(driver, 20);
WebElement element = wait.until(ExpectedConditions.presenceOfElementLocated(By.id("elementID")));
Implicit Wait:
driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);
Sleep: (Try to avoid this unless absolutely necessary)
Thread.sleep(1000);
EDIT: Added code to check for element's presence using findElements method.
Before using any of these wait methods you could also check for the presence of your element using findElements method.
List<WebElement> element = driver.findElements(By.id("elementId"));
if (element.size() == 0) {
System.out.println("Element not found");
} else{
System.out.println("Element found");
}

I have finally solved the issue!
I got the Selenium IDE and recorded a session where I got as far as selecting the dropdown menu and selecting my value. I then exported the file as a java test case and was able to read the lines where it selected the values, and they were;
driver.findElement(By.cssSelector("#select_08D > #select_label_005 > span.md-select-icon")).click();
driver.findElement(By.id("select_option_08H")).click();
So first off they both do not use xpath to find the elements, the dropdown menu itself is found with the cssSelector and the value is found by the id.
I am just cross referencing again and the id for the value is select_option_08H but while I am looking at Google Console I can see the id for the value is select_option_189

Finding HTML elements to use in Selenium WebDriver

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, i.e. 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?

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);

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.