i'm trying to get the locator of a checkbox named mycheckbox.
i tried:
//div[#class='ng-binding','mycheckbox']
It doesn't find the checkbox
The html code is:
<label ng-attr-for="{{ guidedNavigationFilter.id + '_ctrl_' + $index }}"
ng-bind="choiceLabel" class="ng-binding"
for="groupRadioClassification de privilège_ctrl_2">
mycheckbox
</label>
Thank you for your help.
You are searching for a div tag, but the element you want is a label. Maybe you need to reference the div containing the label element. It could look like this:
//div/label[#class='ng-binding']
or
//div/label[.='mycheckbox']
The element you see "looks" like a checkbox, but it is something that is dynamically controlled by AngularJS.
You did not posted the exact keyword and error message, so it is harder to guess the solution. I would say to try to Focus or Click the element, so it is activated as a Checkbox.
Related
Trying to check a specific check box in a dynamic grid. The only uniqueness for the targeted checkbox is it's value. The surrounding div is created by the grid object and is not really related to the value of the checkbox.
<div class="ricoLG_cell ricoLG_evenRow" id="ex2_2_0">
<input onclick="wasChecked(this);" name="regids" type="checkbox" value="184685">
</div>
The xpath evaluates to :
//*[#id="ex2_2_0"]/input
which is not predictable. The value is predictable, but I don't know how to reference it.
Any help will be appreciated.
If the value is predictable, reference it like any other attribute - like you did with the id:
//input[#value="184685"]
I am using Robot Framework with Selenium2Library for website tests automation. My HTML Value is
<select class="autoWidth m![Element Locator Error][1]inWidth" id="ctl00_ResultPanePlaceHolder_ctl00_ctl02_ctl01_contentContainer_ddlLanguage" name="ctl00$ResultPanePlaceHolder$ctl00$ctl02$ctl01$contentContainer$ddlLanguage">
<option value=![enter image description here][2]"1118">አማርኛ (ኢትዮጵያ)</option>
I am using cmd
Click Element id=ctl00_ResultPanePlaceHolder_ctl00_ctl02_ctl01_contentContainer_ddlLanguage
I am getting
value error: Element locator did not match any element.
How to fix this issue.
Most likely your element is inside an iframe. Look through the html to see if you see <iframe ...> before the element you are trying to click. If so, you first need to use Select Frame before trying to click on the element.
You should need to use id= as ID is one of the default attributes it looks for. Is it possible to see some more of the html code surrounding the element you are after?
I couldn't find anything in the angularjs docs, nor online, about this specific aspect of form validation. You know when someone writes something in an input field (example: name, phone number, email etc.), and then there is a green checkmark that appears? Or an X that appears implying it's wrong, incomplete etc.
So, I have those images in my folder and ready for use in either situation. Problem is, I can't find the documentation to properly achieve what I would like to achieve. I am thinking that angularjs would be the solution to use, as the rest of my code in is angular.
Since this is angularjs, the only post and documentation that presented a viable option (which does not work for a few reasons) are the following options:
How to put an image in div with CSS?
https://docs.angularjs.org/tutorial/step_09
I was thinking of using CSS to trick the browser into making the one or the other image appear as it validates. I thought it might force the image in my other div to appear, but to no avail.
For example, in this CSS, I tried this:
.ng-valid.ng-dirty .div.test{
border-color: green;
content:url(http://example.com/image);
}
Using this in my HTML:
<div class="test">
<label style="float:left">by:</label>
<input class="form-control controltwo" required ng-model="reviewCtrl.review.author" name="email" id="email" type="email" style="width:350px;" placeholder="Email Address"/>
</div>
As I said before, I am trying to achieve something using angularjs. As CSS can be used for styling, it cannot be tricked into being a styling option and a complex validator. I've tried a few tricks as show on the links, but they don't work. As for the second link, it just isn't made for this purpose, and considering they are made only for filters and images, the docs for the filters don't help a bit.
A simple way of achieving what you want is to look in to the $valid or $invalid properties of your form control.
For example, to show a small message when the email is invalid, you would put this element in your markup.
<div ng-show='reviewForm.email.$dirty && reviewForm.email.$invalid'>Invalid Email</div>
Where reviewForm is the name of your form, and email is the name of your input control.
Here is a plunkr demonstrating this: http://plnkr.co/edit/tUuToy99xjfMhbyMd3eV
You can replace the element with whatever else you want
You can do this with ng-show, ng-src and ng-model depending on what you're validating.
https://docs.angularjs.org/api/ng/directive/ngModel
https://docs.angularjs.org/api/ng/directive/ngShow
https://docs.angularjs.org/api/ng/directive/ngSrc
The example under ng-model:text shows pretty much what you want. If you're not using forms, you should be able to use ng-change to fire off a check and change the image to the appropriate one.
https://docs.angularjs.org/api/ng/input/input%5Btext%5D
If ng-show watches the $valid attribute of the field in question you can hide the check mark when validation is false, and show it when true. You can flip the logic if you want an X.
I'm using jQuery UI with a custom theme, and I have an <input type="submit"> element on my page. Since jQuery is around this button gets the jQuery UI look and feel - it is automagically added the css classes ui-button ui-widget ui-state-default.
How do I get rid of these ?
Want the button to be a plain old button without those classes.
Thanks.
The buttons don't automatically get the classes set - you must be calling something like the following
$("button, input:submit, input:button").button();
you need to remove input:submit
To change your button back to 'normal' style you could either use ManseUK's answer, or if you just want to restyle this button you can remove the three classes by adding $("#yourButtonID").removeClass("ui-button ui-widget ui-state-default")
Another way to solve this problem is that if you look in the jquery-ui.js file there will be a block comment that starts with something like: "jQuery-UI Button", delete that entire block from the start of the comment to the start of the next comment for another widget.
This solved the problem for me.
I have a checkbox list control on my asp.net web form that I am dynamically populating from an arraylist. In javascript I want to be able to iterate through the values in the list and if a particular value has been selected to display other controls on the page.
My issue is that all the values in the checkbox list are showing up as 'on' instead of the actual value set. How do I get the actual values for each checkbox?
Thanks.
Javascript:
checkBoxs=document.getElementById(CheckboxList);
var options=checkBoxs.getElementsByTagName('input');
for(var i=0;i<options.length;i++)
{
if(options[i].value=="Other")
{
if(options[i].checked)
{
var otherPub=document.getElementById('<%=alsOtherPublicity.ClientID%>');
otherPub.style.display='block';
}
}
}
Edit: The line that I'm having problems with is if(options[i].value=="Other") as the values showing up in firebug are given as 'on' rather than the values that I set.
Edit 2: The html that is produces looks like:
<span id="ctl00_ContentPlaceHolderMetadata_Allocation1_alfPublicity" class="ucFieldCBL" onChange="alValidate();" onClick="alPublicity('ctl00_ContentPlaceHolderMetadata_Allocation1_alfPublicity');">
<input id="ctl00_ContentPlaceHolderMetadata_Allocation1_alfPublicity_0" type="checkbox" name="ctl00$ContentPlaceHolderMetadata$Allocation1$alfPublicity$0"/>
<label for="ctl00_ContentPlaceHolderMetadata_Allocation1_alfPublicity_0">Text1</label>
<input id="ctl00_ContentPlaceHolderMetadata_Allocation1_alfPublicity_1" type="checkbox" name="ctl00$ContentPlaceHolderMetadata$Allocation1$alfPublicity$1"/>
<label for="ctl00_ContentPlaceHolderMetadata_Allocation1_alfPublicity_1">Text2</label>
<input id="ctl00_ContentPlaceHolderMetadata_Allocation1_alfPublicity_2" type="checkbox" name="ctl00$ContentPlaceHolderMetadata$Allocation1$alfPublicity$2"/>
<label for="ctl00_ContentPlaceHolderMetadata_Allocation1_alfPublicity_2">Text3</label>
<input id="ctl00_ContentPlaceHolderMetadata_Allocation1_alfPublicity_3" type="checkbox" name="ctl00$ContentPlaceHolderMetadata$Allocation1$alfPublicity$3"/>
<label for="ctl00_ContentPlaceHolderMetadata_Allocation1_alfPublicity_3">Text4</label>
<input id="ctl00_ContentPlaceHolderMetadata_Allocation1_alfPublicity_4" type="checkbox" name="ctl00$ContentPlaceHolderMetadata$Allocation1$alfPublicity$4"/>
<label for="ctl00_ContentPlaceHolderMetadata_Allocation1_alfPublicity_4">Text5</label>
</span>
It looks as if the issue stems from the lack of a value attribute available on the asp.net checkbox control as described by Dave Parslow. I'm currently trying a workaround by calling a function server side to return the text of the checkbox and using that instead.
options[i].checked will return true or false.
options[i].value will give you the value attribute of the checkbox tag.
I think your problem is not with the javascript but with the code that is populating the checkboxes. Are you binding the ArrayList as the CheckBoxList data source or iterating through the ArrayList and adding new ListItems to the CheckBoxList. If the former, consider switching to the latter and make sure that you use the ListItem constructor that takes both text and value parameters. If you look at the HTML source I suspect that you will see that the generated code has the value parameter set to on for all of your checkboxes which means that the values weren't actually bound in the codebehind.
Not 100% applicable here, but be aware that if you give a checkbox a cssclass, it gets a span wrapped around it, and the class is placed on that. This causes all sorts of cross browser problems when youre navigating the dom, or disabling checkboxes
I realised after much playing about with prerender events that I didn't actually need to know the exact value of the checkbox as the arraylist values would be in the same order as the checkboxes. I searched through the arraylist to get the position of the value that I needed and then used that position on the list of checkboxes.
It sounds a bit fiddly and I don't know if it would work for everyone but I thought I would put it up here anyway incase it helps someone else someday.
Thanks for all your help.