Inputs and its attributes are constantly changing in Dynamic x-path in Selenium - selenium

I tried to find the x-path of a text field username and password, but it keeps on changing dynamically.I won't be able to use starts-with or contains in a findelement using x-path. Here's the HTML DOM-
<div id="contents">
<h1 style="white-space:pre; width:80px; float:left;line-height:35px;">Login</h1>
<span style="float:left; padding-top:13px; COLOR:#990033; font-weight:bold;"> Student | Parent | Faculty</span>
<div class="form-elements">
<div class="form-elements">
<div class="form-elements">
<div class="label-txt">Password</div>
<input id="rcnr2uew1m0rkikeaaniwk" type="password" style="display:none;" name="rcnr2uew1m0rkikeaaniwk"/>
<input id="ko2xs123ebqyoluh15bulu" type="password" style="display:none;" name="ko2xs123ebqyoluh15bulu"/>
<input id="cuouek4bfz41etm4hroj0r" type="password" style="display:none;" name="cuouek4bfz41etm4hroj0r"/>
<input id="u2ta3gv2o2ce0azx5plpuh" type="password" name="u2ta3gv2o2ce0azx5plpuh"/>
<input id="g03nwjuzhqnkuwgsl4q2mu" type="password" style="display:none;" name="g03nwjuzhqnkuwgsl4q2mu"/>
<input id="gddwv4z3amojk0yvoxi2v4" type="password" style="display:none;" name="gddwv4z3amojk0yvoxi2v4"/>
<input id="kxecmkho2vf1vcfb42icjr" type="password" style="display:none;" name="kxecmkho2vf1vcfb42icjr"/>
<span id="ctl04" style="color:Red;visibility:hidden;">*</span>
</div>
I tried to find the input[4] with no style.
Absolute x-path- html/body/form/div[3]/div[1]/div[2]/div[1]/div[1]/div[1]/div[2]/input[4]
Next time how it changes-
Absolute x-path- html/body/form/div[3]/div[1]/div[2]/div[1]/div[1]/div[1]/div[2]/input[17]
id and name of the input also keeps on changing without any common trait

You can do it by locating sibling of the User name label that is displayed, i.e. without attribute style="display:none;"
User Name
"//div[contains(text(), 'User Name')]/following-sibling::input[not(#style='display:none;')]"
Password
"//div[contains(text(), 'Password')]/following-sibling::input[not(#style='display:none;')]"

Or something similar using type attribute:
//input[#type='password'][not(#style)]

Related

How to write following sibling CSS/Xpath expression of username field?

HTML Code:
<form autocomplete="on" xpath="1">
<div class="IiD88i _351hSN">
<input class="_2IX_2- VJZDxU" autocomplete="off" type="text" value="">
<span class="_36T8XR"></span>
I can write this one : //input[#type='text']
But how to write it in "following sibling" CSS/xpath of the above code?
If you want to fetch input node based on its sibling, try:
//label[.='Enter Email/Mobile number']/preceding-sibling::input

Unable to get text from disabled textbox

I need to print value of a disabled text box. The below given is the source code
<div class="col-6 col-md-2 form-group mb-2" xpath="1">
<input name="SMDetailsViewModel.SoRSummaryRowID" class="form-control rum-disabled" id="SRowID" type="hidden" value="3908" tabindex="-1">
<input name="SMDetailsViewModel.ID" **value**="20445" class="form-control rum-disabled " id="SID" type="text" tabindex="-1">
</div>
The 'value' needs to get printed and it is dynamic value.
I have tried with CSS, Xpath like below
WebElement SoR=driver.findElement(By.cssSelector("#SID")); With xpath as well
String SoRID=SoR.getText();
System.out.println("Here SOR ID" +SoRID);
tried with GetAttribute as well
Working with below
WebElement SoR=driver.findElement(By.cssSelector("#SID"));
String SoRID=SoR.getAttribute("value");
//String SoRID=SoR.getText();
System.out.println("Here SOR ID" +SoRID);

