We Keep Coding

Selenium Webdriver: Select radiobutton with specific span title in list

I have the following HTML with in this case 2 items in my ul. Now I want to check (click) the radiobutton where <span title = "SeleniumUpload">. In this HTML there is only one element, but it can be many more.
How do I find this element?
HTML example:
<ul id="ctl00_cpm_AlbumMain_thumbs" class="listAlbums clearfix nospace-bottom" mediastorepartnertype="extrafilm" style="height: 160px;">
<li id="ctl00_cpm_AlbumMain_1da02a93-76cd-46a5-8dfb-e841aedf4398|2ab03151-7f88-4924-9471-248786ba46c0_handle" class="folderitemhandle" pagenr="1">
<a title="Bekijk de foto's in dit album." href="/nl/myaccount/myphotos/album.aspx?albumid=2ab03151-7f88-4924-9471-248786ba46c0">
<img id="ctl00_cpm_AlbumMain_1da02a93-76cd-46a5-8dfb-e841aedf4398|2ab03151-7f88-4924-9471-248786ba46c0_handle_image" class="lazy" width="100" data-original="http://photos.myserver.com.stage/photos/nastemp1/volume1/8889361a-c9e5-4cbd-a5a3-bbf7612dd370/131016/4/8/48f1d74f-0e62-455a-ba60-2a64fc3ff2a6.thumb.jpg?upd=635175161317600000" alt="Bekijk de foto's in dit album." src="http://photos.myserver.com.stage/photos/nastemp1/volume1/8889361a-c9e5-4cbd-a5a3-bbf7612dd370/131016/4/8/48f1d74f-0e62-455a-ba60-2a64fc3ff2a6.thumb.jpg?upd=635175161317600000" style="display: inline;">
</a>
<label class="albumTitle">
<input id="ctl00_cpm_AlbumMain_1da02a93-76cd-46a5-8dfb-e841aedf4398|2ab03151-7f88-4924-9471-248786ba46c0_handle_box" type="radio" onclick="javascript:SelectFolder('ctl00_cpm_AlbumMain_1da02a93-76cd-46a5-8dfb-e841aedf4398|2ab03151-7f88-4924-9471-248786ba46c0_handle','1da02a93-76cd-46a5-8dfb-e841aedf4398|2ab03151-7f88-4924-9471-248786ba46c0');" name="ctl00$cpm$AlbumMain$1da02a93-76cd-46a5-8dfb-e841aedf4398|2ab03151-7f88-4924-9471-248786ba46c0_handle$" value="box">
<span title="Test (2)">Test (2)</span>
</label>
</li>
<li id="ctl00_cpm_AlbumMain_1da02a93-76cd-46a5-8dfb-e841aedf4398|35b9a18d-6203-4fcb-a05f-decb8672d1c7_handle" class="folderitemhandle" pagenr="1">
<a title="Bekijk de foto's in dit album." href="/nl/myaccount/myphotos/album.aspx?albumid=35b9a18d-6203-4fcb-a05f-decb8672d1c7">
<img id="ctl00_cpm_AlbumMain_1da02a93-76cd-46a5-8dfb-e841aedf4398|35b9a18d-6203-4fcb-a05f-decb8672d1c7_handle_image" class="lazy" width="100" data-original="http://photos.myserver.com.stage/photos/nastemp1/volume1/8889361a-c9e5-4cbd-a5a3-bbf7612dd370/131016/7/f/7f2efe77-7754-463e-8eb7-f2853cfa0f07.thumb.jpg?upd=635175162493870000" alt="Bekijk de foto's in dit album." src="http://photos.myserver.com.stage/photos/nastemp1/volume1/8889361a-c9e5-4cbd-a5a3-bbf7612dd370/131016/7/f/7f2efe77-7754-463e-8eb7-f2853cfa0f07.thumb.jpg?upd=635175162493870000" style="display: inline;">
</a>
<label class="albumTitle">
<input id="ctl00_cpm_AlbumMain_1da02a93-76cd-46a5-8dfb-e841aedf4398|35b9a18d-6203-4fcb-a05f-decb8672d1c7_handle_box" type="radio" onclick="javascript:SelectFolder('ctl00_cpm_AlbumMain_1da02a93-76cd-46a5-8dfb-e841aedf4398|35b9a18d-6203-4fcb-a05f-decb8672d1c7_handle','1da02a93-76cd-46a5-8dfb-e841aedf4398|35b9a18d-6203-4fcb-a05f-decb8672d1c7');" name="ctl00$cpm$AlbumMain$1da02a93-76cd-46a5-8dfb-e841aedf4398|35b9a18d-6203-4fcb-a05f-decb8672d1c7_handle$" value="box">
<span title="SeleniumUpload (3)">Selenium... (3)</span>
</label>
</li>
This I have so far, but the title attribute of the span returns an empty string. Why is this?
var albums = driver.FindElements(By.ClassName("albumTitle"));
Console.WriteLine("Found {0} photo-albums", albums.Count);
foreach (var we in albums)
{
var span = driver.FindElement(By.TagName("span"));
String title = span.GetAttribute("title"); // returns empty string, I need this title value
Console.WriteLine("we.text:'{0}' title:''{1}",we.Text, title);
// work around
if (we.Text.Contains("Seleni")) // I should be able to check on span title
{
var input = we.FindElement(By.CssSelector("input[id*='ctl00_cpm_AlbumMain_']"));
var id = input.GetAttribute("id");
Console.WriteLine(we.Text + " Id:" + id);
}
}

