Develop Reference

Bootstrap switch height automatically changes after postback

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

Selenium getting attribute/ CSS / property

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.

Requied in Group Button in ASP.Net-MVC C# (not using angularjs and not access to form validation function) [duplicate]

I am just wondering how to use the new HTML5 input attribute "required" in the right way on radio buttons. Does every radio button field need the attribute like below or is it sufficient if only one field gets it?
<input type="radio" name="color" value="black" required="required" />
<input type="radio" name="color" value="white" required="required" />

TL;DR: Set the required attribute for at least one input of the radio group.
Setting required for all inputs is more clear, but not necessary (unless dynamically generating radio-buttons).
To group radio buttons they must all have the same name value. This allows only one to be selected at a time and applies required to the whole group.
<form>
Select Gender:<br>
<label>
<input type="radio" name="gender" value="male" required>
Male
</label><br>
<label>
<input type="radio" name="gender" value="female">
Female
</label><br>
<label>
<input type="radio" name="gender" value="other">
Other
</label><br>
<input type="submit">
</form>
Also take note of:
To avoid confusion as to whether a radio button group is required or not, authors are encouraged to specify the attribute on all the radio buttons in a group. Indeed, in general, authors are encouraged to avoid having radio button groups that do not have any initially checked controls in the first place, as this is a state that the user cannot return to, and is therefore generally considered a poor user interface.
Source

I had to use required="required" along with the same name and type, and then validation worked fine.
<input type="radio" name="user-radio" id="" value="User" required="required" />
<input type="radio" name="user-radio" id="" value="Admin" />
<input type="radio" name="user-radio" id="" value="Guest" />

Here is a very basic but modern implementation of required radio buttons with native HTML5 validation:
fieldset {
display: block;
margin-left: 0;
margin-right: 0;
padding-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
border: none;
}
body {font-size: 15px; font-family: serif;}
input {
background: transparent;
border-radius: 0px;
border: 1px solid black;
padding: 5px;
box-shadow: none!important;
font-size: 15px; font-family: serif;
}
input[type="submit"] {padding: 5px 10px; margin-top: 5px;}
label {display: block; padding: 0 0 5px 0;}
form > div {margin-bottom: 1em; overflow: auto;}
.hidden {
opacity: 0;
position: absolute;
pointer-events: none;
}
.checkboxes label {display: block; float: left;}
input[type="radio"] + span {
display: block;
border: 1px solid black;
border-left: 0;
padding: 5px 10px;
}
label:first-child input[type="radio"] + span {border-left: 1px solid black;}
input[type="radio"]:checked + span {background: silver;}
<form>
<div>
<label for="name">Name (optional)</label>
<input id="name" type="text" name="name">
</div>
<fieldset>
<legend>Gender</legend>
<div class="checkboxes">
<label for="male"><input id="male" type="radio" name="gender" value="male" class="hidden" required="required"><span>Male</span></label>
<label for="female"><input id="female" type="radio" name="gender" value="female" class="hidden" required="required"><span>Female </span></label>
<label for="other"><input id="other" type="radio" name="gender" value="other" class="hidden" required="required"><span>Other</span></label>
</div>
</fieldset>
<input type="submit" value="Send" />
</form>
Although I am a big fan of the minimalistic approach of using native HTML5 validation, you might want to replace it with Javascript validation on the long run. Javascript validation gives you far more control over the validation process and it allows you to set real classes (instead of pseudo classes) to improve the styling of the (in)valid fields. This native HTML5 validation can be your fall-back in case of broken (or lack of) Javascript. You can find an example of that here, along with some other suggestions on how to make Better forms, inspired by Andrew Cole.

You can use this code snippet ...
<html>
<body>
<form>
<input type="radio" name="color" value="black" required />
<input type="radio" name="color" value="white" />
<input type="submit" value="Submit" />
</form>
</body>
</html>
Specify "required" keyword in one of the select statements. If you want to change the default way of its appearance. You can follow these steps. This is just for extra info if you have any intention to modify the default behavior.
Add the following into you .css file.
/* style all elements with a required attribute */
:required {
background: red;
}
For more information you can refer following URL.
https://css-tricks.com/almanac/selectors/r/required/

<form>
Select Gender:<br>
<label>
<input type="radio" name="gender" value="male" required>
Male
</label><br>
<label>
<input type="radio" name="gender" value="female">
Female
</label><br>
<label>
<input type="radio" name="gender" value="other">
Other
</label><br>
<input type="submit">
</form>

I need to put a text in a SPAN tag using the Gecko

I need to put a text in a span tag using Gecko. I already researched at all and can not find a solution to this.
If was input or textarea would be easy.
Html page that need to automate.
<div class="_5rpb">
<div aria-autocomplete="list" aria-expanded="false" aria-haspopup="false" aria-owns="js_2g" class="_5rpu" contenteditable="true" role="combobox" spellcheck="true" style="outline: none; white-space: pre-wrap; word-wrap: break-word;">
<div data-contents="true">
<div class="" data-block="true" data-editor="ed503" data-offset-key="aqkh3-0-0">
<div data-offset-key="aqkh3-0-0" class="_1mf _1mj">
<span data-offset-key="aqkh3-0-0">
<span data-text="true">**TEST HERE**</span>
</span>
</div>
</div>
</div>
</div>
</div>

Set the InnerHtml property of this element to be whatever you need.

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.