Unable to get the values of an element using selenium java - javascript

I am using selenium webdriver with Java and Maven project. In a webpage there are few fields and I want to get the value of one the fields. These values which are shown were entered in the previous screens and still not stored in the database.
I am unable to get the value of an webelement.
I tried using gettext(), getAttribute() and (String) ((JavascriptExecutor) driver).executeScript("return arguments[0].value", element). But they either return blank or null as values.
When I tried to use locators xpath or ID, i got error that "could not locate the element". So i used CSS locators.
I am expecting to retrieve those values and store in a variable for further use.
<div class="row g-3 mb-3" xpath="1">
<div class="col-md-6">
<span class="wpcf7-form-control-wrap" data-name="nombre">
<input type="text" name="nombre" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required form-control" id="nombre" aria-required="true" aria-invalid="false" placeholder="Nombre*" data-gtm-form-interact-field-id="0">
</span>
</div>

Thanks to all for your help. Finally it worked. I used the below command:
String data_nombre = (String) ((JavascriptExecutor) driver).executeScript("return document.getElementById('nombre').value");

Related

Selenium how to get hidden value inside html which is not showing in the html element

I working on one site where I found an input field value like
Here value Hotel rupdia is coming automatically from Database. But when I inspect the element I have found not set any value. And I am not sure how can read this text from here using selenium. As value not stored in any attribute or value
Here is the Html
<fieldset class="form-group position-relative outline-none" id="__BVID__458"><div tabindex="-1" role="group" class="bv-no-focus-ring"><input name="name" type="text" placeholder="Property name" autocomplete="new-password" class="form-control is-valid" inputmode="text" id="__BVID__459"><!----><!----><!----><!----><!----><!----><!----><!----><div class="invalid-tooltip"> </div><!----><!----><!----></div></fieldset>
Can anyone face this type of issue? And help me to find out the solution?
Instead .getText(). try applying .getAttribute("value") on that web element
Use this xpath
//div[#class='bv-no-focus-ring']//input[#name='name']
as
String val = driver.findElement(By.xpath("//div[#class='bv-no-focus-ring']//input[#name='name']")).getAttribute("value");
and print this val, Also remember to put some sleep before using this code.

Using JavaScript how can I get the string inside of this HTML element by ID?

Using JavaScript, how can I get the string inside of this HTML element, with the id being recItemString_GPLA\|input? Inside the element there is a string with "qty" (without quotes) that I'm trying to capture. When I inspect the element I get:
<input data-oj-internal="" type="text" readonly="" placeholder="" class="oj-inputtext-input oj-
component-initnode" id="recItemString_GPLA|input"> == $0.
Above that element in DevTools there is:
<oj-input-text :id="[[fieldId()]]" validators="[[validators]]" on-value-
changed="[[valueChanged.bind($data)]]" on-valid-changed="[[validChanged]]"
value="{{value}}" required="[[required]]" readonly="[[readOnly]]" messages-
custom="[[messagesComputed]]" display-options="[[displayOptions]]" help="
[[help]]" id="recItemString_GPLA" class="oj-inputtext oj-form-control oj-
component oj-read-only oj-complete"><input data-oj-internal="" type="text"
readonly="" placeholder="" class="oj-inputtext-input oj-component-initnode"
id="recItemString_GPLA|input"></oj-input-text>
I have not been able to gather the string inside the element to display it to the console.
Using the pluggin SelectorGadget the element XPath is: //*[(#id = "recItemString_GPLA\|input")]
When I try and query oj-input-text directly to the console the console returns [Object NodeList]
Here is a screenshot of the inspected element:
With jQuery you can escape special characters like this:
$('#recItemsString\\_GPLA\\|input');
I am really not sure which text is supposed to be produced. In the following snippet I added an input value to be displayed.
const qs=s=>document.querySelector(s);
console.log(qs('#recItemString\\_GPLA\\|input').value)
<oj-input-text :id="[[fieldId()]]"
validators="[[validators]]"
on-value-changed="[[valueChanged.bind($data)]]"
on-valid-changed="[[validChanged]]"
value="{{value}}"
required="[[required]]"
readonly="[[readOnly]]"
messages-custom="[[messagesComputed]]"
display-options="[[displayOptions]]"
help="[[help]]"
id="recItemString_GPLA"
class="oj-inputtext oj-form-control oj-component oj-read-only oj-complete">
<input data-oj-internal=""
type="text" value="some text inside ..."
readonly=""
placeholder=""
class="oj-inputtext-input oj-component-initnode"
id="recItemString_GPLA|input">
</oj-input-text>

Selenium with Python -- finding element without proper identifiers

