Develop Reference

How to find element with non-static ID using Selenium Webdriver C#

I want to be able to send text to this text box element:
<form class="compose okform initialized">
<div class="border"></div>
<div id="message_9028519832635440005Container" class="inputcontainer textarea empty">
<textarea class="clone" placeholder="Compose your message" aria-hidden="true" style="height: 21px; width: 417px; line-height: 18px; text-decoration: none; letter-spacing: 0px;" tabindex="-1"></textarea>
<textarea id="message_9028519832635440005" placeholder="Compose your message" style="height: 39px;"></textarea>
<span class="okform-feedback message empty" style="height: 0"></span>
<div class="icon okicon"></div>
</div>
<button class="flatbutton" type="submit"></button>
<div class="draft_message"></div>
<label class="checkbox" for="enter_to_send_9028519832635440005"></label>
</form>
I'm not able to location the element by searching for part of the ID (the number after message_ is dynamically generated).
I've also tried this but I get an error saying "unknown error: cannot focus element":
var textBox = DriverActions.driver.FindElements(By.ClassName("inputcontainer"));
textBox[0].SendKeys("Why hello");

Try the following css
.inputcontainer.textarea.empty>textarea:nth-child(1)
I assumed you want the first text area box with placeholder="Compose your message"
if so, you can also use the following cssSelector
[placeholder='Compose your message'][class='clone']
Partial search with id is also possible. Assuming the Container part of the div's id is unique and static, you can do the following
[id$='Container']>textarea:nth-child(1)
On the other hand, if you want the second textarea just simply change the child index
[id$='Container']>textarea:nth-child(2)
And, here is the implementation
By byCss = By.CssSelector("[id$='Container']>textarea:nth-child(1)");
IWebElement textBox = driver.FindElement(byCss);
textBox.SendKeys("Why hello");

Try this XPath using starts-with
var textBox= DriverActions.driver.FindElement(By.XPath(".//textarea[starts-with(#id,'message_')]"));
textBox.SendKeys("Why hello");
The reason that you are getting the error could be because by your selector you will end up getting a div instead of a textBox that you need.

Element not visible exception

