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.
Related
I have bootstrap switch control that opens and closes some panel in asp.net project. My code as follows:
<div class="bootstrap-switch-container" id="div_pin_bscont" style="height: 34px!important">
<span class="bootstrap-switch-handle-on bootstrap-switch-primary"></span>
<span class="bootstrap-switch-label"> </span>
<span class="bootstrap-switch-handle-off bootstrap-switch-info"></span>
<input type="checkbox" class="make-switch" data-on-color="primary" data-off-color="info" id="chx_pin_data" data-size="mini">
</div>
After build, my markup code looks like:
<div class="bootstrap-switch-container" id="div_pin_bscont" style="height: 34px!important">
<span class="bootstrap-switch-handle-on bootstrap-switch-primary"></span>
<span class="bootstrap-switch-label"> </span>
<span class="bootstrap-switch-handle-off bootstrap-switch-info"></span>
<div class="bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-mini bootstrap-switch-id-chx_pin_data bootstrap-switch-off bootstrap-switch-animate" style="width: 64px;"><div class="bootstrap-switch-container" style="width: 93px; margin-left: -31px;"><span class="bootstrap-switch-handle-on bootstrap-switch-primary" style="width: 31px;">ON</span><span class="bootstrap-switch-label" style="width: 31px;"> </span><span class="bootstrap-switch-handle-off bootstrap-switch-info" style="width: 31px;">OFF</span><input type="checkbox" class="make-switch" data-on-color="primary" data-off-color="info" id="chx_pin_data" data-size="mini"></div></div>
</div>
But after postback, this control's height automatically increases.
I tried to access the control via markup or code behind, but the height controlled by the element which added up by build. Also I digged css files, but appeared nowhere.
Appreciate for your help.
thats sounds weird
one solutions should be define a static height for that element in your css like
div.bootstrap-switch-container {
height: 25px;
}
.bootstrap-switch .bootstrap-switch-handle-on, .bootstrap-switch .bootstrap-switch-handle-off, .bootstrap-switch .bootstrap-switch-label {
padding: 3px 12px;
}
div.bootstrap-switch {
margin-top: -4px;
}
as referenced on this post
height issue in bootstrap switch,
also you can inspect the element and deactivate classes in browser then when you identify which is making it, you can search for that class in your css files
I have the scenario where selenium needs to open the login form and immediately after the page was loaded, click the "Log in" without entering anything. When nothing is filled the fields are both:
Surrounds are highlighted to red
Field name color changed is changed to red
"Required" string appears at the bottom of the field
I've got the whole test running, fields are located but I have no idea how to check (those point) correctly.
DOM only for one field (for the non-red form) is completely ugly:
<div class="form-row" xpath="1">
<div class="jss98 jss99 primary input outlined-input" input="[object Object]" meta="[object Object]">
<label class="jss113 jss102 jss107 jss110 jss112" data-shrink="false" for="email">Email</label>
<div class="jss133 jss120 jss134">
<fieldset aria-hidden="true" class="jss150 jss127" style="padding-left: 29.25px;">
<legend class="jss151" style="width: 0.01px;"><span></span></legend>
</fieldset>
<input aria-invalid="false" class="jss143 jss128" id="email" type="text" value="" style="background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAjZJREFUWAntV7vKIlEMPt5dOy/NID9WIoKKCAsiWIqFFmLra4j2IoKPsL24YKWFD7Ai+ASClY2yNioWgjckfzLrCeN46XSKNXDmJPkyyWdOZnCE+CdfuP3G9RcXvHhRDapFNVUhZYXr1YX1+anmlwUvv3D9xPVu+YEFFRNeqCXKu6tf6i2IALXGMDEbVvlS+EPg/+tAuVwWmUyGR+/tHSgUCiKdThtHgCs/egosFouIRCIiEAjoY9n2+XwikUgIp9PJPq1itVpFLBYTfr9f636o8zs6GAzCeDwGKb1eD1wuF+OYARqNBpzPZzVkuVxCNpu9wuPxOEynU5kCWq0W2Gw2jhkOh1Cr1dgmVmyMRiO+USrNZpNxPD/p5n29XoPb7VZjTCYTTCYTxqRSqVQ4h54AD6HX6xXJZPKmTblcjn35fJ51qWBxkUqlVBM7KEKhkIR41+Zg50VhAofDQSBjPS72+z37tDo7Udntdqopdy1G+qP7CGMC2+1WdLtd8l0JniHb7Xb7hiSet8CjU2Nms5kYDAYcLxVtDunT7nw+Ho8HOp0OYDdgs9lAvV4Hs9nMON4EpVIJ5vO5Oog0M+Fw+ApXFAX6/T4cj0dYrVZQrVavcP0MEJGrALJpammg7mHS53A4nuJ2u/0uridgxYQ3cjqdbnx6B83MM8EOPIMZ4xlgjwHK3VYhj5f4i8UiRKNRzv35S2b4DHwIUAcWBjx5suSCCPyRlgG7WtvQj1P5o4kEfTK//fP8G/4x2UymA12DAAAAAElFTkSuQmCC"); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%; cursor: auto;">
</div>
</div>
</div>
DOM with "red":
<div class="form-row" xpath="1">
<div class="jss98 jss99 primary input outlined-input error " input="[object Object]" meta="[object Object]" aria-describedby="email-helper-text">
<label class="jss113 jss116 jss105 jss102 jss107 jss110 jss112" data-shrink="false" for="email">Email</label>
<div class="jss133 jss120 jss139 jss125 jss134">
<fieldset aria-hidden="true" class="jss150 jss127" style="padding-left: 29.25px;">
<legend class="jss151" style="width: 0.01px;"><span></span></legend>
</fieldset>
<input aria-invalid="true" class="jss143 jss128" id="email" type="text" value="" style="background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAmJJREFUWAntV7uKIkEUvbYGM4KID3wEIgjKRLLpKGLgFwiCfslGhkb7IbLgAzE1GhMxWxRRBEEwmEgDERWfW6fXuttq60a2wU6B1qlzb9U5fatsKROJVigUArvd7oeAyePx6Af3qGYymT7F2h8Wi+V7Pp+fmE7iv4Sw81GieusKIzNh4puCJzdaHIagCW1F4KSeQ4O4pPLoPb/3INBGBZ7avgz8fxWIxWIUCoX43Blegbe3NwoGg88zwMoncFUB8Yokj8dDdrv9MpfHVquV/H4/iVcpc1qgKAp5vV6y2WxaWhefreB0OimXy6kGkD0YDKhSqdB2u+XJqVSK4vE4QWS5XKrx0WjEcZ/PR9lslhwOh8p1Oh2q1Wp0OBw4RwvOKpBOp1kcSdivZPLvmxrjRCKhiiOOSmQyGXp5ecFQbRhLcRDRaJTe39//BHW+2cDr6ysFAoGrlEgkwpwWS1I7z+VykdvtliHuw+Ew40vABvb7Pf6hLuMk/rGY02ImBZC8dqv04lpOYjaw2WzUPZcB2WMPZet2u1cmZ7MZTSYTNWU+n9N4PJbp3GvXYPIE2ADG9Xqder2e+kTr9ZqazSa1222eA6FqtUoQwqHCuFgscgWQWC6XaTgcEiqKQ9poNOiegbNfwWq1olKppB6yW6cWVcDHbDarIuzuBBaLhWrqVvwy/6wCMnhLXMbR4wnvtX/F5VxdAzJoRH+2BUYItlotmk6nLGW4gX6/z+IAT9+CLwPPr8DprnZ2MIwaQBsV+DBKUEfnQ8EtFRdFneBDKWhCW8EVGbdUQfxESR6qKhaHBrSgCe3fbLTpPlS70M0AAAAASUVORK5CYII="); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%;">
</div>
<p class="jss159 jss163 jss160" id="email-helper-text">Required</p>
</div>
</div>
We can see that: "class="jss98 jss99 primary input outlined-input error"/ aria-describedby="email-helper-text", input aria-invalid="true" and finally new paragraph was added with the text "Required"
What I would like to do right now is to check the field BEFORE it was clicked and check if those things listed above are nulls, next click and check if the elements previously not present are now present.
Could someone explain me how those three methods enclosed in the title are vary?
I would like to take the value? of class inside the div (class="jss98 jss99 primary input outlined-input"). Can someone tell me how it can be taken?
I'm writing in C#
The first thing you would want to do is put the before and after HTML in a diff engine to see what changed. (You can find a simple one online if you don't have one already.) There are three things I see (that I think are significant):
The class "error" is added to the outer DIV
The "aria-invalid" attribute on the INPUT changes from false to true
The P tag is added with id="email-helper-text" and contains "Required"
The before and after tests would go something like this... you do a .FindElements() (plural) and see if the count is 0 before and 1 after.
Here are some code samples
Example 1
By errorClassLocator = By.CssSelector("div.outlined-input.error");
// before
Assert.Zero(Driver.FindElements(errorClassLocator).Count, "Verify that 'error' class is not present");
// after
Assert.NotZero(Driver.FindElements(errorClassLocator).Count, "Verify that 'error' class is present");
Example 2
By ariaInvalidLocator = By.CssSelector("input#email[aria-invalid='true']");
// before
Assert.Zero(Driver.FindElements(ariaInvalidLocator).Count, "Verify that 'aria-invalid' attribute value of 'true' is not present");
// after
Assert.NotZero(Driver.FindElements(ariaInvalidLocator).Count, "Verify that 'aria-invalid' attribute is true");
NOTE: You could also use two locators... look for aria-invalid='false' for before instead of 'true' doesn't exist. Another option would be to find the element and then pull the value of 'aria-invalid' and compare it to 'true' or 'false'.
Example 3
By requiredLocator = By.Id("email-helper-text");
// before
Assert.Zero(Driver.FindElements(requiredLocator).Count, "Verify that the 'email-helper-text' P is not present");
// after
Assert.NotZero(Driver.FindElements(requiredLocator).Count, "Verify that the 'email-helper-text' P is present");
Assert.AreEqual("Required", Driver.FindElement(requiredLocator).Text, "Verify that 'Required' text is present");
NOTE: Using .FindElements() is crucial for the before case because if you use .FindElement() it will throw if the element is not found. It's also useful for the after case in case it's not present as expected. Instead of getting an ElementNotFoundException, you'll instead get a failed Assert with a clear message on what is missing.
You could basically use XPath to check for the contents of the class attribute like this:
"//div[contains(#class, 'error')]"
This should find nothing before you submit and find the colored element after submit.
Im trying to do a page which is similar to this http://www.manuliferetirement.sg/calculator.html on c# asp.net page. Is it possible to put multiple smaller pages/section and allow me to click next to go to the next section with c# asp.net?
Why yes! Inspecting the HTML code of the website, they merely had all the steps laid out in their own respective divs, and simply changed the CSS styling of each div from display: none to display: block to show them, and the opposite to hide them. Try right-clicking the webpage and selecting "Inspect Element", then try going through the steps. It should make everything clear.
If you want to do this, you'd need a bit of javascript knowledge, but it is very doable on ASP.NET.
If you know jQuery, It will help you a lot. Simply make your pages as div inside a single page and give them an unique ID.
<div class="page">
<div id="Page_One">
<input type="text" name="email_address" placeholder="Email Address"/>
<button id="GoToSecond">Next</button>
</div>
<div id="Page_Two" class="hidden">
<input type="password" name="password" placeholder="Password"/>
<input type="password" name="retype_password" placeholder="Retype Password"/>
<button id="GoToLast">Next</button>
<button id="ReturnToFirst">Back</button>
</div>
<div id="Page_Three" class="hidden">
<p>A confirmation code has been sent to your email. Put your code here</p>
<input type="text" name="confirmation_code" placeholder="Code"/>
<button id="AddUser">Add User</button>
<button id="ReturnToSecond">Back</button>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
//Inside here you need to do some javascript to handle your ui transition
$("#GoToSecond").on('click', function(e){
//Do your validation to move next
$('#Page_One').hide("slide", {direction: "left"});
$('#Page_Two').delay(500).show("slide", {direction: "right"});
});
//Second Page functions
$("#ReturnToFirst").on('click', function(e){
$('#Page_Two').hide("slide", {direction: "right"});
$('#Page_One').delay(600).show("slide", {direction: "left"});
});
$("#GoToLast").on('click', function(e){
//Do your validation to move next
$('#Page_Two').hide("slide", {direction: "left"});
$('#Page_Three').delay(600).show("slide", {direction: "right"});
});
//Last Page functions
$("#ReturnToSecond").on('click', function(e){
$('#Page_Three').hide("slide", {direction: "right"});
$('#Page_Two').delay(600).show("slide", {direction: "left"});
});
$("#AddUser").on('click', function(e){
alert("Make your submission here");
});
})
</script>
<style>
.page{
margin: 0 auto;
width: 300px;
min-height: 200px;
box-shadow: 0px 1px 5px rgba(0,0,0,0.3);
}
.hidden{ display: none;}
</style>
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 ?
I am trying to click on the div tag that has id="0". Although it can find that id, unable to click on it. clicking on other ids work.
This was working in Firefox 12 but failing in 13
I am using Selenium2 with C#
driver.FindElement(By.XPath("//div[#class='MenuItem' and #id='0']")).Click();
<div style="position: absolute; top: 72px; left: 9px; " id="file" class="Menu">
<div class="MenuItem" id="0"> <img src="images/UI/Icons/folder.png">Folder</div>
<div class="MenuItem" id="1"> <img valign="middle" src="images/UI/Icons/tree/folderBlogClosed.png">Blog</div>
<div class="MenuItem" id="2"> <img valign="middle" src="images/UI/Icons/folderBoard.png">Discussion Board</div>
</div>
Elements with ID attributes that start with numbers are invalid HTML. While most browsers will render this just fine, it's entirely possible that attempting to use JavaScript to locate the element by the ID (as Selenium WebDriver does) will fail.
Is there a reason you're using an XPath and not just selecting by the ID?
driver.FindElement(By.Id("0"));
HTML id's should be unique on a page.
I resolved this issue by using mouse actions
. Thank you all for your input.
Actions builder = new Actions(driver);
IWebElement tagElement = driver.FindElement(By.XPath("//div[#id='0' and #class='MenuItem']"));
//mouse hover on first item
builder.MoveToElement(tagElement).Perform();
//click on first item
driver.FindElement(By.XPath("//div[#id='0' and #class='MenuItem']")).Click();