What you want to do is to use an xpath selector. Something like //*/span[title="SeleniumUpload"] if you want to match that exact title. If you want to just match something close to it, then you'll need to investigate using xpath with contains.

asp:Image does not show the image

I have this code. This code is a part of my menu items:
<li class="" id="fifth-li">
<ul style="visibility: hidden; display: none;" id="fifth-ul">
<li><asp:HyperLink ID="hpl_undergraduate" runat="server"></asp:HyperLink></li>
<li><asp:HyperLink ID="hpl_graduate" runat="server"></asp:HyperLink></li>
</ul>
<asp:HyperLink ID="hpl_lessons" runat="server">
<asp:Image ID="img_lessons" runat="server" />
<strong></strong>
<em id="em_lessons" runat="server"></em>
</asp:HyperLink>
</li>
And this is a part of my .cs code file:
em_lessons.InnerHtml = lang["MENU_LESSONS"];
hpl_lessons.Text = lang["MENU_LESSONS"];
hpl_undergraduate.Text = lang["MENU_UNDERGRADUATE"];
hpl_graduate.Text = lang["MENU_GRADUATE"];
hpl_lessons.NavigateUrl = "lessons.html";
hpl_undergraduate.NavigateUrl = "lessons-801.html";
hpl_graduate.NavigateUrl = "lesson-802.html";
img_lessons.ImageUrl = "images/lessons.png"; //Here the image url is defined.
This code is for my web page's menu. There are a few more items like this. I add an image to the img_lessons object on the codebehind. But after running the page I get this code:
<li class="" id="fifth-li">
<ul style="visibility: hidden; display: none;" id="fifth-ul">
<li>
<a id="MainContent_hpl_undergraduate" href="lesson-801.html">
Undergraduate
</a>
</li>
<li>
<a id="MainContent_hpl_graduate" href="lesson-802.html">
Graduate
</a>
</li>
</ul>
<a id="MainContent_hpl_lessons" href="lessons.html">
Lessons
</a>
</li>
I was thinking that if I pull out img_lessons between <asp:HyperLink></asp:HyperLink>, the image would have been shown. But no way. I have changed the codes a bit to be cleaner.
The point is not about the image path, is about some programmatic incompetence/inconvenience. Because I do not see a <img id="MainContent_img_lessons" ... /> code on the browser's code view.
As you can see my image does not look. What do you think?
Regards.

When you do this:
hpl_lessons.Text = lang["MENU_LESSONS"];
you are wiping out any and all markup from the inside of the hyperlink.
EDIT: Since it looks like you already have a <em> tag that you have made a server tag, this line:
em_lessons.InnerHtml = lang["MENU_LESSONS"];
should already be setting viewable text, so, really, you should only have to remove the line mentioned above.

You are clearing the hyperlink innerHTML when you are setting the .Text to lang["MENU_LESSONS"]
What you would need to do is change your markup as follows:
<asp:HyperLink ID="hpl_lessons" runat="server">
<asp:Image ID="img_lessons" runat="server" />
<strong><asp:Literal ID="lit_lessons"/></strong>
<em id="em_lessons" runat="server"></em>
</asp:HyperLink>
And then change your code so that it reads
lit_lessons.Text = lang["MENU_LESSONS"];

How can i insert a C# list into a Div?

I have a C# list:
List<string> Listtags = GetListTag.GetTagList().ToList();
And, I would like to put it into a Div:
<div id="tags">
<ul>
<li><This should be populated with my list></li>
//This list can have any number of items depending on how big my list tags is
</ul>
</div>
Could someone show me how to do this?

you can also use Repeater
<ul>
<asp:Repeater runat="server" id="R">
<ItemTemplate>
<li><%# Container.DataItem %></li>
</ItemTemplate>
</asp:Repeater>
</ul>
and in runtime
List<string> ListTags = GetListTag.GetTagList().ToList();
R.DataSource = ListTags;
R.DataBind();

