What i am doing is:
return element(by.xpath('//*/*[#id = "countyIds"]/option[contains(text(),"'+value+'")]')).click();
But i can see it does "ctrl + click" cause two values stay highlighted.
Html:
<select name="countyIds" id="countyIds" class="filter" multiple="">
<option value="864">Banskobystrický kraj</option>
<option value="821" selected="selected">Bratislavský kraj</option>
<option value="892" selected="selected">Košický kraj</option>
<option value="844">Nitriansky kraj</option>
<option value="878">Prešovský kraj</option>
<option value="834">Trenčiansky kraj</option>
<option value="826">Trnavský kraj</option>
<option value="852">Žilinský kraj</option>
</select>
You can see two selected values in second and third option. How to make normal "click"?
You can use the Select object instead of clicking directly:
using OpenQA.Selenium.Support.UI;
// select the drop down list
var countries = driver.FindElement(By.Name("countries"));
//create select element object
var selectElement = new SelectElement(countries);
//select by value
selectElement.SelectByValue("844");
// select by text
selectElement.SelectByText("Prešovský kraj");
Related
Firefox 59.0 Project MVC.NET. Use https://select2.github.io js lib for select elements
On the View there are many elements such as:
<div class="control control_medium control_select">
<select name="#nameof(Model.Query.BudgetCycleIds)"
#Html.AjaxViewSubmitOnChange()
#Html.AsugfAutoComplete()
multiple="multiple">
<option value="0">Все</option>
#foreach (var budgetCycle in Model.BudgetCycles)
{
<option value="#budgetCycle.Id" #(Model.Query.BudgetCycleIds?.Contains(budgetCycle.Id) ?? false ? "selected" : "")>#budgetCycle.Name</option>
}
</select>
</div>
Same in the html:
<select name="BudgetCycleIds" ajaxview-submit-onchange="" asugf-select2="" multiple="" tabindex="-1" class="select2-hidden-accessible" aria-hidden="true">
<option value="0">Все</option>
<option value="13" selected="">2010 - 2012</option>
<option value="14">2011 - 2013</option>
<option value="9">2012 - 2014</option>
<option value="5">2013 - 2015</option>
<option value="6">2014 - 2016</option>
<option value="7">2015 - 2017</option>
<option value="1">2016 - 2018</option>
<option value="2">2017 - 2019</option>
<option value="4">2018 - 2020</option>
</select>
Normal UI (before loading):
Not normal UI (in a second after loading):
Normal UI (in two second after loading):
The other browsers are the same, but very fast, and the user does not see the interface jumps.
How to make sure that the wrong interface does not appear
Not a good solution (because the layout is "jumps")
add hidden class
<option class="hidden" value="0">Все</option>
#foreach (var budgetCycle in Model.BudgetCycles)
{
<option class="hidden" value="#budgetCycle.Id" #(Model.Query.BudgetCycleIds?.Contains(budgetCycle.Id) ?? false ? "selected" : "")>#budgetCycle.Name</option>
}
I have Bootstrap Multi-select dropdown and the code is:
<select class="multiselect" multiple="multiple">
<option value="one">test value for one</option>
<option value="two">test value for two</option>
<option value="three">test value for three</option>
<option value="four">test value for four</option>
</select>
whenever i select from 1 to 3 its showing the selected value. After selecting the fourth checkbox in dropdown it start displaying "4 Selected". the problem is i need to fix the width of the dropdown, so that if i select one, i need to display 1 Selected instead of the first checkbox value. How can i achieve that.
Tried this also but i didnt find what exactly i need. http://davidstutz.github.io/bootstrap-multiselect/
Thanks in advance.
If you are using http://davidstutz.github.io/bootstrap-multiselect/ then try following code...
DEMO LINK
JS:
$('#example').multiselect({
buttonWidth: '500px',
buttonText: function (options) {
if (options.length == 0) {
return 'None selected <b class="caret"></b>';
} else {
var selected = 0;
options.each(function () {
selected += 1;
});
return selected + ' Selected <b class="caret"></b>';
}
}
});
HTML:
<select id="example" multiple="multiple">
<option value="cheese">Cheese</option>
<option value="tomatoes">Tomatoes</option>
<option value="mozarella">Mozzarella</option>
<option value="mushrooms">Mushrooms</option>
<option value="pepperoni">Pepperoni</option>
<option value="onions">Onions</option>
</select>
On a select dropdown, I need to make certain items 'strong/bold'.
How can I do this?
Example of what I ideally require:
<option value="#"><strong>Andorra</strong></option>
<option value="#">--Grandvalira</option>
<option value="#">--Vallnord</option>
<option value="#"><strong>Austria</strong></option>
<option value="#">--Amadé</option>
<option value="#">--Bad Kleinkirchheim</option>
<option value="#">--Mallnitz</option>
You actually can't.
The closest thing (you can't choose a bold item)
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
Which gives you this:
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_optgroup
You can also build one of your own but it won't be input an input tag (you should use inputs of your own).
you could use :nth-child(N)
option:nth-child(1), option:nth-child(4) {
font-weight:bold;
}
Demo: http://jsfiddle.net/Sotiris/sqshN/
Find more info and browser support for this pseudo-class at http://reference.sitepoint.com/css/pseudoclass-nthchild
Using css in the works as a quicker, easier alternative
<option value="value" style="font-weight: bold;">SELECT ME</option>
You could do it with jQuery.
$('#Your select').append($("<option></option>").attr.css("font-weight" , "bold").html("Bold Text"));
You'd have to add some logic to determine which options to bold, obviously.
This also works (Firefox 50 and Chrome 55). Items 3 and 5 are shown in bold
<style>
.bld {font-weight:bold;}
</style>
<select>
<option value = "1">Kanakangi
<option value = "2">Ratnangi
<option class = "bld" value = "8">Hanumatthodi
<option value = "9">Dhenuka
<option class = "bld" value = "15">Mayamalavagowla
<option value = "16">Chakravaaham
</select>
I have a dropdownlist declared like this:
<select id="PageToCreate_AuthorID">
<option value="">Please select...</option>
<option value="1">Thierry</option>
<option value="2">Vanessa</option>
</select>
When the page is showed the fist time, here is what is displayed:
As you can see, we don't see all the text inside the control.
Then I click inside it and the dropdown is adjusted:
How can I do to have the dropdown showed correctly when the page is showed the first time?
Thanks.
Try to add some css for your select tag :
<select id="PageToCreate_AuthorID">
<option value="">Please select...</option>
<option value="1">Thierry</option>
<option value="2">Vanessa</option>
</select>
Css:
#PageToCreate_AuthorID {
min-width:200px; /* Change this value if you think you must do it */
}
I have a web page that uses three controls to allow a user to specify a date: 2 drop down controls for month and day (where Jan = 1, perhaps a bad choice :-)) and the days of the month (1-31). A text box is used for the year. In the Year text box, I use an AJAX Toolkit Watermark extender found [here][1] to write the literal word "Year" in light grey in the text box. This text disappears when the user sets focus to the text box. If the user enters something in the text box, the text appears in the normal textbox color, else the light grey text "Year" re-appears when the textbox loses focus.
3 control make up a "Date Issued" text box and similarly, 3 more control make up a "Expiration Date" set of controls.
When a user changes the Issue date (for example, the focus of the last control, Issued Year, is lost, I'd like to update the Expiration Date controls to a date value that is 10 years from the Issue date.
The issue is this: If I use Javascript to set the value of the txtExpireYear control, it updates the light grey text watermark text that normally says "Year" to the year number value instead of displaying the value in normal text color and treating the value as if it were typed by the user.
The 2nd issue that I have is getting the year value of the IssueDate. Why does the dtmDateOfIssue.getYear() function return a two-digit year if the year is <2000 and itherwise return a 4-digit year if the year is > 2000? I can probably work around this but I am looking for an explanation.
Thanks in advance.
function txtIssueYear_OnBlur() {
//Get sub controls of passport Expiration date
var ddlExpireMonth = document.getElementById("dtmPassportExpirationDate_ddlMonth");
var ddlExpireDate = document.getElementById("dtmPassportExpirationDate_ddlDate");
var txtExpireYear = document.getElementById("dtmPassportExpirationDate_txtYear");
//Get the individual values of each sub control of the Expiration date
var ExpireMonth = parseInt(ddlExpireMonth.value);
var ExpireDayOfMonth = parseInt(ddlExpireDate.value);
var ExpireYear = parseInt(txtExpireYear.value);
//If the Expiration Date still contains all the default values, set it to a default
//value based on the value of the Date of Issue
if ( ExpireMonth == -1 && ExpireDayOfMonth == -1 && (isNaN(ExpireYear)) ) {
//Get sub controls of passport Issue date
var ddlIssueMonth = document.getElementById("dtmPassportDateOfIssue_ddlMonth");
var ddlIssueDate = document.getElementById("dtmPassportDateOfIssue_ddlDate");
var txtIssueYear = document.getElementById("dtmPassportDateOfIssue_txtYear");
//Get the individual values of each sub control of the Issue date
var IssueMonth = parseInt(ddlIssueMonth.value);
var IssueDayOfMonth = parseInt(ddlIssueDate.value);
var IssueYear = parseInt(txtIssueYear.value);
var dtmDateOfIssue = new Date(IssueYear, IssueMonth - 1, IssueDayOfMonth); //construct Issue date
//add 10 years - 1 day to get the default Expiration date
dtmDateOfIssue.setYear(dtmDateOfIssue.getYear() + 10);
dtmDateOfIssue.setDate(dtmDateOfIssue.getDate() - 1);
//Set the Expiration Date
txtExpireYear.value = dtmDateOfIssue.getYear();
ddlExpireMonth.value = dtmDateOfIssue.getMonth() + 1;
ddlExpireDate.value = dtmDateOfIssue.getDate();
}
The 3 controls of each date group are included in a usercontrol (ASCX file):
<asp:DropDownList ID="ddlMonth" runat="server">
</asp:DropDownList>
<asp:DropDownList ID="ddlDate" runat="server">
</asp:DropDownList>
<asp:TextBox ID="txtYear" runat="server" Width="85px" ></asp:TextBox>
<asp:CustomValidator ID="CustomValidator1" runat="server"
EnableClientScript="true" Required="True"
ErrorMessage="CustomValidator" ClientValidationFunction="validateDate"
ValidateEmptyText="True"></asp:CustomValidator>
This is sent to the browser as the following. Note that the event handler that I am writing Javascript for uses the client side IDs because the client sided script is page-specific. Not sure if that will be clear or will make sense to you. I would prefer an example using the final client side names, but if you again want to offer the <%- servercontrol.ClientId %> approach too, I would be willing to give it a try.
THANK YOU!
<select name="dtmPassportExpirationDate$ddlMonth" id="dtmPassportExpirationDate_ddlMonth" class="DefaultDropDown">
<option value="-1">--Month--</option>
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option>
<option value="4">Apr</option>
<option value="5">May</option>
<option value="6">Jun</option>
<option value="7">Jul</option>
<option value="8">Aug</option>
<option selected="selected" value="9">Sep</option>
<option value="10">Oct</option>
<option value="11">Nov</option>
<option value="12">Dec</option>
<select name="dtmPassportExpirationDate$ddlDate" id="dtmPassportExpirationDate_ddlDate" class="DefaultDropDown">
<option value="-1">--Day--</option>
<option value="1">1</option>
<option value="2">2</option>
<option selected="selected" value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<input name="dtmPassportExpirationDate$txtYear" type="text" value="2009" maxlength="4" id="dtmPassportExpirationDate_txtYear" class="DefaultTextBox" style="width:68px;" />
<input name="dtmPassportExpirationDate$btnClear" type="button" id="dtmPassportExpirationDate_btnClear" style="font-size: x-small; height: 20px;" value="Clear" tabindex="-1" onClick="ClearDate_dtmPassportExpirationDate();" /></td>
<input type="hidden" name="dtmPassportExpirationDate$TextBoxWatermarkExtender1_ClientState" id="dtmPassportExpirationDate_TextBoxWatermarkExtender1_ClientState" />
About your second issue, the getYear function is deprecated, you should use the getFullYear function instead.
Edit: To correctly set the value of a TextBoxWatermark extended control, you should use the MS Ajax $find function to get the object and call the set_Text function:
$find("ctl00_SampleContent_TextBoxWatermarkExtender2").set_Text('value');
or better using the server-side ClientID property of the control:
$find("<%=ExtenderControl.ClientID%>").set_Text('value');
I found the set_Text function by object inspection with Firebug, because it's a shame that there is no documentation of the Client-Side API of the Ajax Control Toolkit...