Develop Reference

Selenium-webdriver help needed with selecting dropdown

I am trying to select an option within a dropdown. I cannot select with value.
How can I select state with value like CA, FL, TX,...
new SelectElement(chromedriver.FindElement(By.XPath("//select[#id='state']"))).SelectByValue("CA");
My code looks as follow:
<div tabindex="0" aria-label="State, This field is required." aria-invalid="This field is required." aria-required="true" alt="State, This field is required." data-talos="dropdownShippingState" class="field-wrapper-item error">
<label>State</label>
<div class="field-wrapper-children">
<input type="hidden" name="state" value="">
<div class="drop-down-selected" data-talos="dropdownShippingState"><i class="icon icon-drop-down" role="presentation"></i>
</div><span></span>
<div class="select-wrapper">
<label class="label-state" for="state">state</label>
<select name="state" id="state" autocomplete="shipping address-level1" class="hidden" tabindex="-1">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="AA">Armed Forces Americas (AA)</option>
<option value="AE">Armed Forces Europe (AE)</option>
<option value="AP">Armed Forces Pacific (AP)</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District Of Columbia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="TX">Texas</option>
<option value="VI">U.S. Virgin Islands</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
</div>
</div>
</div>
I am using selenium with C#
Thanks!

Try this:
using OpenQA.Selenium.Support.UI;
var element = chromedriver.FindElement(By.XPath("//select[#id='state']"));
var selectElement = new SelectElement(element);
selectElement.SelectByValue("CA");

Reusability of XPath with different name

I have a modal, within that modal there are various card. Those cards have dropdown. It looks some what like the screenshot below. They all have different select name. Is there any way to write a method in C# so I dont have to do //select[#name='test1a']or //select[#name='test1b'] for all dropdown?
HTML Code below
<table class="row-inner-table" border="0" cellpadding="1" cellspacing="1">
<tbody>
<tr class="row-content">
<td class="field-name">test1a</td>
<td class="field-value">
<select name="test-4" onchange="calc(document.myForm.TOTAL_8,this,24)">
<option value="" score="0"> </option>
<option value="118" score="0">test1b </option>
<option value="124" score="1">test1c</option>
<option value="120" score="2">test1d</option>
</select>
<input type="HIDDEN" name="PREVIOUS_24" value="0">
</td>
</tr>
<tr class="row-content">
<td class="field-name">test2</td>
<td class="field-value">
<select name="test-5" onchange="calc(document.myForm.TOTAL_8,this,25)">
<option value="" score="0"> </option>
<option value="121" score="0">hi</option>
<option value="113" score="1">hello</option>
<option value="114" score="2">C ya </option>
</select>
<input type="HIDDEN" name="PREVIOUS_25" value="0">
</td>
</tr>
<tr class="row-content">
<td class="field-name">test 3</td>
<td class="field-value">
<select name="test-6" onchange="calc(document.myForm.TOTAL_8,this,26)">
<option value="" score="0"> </option>
<option value="123" score="0">hehe</option>
<option value="112" score="1">haha</option>
<option value="119" score="2">001</option>
</select>
<input type="HIDDEN" name="PREVIOUS_26" value="0">
</td>
</tr>
<tr class="row-content">
<td class="field-name">test4</td>
<td class="field-value">
<select name="test-7" onchange="calc(document.myForm.TOTAL_8,this,27)">
<option value="" score="0"> </option>
<option value="111" score="0">404</option>
<option value="122" score="1">402/option>
<option value="117" score="2">403</option>
</select>
<input type="HIDDEN" name="PREVIOUS_27" value="0">
</td>
</tr>
<tr class="row-content">
<td class="field-name">test 5 </td>
<td class="field-value">
<select name="test-8" onchange="calc(document.myForm.TOTAL_8,this,28)">
<option value="" score="0"> </option>
<option value="115" score="0">Relaxed</option>
<option value="125" score="1">Tense, rigid</option>
<option value="116" score="2">Very tense or rigid</option>
</select>
<input type="HIDDEN" name="PREVIOUS_28" value="0">
</td>
</tr>
<tr class="row-content-total">
<td class="field-name total-label">Total</td>
<td class="field-value">
<input type="TEXT" size="5" name="TOTAL_8" value="0">
</td>
</tr>
</tbody>
</table>

It should be as easy as something like this
public SelectElement dropdownElement(By locator)
{
return new SelectElement(driver.FindElement(locator));
}
and you call it like
SelectElement select = dropdownElement(By.CssSelector("select[name='test-5']"));