Use asp:bulletedList and your list will be much easier.
<div id="tags">
<asp:BulletedList id="blTabs"
BulletStyle="Disc"
DisplayMode="LinkButton"
runat="server">
</asp:BulletedList>
</div>
Code Behind:
ListItem li = new ListItem();
li.Value = "html text"; //html goes here i.e. xtab1.html
li.Text = "New Text"; //text name goes i.e. here tab1
blTabs.Items.Add(li);

If you're using ASP.NET, you could use a BulletedList webserver control:
<asp:BulletedList ID="BulletedList1" runat="server"
BulletStyle="Circle"
DisplayMode="Text">
</asp:BulletedList>
and in codebehind:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
List<string> Listtags = GetListTag.GetTagList().ToList();
Listtags.ForEach(t => BulletedList1.Items.Add(t));
}
}
Edit: "I want to add something like this::: Listtags.ForEach(t => BulletedList1.Items.Add(t),"$tag$ "); weight being a variable in my code"
So i assume that you want to add hyperlinks and apply a different css class on the items.
<asp:BulletedList ID="BulletedList1" runat="server"
CssClass="TagList"
DisplayMode="HyperLink">
</asp:BulletedList>
and for example the css:
<style>
.TagList a {text-decoration:none}
.TagList a:link {text-decoration:none}
.TagList a:visited {text-decoration: none; color: blue}
.TagList a:hover {text-decoration: underline; color: red}
</style>
and how you add the links dynamically(the value of the ListItem is the URL):
Listtags.ForEach(t =>
BulletedList1.Items.Add(new ListItem(t, browseUrl + "?tag=$urlencodetag$"))
);

If you are using MVC3 you can do something like the following:
<div id="tags">
<ul>
#foreach(var item in Model.Listtags)
{
<li>#item.YourPropertyName</li>
}
</ul>
</div>

In Asp.Net
<ul id = "myul" runat = "server">
</ul>
In Code Behind (In Page Load I suppose or button click)
Listtags.ForEach(x => new ListItem(){Text = x });

How can i make a div as non selectable from code behind

I have my div as follows
<div class="menu" id="admindiv" runat="server">
<ul>
<li>welcome to my site<!--[if IE 7]><!--><!--<![endif]-->
<table>
<tr>
<td>
<ul>
<li>Reports</li>
<li>Delete</li>
</ul>
</td>
</tr>
</table>
<!--[if lte IE 6]></a><![endif]-->
</li>
<!--[if lte IE 6]></a><![endif]-->
</ul>
</div>
I would like to enable or disable on a page from code behind, means i would like to make this div as non selectable field on certain conditions. I tried this but i didn't get succeeded
protected void Page_Load(object sender, EventArgs e)
{
admindiv.Attributes.Add("style", "color:gray;");
admindiv.Attributes.Add("disabled", "true");
}

You can't make a DIV non-selectable. If you want to make the links non-clickable, this is the code-snipt does it:
<div class="menu" id="admindiv">
<ul>
<li>welcome to my site<!--[if IE 7]><!--><!--<![endif]-->
<table>
<tr>
<td>
<ul>
<li>
<asp:HyperLink ID="Link1" runat="server" Text="Reports" />
</li>
<li>
<asp:HyperLink ID="Link2" runat="server" Text="Delete" />
</li>
</ul>
</td>
</tr>
</table>
<!--[if lte IE 6]></a><![endif]-->
</li>
<!--[if lte IE 6]></a><![endif]-->
</ul>
</div>
AND the code-behind:
protected void Page_Load(object sender, EventArgs e) {
if(isAdmin) { // check for admin user
Link1.NavigateUrl = "Reports.aspx";
Link1.NavigateUr2 = "Delete.aspx";
} else {
Link1.NavigateUrl = "javascript:return void;";
Link1.NavigateUr2 = "javascript:return void;";
}
}

Divs can be shown and hidden, but not disabled. If the div is visible its contents will be active unless you disable each item individually.
Another option to disabling each control is to create a new div that is transparent but sits on top of the part you want to disable, then just show / hide that div from the code behind.
However this is not a security mechanism, as anyone with a browser HTML developer plug-in (like firebug) can remove that div and gain access to the controls.
The best way to disable links in ASP.NET is to add an "onclick" event (works with linkbuttons and hyperlinks):
LinkButton1.Attributes["OnClick"] = “return false;”;

populate a html list control using .NET

I have a list defined like so:
<ul id="myList" class='myClass'>
<li class="myItemClass">Item 1</li>
<li class="myItemClass">Item 2</li>
</ul>
using .NET how can I add items to the list dynamically? I also need to specify the class name on each new item