Styling Data Validation Errors with Bootstrap

I am working on an ASP.NET MVC 4 Project. I want to style data validation errors on my login page with Bootstrap 3.0. When I debug the page and it gives data validation errors, this codes are disappeared in source of my login form:
<form action="/Account/Login" class="col-md-4 col-md-offset-4 form-horizontal well" method="post"><input name="__RequestVerificationToken" type="hidden" value="Zbg4kEVwyQf87IWj_L4alhiHBIpoWRCJ9mRWXF6syGH4ehg9idjJCqRrQTMGjONnywMGJhMFmGCQWWvBbMdmGFSUPqXpx6XaS4YfpnbFm8U1" /><div class="validation-summary-errors"><ul><li>The user name or password provided is incorrect.</li>
</ul></div> <div class="form-group control-group">
<div class="col-md-6 col-md-offset-3">
<input class="input-validation-error form-control" data-val="true" data-val-required="User name alanı gereklidir." id="UserName" name="UserName" placeholder="Kullanıcı Adı" type="text" value="" />
<span class="field-validation-error" data-valmsg-for="UserName" data-valmsg-replace="true">User name alanı gereklidir.</span>
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-3">
<input class="input-validation-error form-control" data-val="true" data-val-required="Password alanı gereklidir." id="Password" name="Password" placeholder="Şifre" type="password" />
<span class="field-validation-error" data-valmsg-for="Password" data-valmsg-replace="true">Password alanı gereklidir.</span>
</div>
</div>
<div class="form-group">
<div class="col-md-4 col-md-offset-4">
<button class="btn btn-default" type="submit">Giriş Yap</button>
</div>
</div>
</form>
How can I style these errors like "for=inputError" property of label with Bootstrap 3?
As it's shown in Bootstrap's docs, you need to apply class has-error to the div that contains the input and has class form-group:
<div class="form-group has-error">
...
</div>
It's a quite ugly to write a condition for each property you want to check and apply class has-error depending on the results of that condition, though you can do it like so:
<div class="form-group #(Html.ViewData.ModelState.IsValidField(Html.IdFor(x => x.UserName)) ? null : "has-error" )">
This takes care of the server side validation. However, there is also client side validation you need to think about. For that you'd need to write some jQuery that would check for existence of class field-validation-error and apply class has-error depending on the result.
You may do it all your self, though I suggest checking out TwitterBootstrapMVC which does all of that automatically for you. All you'd have to write is:
#Html.Bootstrap().FormGroup().TextBoxFor(m => m.UserName)
Disclaimer: I'm the author of TwitterBootstrapMVC. Using it in Bootstrap 2 is free. For Bootstrap 3 it requires a paid license.

Parsley.js Password Confirm doesn‘t work

