Extracting text from the input field - using Webdriver - webdriver

How would I extract the text from the input filed? I tried using XPath/CSSSelector but I'm getting an empty text and since its a input field.
Here is my html code:
<div>
<input type="text" style="width:110px;" class="display">
</div>
Result: 1 to 50 of 195 rows
Here is the screen shot of the input field:

You need to get the field's value. For example: element.get_attribute("value")

I'm using C# so here is the working complete code:
public string TextAttributeValueByCssSelector(By by)
{
var wait = new WebDriverWait(_driver, TimeSpan.FromSeconds(30));
return wait.Until(drv => drv.FindElement(by)).GetAttribute("value");
}

Related

Chrome default MinLength Error

I have a input field through which users can submit some data.
But, if the data character length is less than 10, then they won't be able to submit.
<input type="text" minlength="10" placeholder="Submit" class="dataSubmit" />
Which means, in case a user tries to submit data with less than 10 characters then google chrome shows this error Please lengthen this text to 10 characters or more (you're currently using 3 characters).
But I want to change this error message to More data required.
So, how can I change this default message?
Thank You!
We can define the id for input and add custom validation using JavaScript.
<input id="data" type="text" minlength="10" placeholder="Submit" class="dataSubmit" />
In JavaScript, we can add custom validation for input something like below :
var data = document.getElementById("data");
data.addEventListener("input", function (event) {
if (data.validity.typeMismatch) {
data.setCustomValidity("Updated Error message");
} else {
data.setCustomValidity("");
}
});

When list of search results is an object and one is chosen, ngtypeahead input shows [object][object]

Model: {
"strText": "AngularJs",
"strSectionPath": "favoriteNpmLibraries",
"strTabPath": "angularJs"
}
If user choses this search result, then input box shows [object][object].
How can we fix this?
Use inputFormatter to choose what you want to display from an object.
In view:
<input [(ngModel)]="model" [ngbTypeahead]="search" [inputFormatter]="formatter" />
In component:
formatter = (x: {strText: string}) => x.strText;
It displays value of strText property of your object.
Let me know if you need more info.

TextBoxFor producing a blank field

I have a weird problem in my MVC app.
When the user selects a date from a drop down, it clears the StartDate and EndDate fields.
I have the following fragment of code:
<label>Start date: #Model.StartDate</label>
#Html.TextBoxFor(s => s.StartDate)
The weird thing is that you can wee where I'm outputting it in the label, the date comes out there. The textbox is unpopulated.
I've checked the produced markup and the textbox is not being populated.
<label>Start date: 19/05/2013</label>
<input id="StartDate" name="StartDate" type="text" value="" /> <br />
What am I missing here?
To add a little bit more information, when the page is initially populated the default start and end date are output. There is a bit of jQuery that empties those fields when a <select> is changed. If I comment that bit out then the fields retain their previous values as opposed to blank. Essentially, whatever is submitted to the server is output rather than the value in the model.
Essentially, whatever is submitted to the server is output rather than the value in the model.
This behaviour is actually by design. The idea being that generally the user would expect to see in the text box what they submitted to the server.
See here for a detailed explanation, and a work around.
Instead of doing this
<label>Start date: #Model.StartDate</label>
#Html.TextBoxFor(s => s.StartDate)
You should do this
<label id="someId"></label>
#Html.TextBoxFor(s => s.StartDate,new{#id="startdate"})
and using jquery on change event on your textbox you can set lablel
$("#startdate").change(function(){
var date="Start Date:"+$(this).val();
$("#someid").html(date);
});
Thinks that your model is a class named What like this:
public class What
{
public string StartDate { get; set; }
}
Then, think that your application is "MyApplication", you need to add to the view as if the view is stronglytyped:
#using MyApplication.Models;
#inherits System.Web.Mvc.WebViewPage<What>
Then all should we run as you expect

Vary type of input control based on drop down selection?

I'm building an edit screen where a use can edit rows of data. One of the fields is represented by a drop down, and another is an input field named 'value'. Now, depending on the value in the dropdown, I need to have different kinds of input controls for the value input control. Sometimes it should be a text box, others a datetime control (html5 and / or jqUI date picker), and finally a dropdown list containing a fixed set of values ('Yes' / 'No').
So basically sometimes I need to accept any string data, sometimes a date, and sometimes a boolean (but with a select box, not a check box). What's my best option for implementing this? Ideally the value entered would not be lost moving from one kind of input to another, while the user is on this edit page. On post back, I have a single database value to store (its a sql_variant).
Also, I'm using asp.net mvc3 so an ideal solution will work with the normal Html.ValidateFor and Html.ValidationMessageFor methods.
After lot's of time in JSFiddle, I made this solution. And I think it's pretty cool. It wasn't really that hard. and you can adapt it to whatever you need. just click here.
basically I make variables to represent the possible values. then I make a variable to hold the active element.
Whenever the type selector changes, it calls the change() function which uses if() statements to check what was selected, and then it sets the active element accordingly.
And finally, it calls the hide() function which hides the inactive elements.
here is the updated version
RED ALERT: I realized this didn't work in FF (maybe it was just my browser but whatever).
so I fixed it here
The typical way I accomplish something like this is to actually store 3 different fields in the db for each of the different types of values. Then I create something like the following html:
<!-- Input type selector -->
<div class="cell variable-selector">
<select><option ...</select>
</div>
<!-- varied input -->
<div class="cell variable show-text">
<div class="text"><input type="textbox"></div>
<div class="date-picker"><input type="textbox" class="datepicker"></div>
<div class="drop-down-bool"><select><option ...</select>
</div>
Then I have css that hides or shows the correct input element based on which class the cell has:
div.variable div { display:none }
div.show-text div.text { display: inline }
div.show-date-picker div.date-picker {display: inline }
div.show-drop-down-bool div.drop-down-bool {display: inline}
lastly you can setup some javascript so that when you change your variable-selector you change the class of your variable cell. Which jquery one might do this as so:
$(document).ready(function() {
var variableSelector = $("div.variable-selector > select");
variableSelector.change(function() {
var type = $(this).text();
var class = "cell variable show-" + type;
var variableCell = $(this).parent().parent().find("variable");
variableCell.attr("class", class);
})
});
As a quick warning I wrote the above code on the fly in the stack overflow editor window so there might be a couple of syntax errors or a minor bug somewhere but the basic idea should work. Hope it helps.
--Adam
In case you want to make full use of mvc3 validations, consider this approach.
Model
public class MultiValueViewModel
{
[Required]
public string TextValue { get; set; }
[Required]
public bool? BooleanValue { get; set; }
public MultiValueType ValueType { get; set; }
}
public enum MultiValueType
{
Text,
Boolean
}
View
#model MultiValueViewModel
#Html.DropDownListFor(m => m.ValueType, new SelectList(new[]
{
MultiValueType.Text,
MultiValueType.Boolean
}), new { #id = "multi_value_dropdown" })
<p>
<div data-type="#MultiValueType.Text" class="multi-value-pane">
#Html.EditorFor(m => m.TextValue)
</div>
<div style="display: none" data-type="#MultiValueType.Boolean" class="multi-value-pane">
#Html.DropDownListFor(m => m.BooleanValue, new SelectList
(new [] {
new SelectListItem { Text = "Yes", Value = "true"},
new SelectListItem { Text = "No", Value = "false"}
}, "Value", "Text"), optionLabel: "[Not Set]")
</div>
</p>
Javascript:
<script type="text/javascript">
$(function () {
$("#multi_value_dropdown").change(function () {
var value = $(this).val();
$(".multi-value-pane").each(function () {
$(this).css("display", value == $(this).attr("data-type") ? "block" : "none");
});
});
})
Inside your controller, receive MultiValueViewModel value (alone or inside parent model), and based on selected ValueType save to database. Please note that you will need jquery.validate version 1.9 if you need to skip validation on hidden fields (e.g. :hidden).

search button in page and pass item as query string

I have search button on page. user input som data and click search button.
how can search with query string (like google search).
is it correct:
void search_click(...)
{
string item1 = text1.text;
string item2 = text2.text;
Responce.Redirect(currentPage.html?x=item1&y=item2);
}
or has better solution.(c#)
You need to use GET method on your search form.
Probably the easiest way would be not using ASP.NET controls and using plain HTML components instead:
<form method="get" target="search.aspx">
Search: <input type="text" name="q" value="Search"><br>
<input type="submit">
</form>
Then, when the user clicks on Search button, the user will be taken to a place with a URL like:
http://YOUR_SERVER/YOUR_APP/search.aspx?q=hello
Check out the answer to the same question here: How to build a query string for a URL in C#?
You can build a NameValueCollection and output it as the proper format. The top answer has a great example.
Your code has some errors. Use the following:
Responce.Redirect("currentPage.html?x=" + item1 + "&y=" + item2);

Resources