you can even use that HTML, adding runat="server" you will be able to treat it as a HTMLControl no mater what control it is, I do this often with div's
<ul id="myList" runat="server" class="myClass">
<li class="myItemClass">Item 1</li>
<li class="myItemClass">Item 2</li>
</ul>
then you get that HTMLControl and play with it
HtmlGenericControl li;
for (int x = 3; x <= 10; x++)
{
li = new HtmlGenericControl("li");
li.Attributes.Add("class", "myItemClass");
li.InnerText = "Item " + x;
myList.Controls.Add(li);
}
you will end up with:
<ul id="myList" runat="server" class="myClass">
<li class="myItemClass">Item 1</li>
<li class="myItemClass">Item 2</li>
<li class="myItemClass">Item 3</li>
<li class="myItemClass">Item 4</li>
<li class="myItemClass">Item 5</li>
<li class="myItemClass">Item 6</li>
<li class="myItemClass">Item 7</li>
<li class="myItemClass">Item 8</li>
<li class="myItemClass">Item 9</li>
<li class="myItemClass">Item 10</li>
</ul>
of course that you can use an ordered or unorderer list, they also below to the ASP.NET Web Controls.
<asp:BulletedList runat="server" ...

You could use asp:BulletedList like
<asp:BulletedList ID="MyList1" CssClass="MyClass" runat="server">
<asp:ListItem Text="Item1" class="MyClass" />
</asp:BulletedList>
Add add code like
ListItem item = new ListItem("Item2");
item.Attributes.Add("class", "MyClass");
MyList1.Items.Add(item);
Or if for some specific reason you need to use the ul tag then you can add a runat="server" to it. E.g.
<ul id="MyList2" class="MyClass" runat="server">
<li class="MyClass">Item1</li>
</ul>
With code like
HtmlGenericControl li = new HtmlGenericControl("li");
li.Attributes.Add("class", "MyClass");
li.InnerText = "Item2";
MyList2.Controls.Add(li);

The simplest way you can solve this problem is by using the asp repeater control
<ul id="myList" class='myClass'>
<asp:Repeater ID="repeaterMyList" Runat="server">
<ItemTemplate>
<li class="myItemClass">
<%# Eval("Item") %>
</li>
</ItemTemplate>
</asp:Repeater>
</ul>
[Edit] - Do remember to set the datasource on repeaterMyList and call databind on the repeater control in the codebehind.
repeaterMyList.DataSource = someDataTable;
repeaterMyList.DataBind();

I'm assuming that there is a valid reason for you not to use the BulletedList webserver control. Anyway, this is an interesting programming exercise that illustrates the internals of the Htmlservercontrol architecture and how they map to simple HTML tags.
The HTML ul and li tags are not directly mapped as HTMLServercontrols. This means that even if you add a runat="server" attribute to the list, it's contents will not be directly accessible as listitems.
However, all controls not directly mapped as Html server controls are accessible via the HtmlGenericControl class. This makes it possible to create and modify such controls dynamically.
The solution, therefore, is twofold:
Make the unordered list runat="server" so that you can access it in server-side code. Also, you should make the existing items in the list runat="server", else they will be only be accessible as an LiteralControl that contains the first two listitems as plain text.
In code, access the contents of the list and add a new HtmlGenericControl of type "li" to it.
The following (bare-bones simple) page demonstrates this procedure :
<%# Page Language="VB" AutoEventWireup="false" %>
<%# Import Namespace="System.Collections.Generic" %>
<script runat="server">
Private Shared addedItems As List(Of HtmlGenericControl)
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not Page.IsPostBack Then
'On first load, instantiate the List.
addedItems = New List(Of HtmlGenericControl)
End If
End Sub
Protected Sub btn1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
'Add the previously created items to the UL list.
'This step is necessary because
'...the previously added items are lost on postback.
For i As Integer = 0 To addedItems.Count - 1
myList.Controls.Add(addedItems.Item(i))
Next
'Get the existing no. of items in the list
Dim count As Integer = myList.Controls.Count
'Create a new list item based on input in textbox.
Dim li As HtmlGenericControl = CreateBulletItem()
'Add the new list item at the end of the BulletedList.
myList.Controls.AddAt(count, li)
'Also add this newly created list item to the generic list.
addedItems.Add(li)
End Sub
Private Function CreateBulletItem() As HtmlGenericControl
Dim li As New HtmlGenericControl("li")
li.InnerText = txtNewItem.Value
li.Attributes("class") = "myItemClass"
Return li
End Function
</script>
<html>
<head runat="server">
<title>Test Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<ul id="myList" class='myClass' runat="server">
<li runat="server" class="myItemClass">Item 1</li>
<li runat="server" class="myItemClass">Item 2</li>
</ul>
<input type="text" id="txtNewItem" runat="server" />
<asp:Button ID="btn1" runat="server" Text="Add" OnClick="btn1_Click" />
</div>
</form>
</body>
</html>