Here is another version of C.Peck's solution which will cut down the repetitive Xpath (or CSS) string code, assuming the base of the Xpath is always the same which in the OP it appears to be
public SelectElement SelectMenuItem(string menuValue)
{
var menuString = $"//select[#name='{menuValue}']";
return new SelectElement(driver.FindElement(By.XPath(menuString)));
}
SelectElement selectOne = SelectMenuItem("test-4");
SelectElement selectTwo = SelectMenuItem("test-5");
EDIT:
To show you the A-Z on reusability for this, it would look something like this...
Method to return Select Element with dynamic XPath string:
public SelectElement SelectMenuItem(string menuValue)
{
var menuString = $"//select[#name='{menuValue}']";
return new SelectElement(_driver.FindElement(By.XPath(menuString)));
}
Method to set value for dropdown, by XPath:
public void SetMenuValue(string menuValue, string menuDropDown)
{
SelectElement select = SelectMenuItem(menuDropDown);
select.SelectByText(menuValue);
}
Finally, method to set the specific values you want, passing in value first, then XPath next:
public void Input_Values()
{
SetMenuValue("118", "test-4");
SetMenuValue("121", "test-5");
}
You don't need that last method, you could call SetMenuValue from anywhere, that was just another example of how you could do this

Dynamically Populate Time Drop Downs in ASP.NET

I have a requirement to populate 2 drop down list with hours and minutes. My current method of populating the drop downs doesn't format the numbers correctly as I require the leading 0 for the first 9 number i.e 01,02,03 not 1,2,3 as is currently happening.
C#
protected override void OnInit(EventArgs e)
{
base.OnInit(e);
if (!IsPostBack)
{
// Populate and Bind Time drop downs
ddlOh1OpenHours.DataSource = Enumerable.Range(00, 24);
ddlOh1OpenHours.DataBind();
ddlOh1OpenMinutes.DataSource = Enumerable.Range(00, 60);
ddlOh1OpenMinutes.DataBind();
}
}
ASPX
<asp:DropDownList ID="ddlOh1OpenHours" runat="server" />
<span>:</span>
<asp:DropDownList ID="ddlOh1OpenMinutes" runat="server" />
Result:
<select name="ctl00$MainContent$ddlOh1OpenHours" id="ctl00_MainContent_ddlOh1OpenHours">
<option selected="selected" value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option 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>
</select>

Just use ToString with the proper format:
var hours = Enumerable.Range(00, 24).Select(i => i.ToString("D2"));
var minutes = Enumerable.Range(00, 60).Select(i => i.ToString("D2"));
dlOh1OpenHours.DataSource = hours;
ddlOh1OpenHours.DataBind();
ddlOh1OpenMinutes.DataSource = minutes;
ddlOh1OpenMinutes.DataBind();
> Demo <
Standard Numeric Format Strings

Split datetime on the UI