I have problem with the Parsley.js Framework.
My Problem is that the password and password confirm have the same input, but I have a error message if click on the submit button.
Here my Testsite:
http://topkosmetikstudios.de/release/index.php?article_id=21
(german language passwort = password and password wiederholen = password confirm)
Here my Code:
<div class="half right">
<p>
<label for="category" class="dropdown_label">Passwort</label>
<input type="password" data-equalto="#eqalToModel" name="passwort" data-required="true" <?php echo ($_POST['passwort'])? $_POST['passwort']:""; ?>>
</p>
</div>
<div class="half left">
<p>
<label for="category" class="dropdown_label">Passwort wiederholen</label>
<input type="password" data-equalto="#eqalToModel" name="passwort_w" data-required="true">
</p>
</div>
I use the Parsley.js parameter data-equalto="#elem" but it doesn't work.
Here the Parsley.js documentation: http://parsleyjs.org/documentation.html
Does anyone see a problem with my code that would cause this to not function?
It's possible you're using the wrong tag, as of Parsely.js 2.0:
data-parsley-equalto="#anotherfield"
If what you are attempting to do is make sure both password 1 and password 2 are the same before you submit the form then according to the documentation (http://parsleyjs.org/doc/#psly-validators-list) you need to set an id for the fields that you want to match against. And set field one to look for the id of field two and vice versa.
Equalto #2.0 data-parsley-equalto="#anotherfield" Validates that the
value is identical to another field's value (useful for password
confirmation check).
See the example code below:
<div class="half right">
<p>
<label for="category" class="dropdown_label">Passwort</label>
<input id="passwort" type="password" data-equalto="#passwort_w" name="passwort" data-required="true">
</p>
</div>
<div class="half left">
<p>
<label for="category" class="dropdown_label">Passwort wiederholen</label>
<input id="passwort_w" type="password" data-equalto="#passwort" name="passwort_w" data-required="true">
</p>
</div>
For more on Parsley.js lookup their documentation.
Please mark this as an answer if this is what you were looking for. Thanks!
Try setting an id for the first password input (i.e. "password"), then set the data-equalto attribute of the second input to the same value (i.e. "#password") and it should work fine. If it does not work you might wish to check if parsley.js is loaded correctly. Hope this helps.
<div class="half right">
<p>
<label for="category" class="dropdown_label">Passwort</label>
<input id="passwort" type="password" name="passwort" data-required="true" id="passwort">
</p>
</div> <div class="half left">
<p>
<label for="category" class="dropdown_label">Passwort wiederholen</label>
<input id="passwort_w" type="password" data-equalto="#passwort" name="passwort_w" data-required="true">
</p> </div>
data-equalto="#id_of_compare_field"

Selenium test an iterface where misses id and title and other sensible information

I'm working for a client who wants me to do selenium/junit tests but the whole user interface doesn't show any id for the html code nor title for the page, just content like "Welcome in ...", how whould you do to check that one is on the home page or in the page for the login for example?
This is an example of the html:
<div class="site-body m-welcome" data-module="welcome">
<div class="inner">
<h1 class="starred dark"><span>Welcome to ...</span></h1>
<div class="choices">
<div class="choice">
Become a xxxxx
</div>
<span class="or"><span>Or</span></span>
<form action="http://www.alink/welcome" method="post" class="choice" data-response-type="json">
<input type="text" name="plate_number" id="car_plate_validation_plate_number" value="" maxlength="8" class="plate required numberplate" placeholder="Enter number plate">
<button type="submit" class="btn btn-primary">Become an yyyyy</button>
<div class="invalid-message inline-modal" data-behavior="modal">
<h1>Sorry - you are not eligible to join the company</h1>
<p>See am I eligile? for full eligibility critera.</p>
</div>
</form>
</div>
You can use XPath to find almost all elements, I wouldn't use it often but in your case (where nothing has IDs) you'll probably need to use it very often:
IWebElement element = driver.FindElement(By.XPath, "//*[text='Welcome in ...']");
That will get you the first element of any type that has the text within it of "Welcome in ..."
For checking if you are on a certain page, I guess you'll have to search for an element that is unique to that page and no other pages.
You'll need to show us some of the HTML if you want more specific examples.
Example of html:
<div class="site-body m-welcome" data-module="welcome">
<div class="inner">
<h1 class="starred dark"><span>Welcome to ...</span></h1>
<div class="choices">
<div class="choice">
Become a xxxxx
</div>
<span class="or"><span>Or</span></span>
<form action="http://www.alink/welcome" method="post" class="choice" data-response-type="json">
<input type="text" name="plate_number" id="car_plate_validation_plate_number" value="" maxlength="8" class="plate required numberplate" placeholder="Enter number plate">
<button type="submit" class="btn btn-primary">Become an yyyyy</button>
<div class="invalid-message inline-modal" data-behavior="modal">
<h1>Sorry - you are not eligible to join the company</h1>
<p>See am I eligile? for full eligibility critera.</p>
</div>
</form>
</div>