I am using selenium with python to write the code. I am looking to pull the information from a text box. The box auto fills as other information is being filled out. Inspecting the box gives the following code:
<input type="tel" autocomplete="off" name="amount" step="any" class="form-
control ng-pristine ng-untouched ng-valid ng-isolate-scope ng-not-empty"
placeholder="" tw-focusable="" show-decimals="$ctrl.showDecimals" tw-number-
input-formatter="" ng-change="$ctrl.changedAmount()" ng-
model="$ctrl.ngModel" ng-disabled="$ctrl.ngDisabled" disabled="disabled"
style="">
The issue is that there is already another input box that has the name "amount", so I can't do a simple selection by name. I am thinking this would require me to use a CSS selector but everything I have tried so far has not worked. Please let me know what I can try.
Looks like you need to use CSS or XPath locators.
Its hard to tell how exactly you can find that element since you haven't provided a source of the entire page but here are some tips.
In the worst case when you cant find any combination of attributes that will uniquely identify the element you need to rely on dom nodes hierarchy, i.e. in order to find first input on the following page:
<!DOCTYPE html>
<html>
<head>
<title>Dummy page</title>
</head>
<body>
<div>
<div>
<input type="text">
</div>
<p>
<input type="text">
</p>
<input type="text">
</div>
</body>
</html>
You can use XPath locator that might look similar to this one:
//div/div/input
But that's the worst case, usually you can use more flexible locators based on element attributes that less likely to be affected by page structure modifications. Let's say each of our inputs from the page above has "name" and "disabled" attributes.
<div>
<div>
<input name="input1" disabled="" type="text">
</div>
<p>
<input name="input1" disabled="disabled" type="text">
</p>
<input name="input2" disabled="" type="text">
</div>
Then we can find first input using the following locator:
//input[#name="input1" and #disabled=""]
Hope that helps.

HTML data parsing from DIV container

As I am pretty new to Web Development this might be an easy question.
In my HTML file I use the form method GET to parse data with the URL (it must be done this way, cannot be changed).
In this html there is a Text Field.
<div class="form-group {*if $ERROR_BEMERKUNG*has-error*/if*}">
<label for="text-comment">Bemerkung</label>
<textarea name="text-comment" id="text-comment" class="form-control" rows="3" placeholder="{$TRANSLATE.USERDATA.BEMERKUNG|default:'USERDATA.BEMERKUNG'}">{$COMMENT}</textarea>
</div>
How can I get the inside of this textfield, whatever is written in it afterwards, into my GET method? Hardcoded it works that way, but I don't know how I can get the value out of the div.
<input type="hidden" id="bemerkungen" name="bemerkungen" value= "TEST" />
EDIT: I didn't have to do anything for the textarea, it got parsed correctly.
But I have another div with a number field.
<div class="width115 left form-group has-feedback">
<span id="personen"> Anzahl Personen </span>
<input class="btn-input-wrapper" id="personen" type="number" min="1" value="1"/>
</div>
The value out of there is never parsed.
If by textfield you mean textarea, here's your answer:
All details you have in w3schools:
https://www.w3schools.com/tags/att_textarea_form.asp
Example:
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_textarea_form
When you send example, it will show you generated GET link with textarea value.
You missing form="usrform" part tho, but it should work if you keep everything between <form> tags.

AngularJS - ng-model not working with bootstrap directives

I am using AngularJS for my project and I am new to it. But I liked its features and very convenient for development as well. But I came up with the following issue and didn't know to get out of it.
I have a multi view application. The following code is a part of signup view. This view gets displayed when the signup button is pressed. Now the issue is, in the 4th and 5th line below, I have attached a ng-model attribute to and I am able to print the number obtained using {{num}} directive. However, the ng-model num2 below is not getting displayed as above. All I get is the static text {{num2}} being displayed. Why is it not working like the previous case?
<form role='form' action='#/app/register_db' method='post'>
<h1><small><b>Sign Up Information<b></small></h1>
<br>
<input type='text' ng-model='num'>
<h1>{{num}}</h1>
<div class='row'>
<input type='text' ng-model='num2'>
<h1>{{num2}}</h1>
<div class='col-xs-5'>
<input type="text" class='form-control' id="fn" name='firstname' ng-model='ng-firstname' placeholder="First Name">
</div>
</div>
...
...
I am new to AngularJS and I am very quickly grasping concepts. So if I am missing something, then please guide me through the right path and help me fix this issue.
I am using angularJS and Bootstrap CSS.
Thanks.
You should get the following error message in your browser's console:
[ngModel:nonassign] Expression 'ng-firstname' is non-assignable. Element: <input type="text" class="form-control" id="fn" name="firstname" ng-model="ng-firstname" placeholder="First Name">
As ng-model="ng-firstname" is not a reference by name, but an expression AngularJS will try to evaluate, so simply not using a dash will fix that. What happens when you break the code there is AngularJS basically stops, and anything else AngularJS would usually do in elements that follow, simply doesn't happen.

Categories