I am having trouble selecting an element as I keep getting the subject error.
Strangely it has worked once, and only once but then never since, using the exact same code.
R9_Automation.Logintest.Loginuser:
OpenQA.Selenium.ElementNotVisibleException : Element is not displayed
I have tried using, implicit and explict waits to no success, I have also tried clicking the element first as seen in the // code but this tells me the element cant be clicked as not visible.
My code is below:
public static void Enterusername(string username)
{
//Driver.Instance.FindElement(By.Id("txtUsername")).Click();
Driver.Instance.FindElement(By.Id("txtUsername")).SendKeys(username);
And the HTML is below:
<form name="aspnetForm" id="aspnetForm" action="" method="post">
<div id="container" style="top: 10px; margin-top: 249.56px; display: block;">
<div class="login">
<div class="figure">
<div class="flex-content">
<span class="siteStatusPlaceHolder">
<p class="message"/>
<fieldset class="user">
<label for="txtUsername">
<input name="ctl00$footerPlaceHolder$txtUsername" class="placeholder" id="txtUsername" type="text" AUTOCOMPLETE="off" placeholder="username"/>
Where have I gone wrong ?

Cannot identify image using browser.Images.Filter(Find.By("ext:qtip", "Delete")).Click()

I want to Click image : following is the html code
I am using following code in watin to click :
browser.Image(Find.By("ext:qtip", "Delete").Click();
It is not working. Please let me know other way.
<div class="x-panel x-column" id="delete-button-2-7qo0yziAwqKk02Gud0Ik" style="width: 12px; padding-top: 2px; padding-left: 8px;">
<div class="x-panel-bwrap" id="ext-gen580">
<div class="x-panel-body x-panel-body-noheader" id="ext-gen581" style="width: 12px;">
<span style="cursor: pointer;">
<img style="width: 16px;" src="/image/poll-grey-close.png" ext:qtip="Delete"/>

This not working because ":" is reserved css selector char try to search using css selector like this:
browser.Image(Find.BySelector("img[ext\\:qtip=\"Delete\"]")).Click();
I didn't checked this code so maybe fine tuning needed...

Where is the single-line?

In the default newly created MVC3 application, at the CRUD's Create view, the text box is implemented/called up as
<div class="editor-field">
#Html.EditorFor(model => model.EnrollmentDate)
#Html.ValidationMessageFor(model => model.EnrollmentDate)
</div>
And the resulted html view file for that block becomes
<div class="editor-field">
<input class="text-box single-line" data-val="true" data-val-required="The EnrollmentDate field is required." id="EnrollmentDate" name="EnrollmentDate" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="EnrollmentDate" data-valmsg-replace="true"></span>
</div>
I look up the class single-line in the Site.css but I can't find it anywhere, only multi-line there is [:-D silly inversion].
Could someone tell me where it is ? is it a css keyword ?
Second, I don't know the difference between using EditFor member function from Html class and TextBox function also from Html especially when I would like to add new style elements to the textbox.
[EDIT]
http://www.asp.net/mvc/tutorials/getting-started-with-ef-using-mvc/implementing-basic-crud-functionality-with-the-entity-framework-in-asp-net-mvc-application
I am reading that tutorial

It's an emitted class attribute from a built-in editor template. This article explains them quite well.
http://bradwilson.typepad.com/blog/2009/10/aspnet-mvc-2-templates-part-3-default-templates.html

Yes its a CSS style but it is not defined in the Site.css, the CSS that is applied in that instance is text-box and input[type="text"].
.text-box {
width: 30em;
}
input[type="text"],
input[type="password"] {
border: 1px solid #ccc;
padding: 2px;
font-size: 1.2em;
color: #444;
width: 200px;
}

Also you can use
#Html.TextBoxFor(model=>model.Name, new {#class="class-name"})
instead of
#Html.EditorFor()

Text in neighboring divs unaligned due to radio button?

Below is one item in my page, which consists of the div containing two side by side divs. The first of which is an outline number to an entry in an outline, and the second item to the right of it is the content of that entry in the outline. The Controls_ContentPanel div can contain many different things, often some text paired with a single input control. In the case of the textbox, I had a problem in that the textbox's font styles were not inherited, and so it's font was larger, and thus the line-height was larger, and thus the text in the same div as the textbox used the larger line-height. However the line-height in the first div containing the outline number text was smaller, and thus the text in the span that was paired with the textbox was not aligned with the text in the outline number. I fixed this by jacking the line-height of both divs up to 22px.
That works, but now I have another problem when I have a radio button, because the input button's computed height is 13px and the text in the same div is moved down a few pixels and doesn't align with the outline text. If I reduce the height of the radio button to 11px it fixes the problem. If I make it larger it makes the problem worse, such that the text with the radio button is aligned at the bottom of the button, and is lower than the outline number text. I tried applying a CSS class to the RadioButton contorl that sets it's height to 11px, but the problem is the span tag gets the class, and the nested input tag does not inherit the height. I am developing a server control and I want to use CSS that does not globally effect all radio buttons on the page, but only the radio buttons I generate. So I had hoped to use Css Class, but it is not effecting the radio button itself since ASP.NET is rendering the css class on the span tag instead of the input tag. So either looking for a nice way to apply the css class to the input tag from my C# code, or some other way to get the text in both div's to align consistently.
Simplified snippet of code trying to apply CSS class to radio button control, but the generated html applies the css class to a span tag instead:
RadioButton radioButton = new RadioButton();
radioButton.CssClass = "Controls_RadioButtonInput";
this.Controls.Add(radioButton);
My CSS file:
/*The first three indent levels*/
.Controls_IndentLevel0
{
font-weight: bold;
font-size: 12pt;
}
.Controls_IndentLevel1
{
font-weight: bold;
font-size: 10pt;
}
.Controls_IndentLevel2
{
font-weight: normal;
font-size: 8pt;
}
/*The div tag that contains each node*/
.Controls_NodePanel
{
clear: both;
font-family: MS Sans Serif;
font-weight: normal;
/*font-size: 8pt;*/
font-style: normal;
line-height: 22px;
border: 1px;
margin: 3px;
}
/*The div tag that contains the outline number*/
.Controls_OutlineNumberPanel
{
float: left;
line-height: 22px;
}
/*The div tag that contains the content of a node, such as a label and textbox, a table, or any of the other controls we've implemented.*/
.Controls_ContentPanel
{
float: left;
line-height: 22px;
}
/*Trying to fix a text alignment issue caused by large radio buttons*/
.Controls_RadioButtonInput
{
height: 11px;
}
The generated HTML:
<div style="margin-left: 60px;" class="Controls_NodePanel Controls_IndentLevel2" id="ID_1__10">
<div class="Controls_OutlineNumberPanel" id="ID_1__10_0">
<span id="ID_1__10_0_0">XIV.</span>
</div>
<div class="Controls_ContentPanel" id="ID_1__10_1">
<div id="ID_1__10_1_0">
<span disabled="disabled" class="Controls_RadioButtonInput">
<input type="radio" disabled="disabled" value="ID_1__10_1_0_0" name="a" id="ID_1__10_1_0_0">
</span>
<span id="ID_1__10_1_0_1">
text here for radio button selection
</span>
</div>
</div>
</div>
Edit, I tried adding line-height to the spans directly, as a test, and no luck. According to firebug they were already inheriting the line-height, but I applied it directly just to make sure, and it had no improvement on the alignment:
<div style="margin-left: 60px;" class="Controls_NodePanel Controls_IndentLevel2" id="ID_1__6">
<div class="Controls_OutlineNumberPanel" id="ID_1__6_0">
<span id="ID_1__6_0_0" style="line-height: 22px;">non0005</span>
</div>
<div class="Controls_ContentPanel" id="ID_1__6_1">
<div id="ID_1__6_1_0">
<span disabled="disabled" class="Controls_RadioButtonInput" style="line-height: 22px;">
<input type="radio" disabled="disabled" value="ID_1__6_1_0_0" name="a" id="ID_1__6_1_0_0">
</span>
<span id="ID_1__6_1_0_1" style="line-height: 22px;">
Competitive HC Only [Competitive 4% and/or 9% Housing Credits]
</span>
</div>
</div>
</div>

Try making the inner spans have the same line-height as the divs (22px) and then setting the vertical-align to be middle.