In my ASP.NET MVC app, I have a ViewModel property called "Date" which is of the format "5/18/2012 2:43:45 PM". I would like to split this into separate controls on the UI.
jQuery UI - Datepicker would show the date - DONE
Show three dropdowns next to the Datepicker that display hour,minutes and am/pm.
I've added the three dropdowns to the UI but I am having difficulty understanding how to set those values based on what is being returned by the "Date" property of the ViewModel? In other words how do I split the Date and display it on the three dropdowns?
EDIT: Here is the View:
<div>
<%= Html.TextBoxFor(c => c.Scheduled, new { #Value = Model.Scheduled.Value.ToShortDateString(), #class = "datetime", style = "width:150px;" })%>
<ol class="align">
<li class="align" >
<select name="hour" >
<option value="1">1 </option>
<option value="2">2 </option>
<option 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>
</select></li>
</ol>
</div>

If the "Date" property is of the correct type (DateTime) you should be able to call Date.Hour, Date.Minute, and use Date.ToString("tt") to get am/pm.
Assuming MVC3 with razor....
<div id="time">
Hour:<br/>
<input type="text" value="#Model.Date.Hour" /><br/>
Minute:<br/>
<input type="text" value="#Model.Date.Minute" /><br/>
AM/PM:<br/>
<input type="text" value="#Model.Date.ToString("tt").ToLower()" />
</div>

String[] from post to Dictionary or Hashtable in C# .net 2.0

I have a post that has an array of items coming in that have no int for keys but a string for a key. for example: (from post)
-----------------------------3805226668837
Content-Disposition: form-data; name="pool[Abelson_2834.jpg]"
general_pool
-----------------------------3805226668837
Content-Disposition: form-data; name="pool_place[Abelson_2834.jpg]"
1
-----------------------------3805226668837
Content-Disposition: form-data; name="mediatype[Abelson_2834.jpg]"
3
-----------------------------3805226668837
Content-Disposition: form-data; name="pool[Abelson_2852.jpg]"
general_pool
-----------------------------3805226668837
Content-Disposition: form-data; name="pool_place[Abelson_2852.jpg]"
1
-----------------------------3805226668837
Content-Disposition: form-data; name="mediatype[Abelson_2852.jpg]"
3
-----------------------------3805226668837
Content-Disposition: form-data; name="pool[Abelson_3160-1.jpg]"
general_pool
-----------------------------3805226668837
Content-Disposition: form-data; name="pool_place[Abelson_3160-1.jpg]"
1
-----------------------------3805226668837
Content-Disposition: form-data; name="mediatype[Abelson_3160-1.jpg]"
3
-----------------------------3805226668837
Content-Disposition: form-data; name="files[]"; filename="Abelson_2834.jpg"
Content-Type: image/jpeg
So "pool" is an array with the keys set as the name and it's value is set aa a string.
from the form that lookes like this basicly
<tbody data-target="#modal-gallery" data-toggle="modal-gallery" class="files">
<tr class="template-upload fade in">
<td class="preview"><span class="fade in">
<canvas width="80" height="54"></canvas>
</span></td>
<td class="name"><span>Abelson_2834.jpg</span></td>
<td class="size"><span>4.17 MB</span></td>
<td><div aria-valuenow="0" aria-valuemax="100" aria-valuemin="0" role="progressbar" class="progress progress-success progress-striped active">
<div style="width:0%;" class="bar"></div>
</div>
<div="forminputs"> <span style="display:inline-block;float:left;">Choose a pool:
<select style="display:inline-block;" name="pool[Abelson_2834.jpg]">
<option selected="selected" value="general_pool">General</option>
<option value="place">Places</option>
<option value="geo">Geometrics</option>
<option value="ads">Advertisment</option>
</select>
<span class="pool_place"> <br>
Choose a pool:
<select style="display:inline-block;" name="pool_place[Abelson_2834.jpg]">
<option selected="selected" value="1">place 1</option>
<option value="2">Places</option>
<option value="3">Geometrics</option>
<option value="4">Advertisment</option>
</select>
</span> </span> <span style="display:inline-block;float:left;">Choose Media type:
<select style="display:inline-block;" name="mediatype[Abelson_2834.jpg]">
<option value="1">marker_icon</option>
<option value="2">user_image</option>
<option selected="selected" value="3">general_image</option>
<option value="4">general_video</option>
<option value="5">google_static_map</option>
</select>
</span> </div="forminputs"></td>
<td class="start"><button class="btn btn-primary"> <i class="icon-upload icon-white"></i> <span>Start</span> </button></td>
<td class="cancel"><button class="btn btn-warning"> <i class="icon-ban-circle icon-white"></i> <span>Cancel</span> </button></td>
</tr>
<tr class="template-upload fade in">
<td class="preview"><span class="fade in">
<canvas width="80" height="54"></canvas>
</span></td>
<td class="name"><span>Abelson_2852.jpg</span></td>
<td class="size"><span>3.17 MB</span></td>
<td><div aria-valuenow="0" aria-valuemax="100" aria-valuemin="0" role="progressbar" class="progress progress-success progress-striped active">
<div style="width:0%;" class="bar"></div>
</div>
<div="forminputs"> <span style="display:inline-block;float:left;">Choose a pool:
<select style="display:inline-block;" name="pool[Abelson_2852.jpg]">
<option selected="selected" value="general_pool">General</option>
<option value="place">Places</option>
<option value="geo">Geometrics</option>
<option value="ads">Advertisment</option>
</select>
<span class="pool_place"> <br>
Choose a pool:
<select style="display:inline-block;" name="pool_place[Abelson_2852.jpg]">
<option selected="selected" value="1">place 1</option>
<option value="2">Places</option>
<option value="3">Geometrics</option>
<option value="4">Advertisment</option>
</select>
</span> </span> <span style="display:inline-block;float:left;">Choose Media type:
<select style="display:inline-block;" name="mediatype[Abelson_2852.jpg]">
<option value="1">marker_icon</option>
<option value="2">user_image</option>
<option selected="selected" value="3">general_image</option>
<option value="4">general_video</option>
<option value="5">google_static_map</option>
</select>
</span> </div="forminputs"></td>
<td class="start"><button class="btn btn-primary"> <i class="icon-upload icon-white"></i> <span>Start</span> </button></td>
<td class="cancel"><button class="btn btn-warning"> <i class="icon-ban-circle icon-white"></i> <span>Cancel</span> </button></td>
</tr>
<tr class="template-upload fade in">
<td class="preview"><span class="fade in">
<canvas width="80" height="54"></canvas>
</span></td>
<td class="name"><span>Abelson_3160-1.jpg</span></td>
<td class="size"><span>3.00 MB</span></td>
<td><div aria-valuenow="0" aria-valuemax="100" aria-valuemin="0" role="progressbar" class="progress progress-success progress-striped active">
<div style="width:0%;" class="bar"></div>
</div>
<div="forminputs"> <span style="display:inline-block;float:left;">Choose a pool:
<select style="display:inline-block;" name="pool[Abelson_3160-1.jpg]">
<option selected="selected" value="general_pool">General</option>
<option value="place">Places</option>
<option value="geo">Geometrics</option>
<option value="ads">Advertisment</option>
</select>
<span class="pool_place"> <br>
Choose a pool:
<select style="display:inline-block;" name="pool_place[Abelson_3160-1.jpg]">
<option selected="selected" value="1">place 1</option>
<option value="2">Places</option>
<option value="3">Geometrics</option>
<option value="4">Advertisment</option>
</select>
</span> </span> <span style="display:inline-block;float:left;">Choose Media type:
<select style="display:inline-block;" name="mediatype[Abelson_3160-1.jpg]">
<option value="1">marker_icon</option>
<option value="2">user_image</option>
<option selected="selected" value="3">general_image</option>
<option value="4">general_video</option>
<option value="5">google_static_map</option>
</select>
</span> </div="forminputs"></td>
<td class="start"><button class="btn btn-primary"> <i class="icon-upload icon-white"></i> <span>Start</span> </button></td>
<td class="cancel"><button class="btn btn-warning"> <i class="icon-ban-circle icon-white"></i> <span>Cancel</span> </button></td>
</tr>
</tbody>
I have tried a few ways to pull out the information but the short of it is that I have to be able to know what the key is so I can test it so I know I'm getting the value. I don't have a choice on the post data, that is stuck the way it is. I can't use things like .ToDictionary cause I'm also stuck in .net 2.0.
Here is an attempt at getting the right info via just KeyValuePair thou yes it's wrong but at least I hope it'll give the idea of what is needing to happen.
media.file_name = "Abelson_2834.jpg"; // test value to pin to
int type = 3;
// NOTE I KNOW KeyValuePair IS NOT RIGHT.. looking for right way thou
foreach (KeyValuePair<string, string> obj in Request.Params["mediatype"])
{
if( obj.Key == media.file_name ){
type = int.Parse(obj.Value);
// value of type should be 3 since there is a
// Request.Params["mediatype"]["Abelson_2834.jpg"] but since you can't call keys
// by name it thnk it should be an int
// like Request.Params["mediatype"][0]
}
}
media.type = ActiveRecordBase<media_types>.Find(type);
ActiveRecordMediator<media_repo>.Save(media);
Anyone have an idea on how to make this work? I would think that turning the String[] to a Dictionary or Hashtable would be the trick but.. as of yet it's not working.
Thank you for the help.
Cheers,
jeremyBass
SIDE NOTE
If this was php, I'd just have to go
$value = $_POST["mediatype"]["Abelson_2834.jpg"];
and I'd have the value needed if that clears things up some.

The input is misleading you. You actually are getting property[object]=value. If you create KVPs with Key = some_function(object,property), Value=value you'll be headed in the right direction. For example, as a one-off of your code above:
if (!String.IsNullOrEmpty(Request.Params["mediatype"])){
foreach (KeyValuePair<string, string> obj in Request.Params["mediatype"])
{
dict_props[obj.Key+"_mediatype"]=value;
// add each object to a list
}
}
// for each object in the list
// for each property
...process dictionary....

The solution is this
media.file_name = "Abelson_2834.jpg";
int type = 3;
int tmp = int.Parse(Request.Params["mediatype[" + media.file_name+ "]"]);
if(tmp>0){
type = tmp;
}
In short you need to target directly at the first level form keys as C# .net 2.0 at least doesn't understand that an array when coming from a post can have a key other then a int. When it sees this what it does is treat it as a string so, you call it as one.
Thanks for the help you guys.
Cheers -Jeremy