I am very new to Selenium and I am asking your kind advice.
I have the following html:
<div class="order">
<a style="float: left;" href="#137674" class="voidCmn ui-button ui-corner-all ui-widget" role="button">Void</a>
<a style="float: left;" href="printcmn.php?Id=137674" target="_blank" class="ui-button ui-corner-all ui-widget" role="button"> Print </a>
<a style="float: left;" href="section_a.php?cmnId=137674&origin=viewreferral.php" class="ui-button ui-corner-all ui-widget" role="button"> Edit </a>
</div>
In that scenario I would like to use cssSelector and not an xpath.
My code to find web element button Edit (see above):
Driver.findElement(By.cssSelector("a.ui-button.ui-corner-all.ui-widget[role='button'][href^='viewreferral.php']"));
However, I am getting an error:
no such element: Unable to locate element: {"method":"css selector","selector":"a.ui-button.ui-corner-all.ui-widget[role='button'][href^='viewreferral.php']"}
Could you kindly review and tell me what is wrong.
Please use below given css Selector, It should work :
a.ui-button.ui-corner-all.ui-widget[role='button'][href*='viewreferral.php']
You have used wrong operator to check contains. You used : ^ But it should be *
Related
<div class="form-group col-sm-5">
#Html.LabelFor(m => m.foo)
<a data-toggle="popover" data-content="I'm a popover!" href="#"> <span class="glyphicon glyphicon-info-sign"></span></a>
</div>
The <a> element (i.e. the glyphicon popover) appears beneath the label element, but I'd like to have it placed to the right side of the label instead. Is there a way to accomplish this by way of nesting the <a> inside of the #Html.LabelFor? It'd be cool to have something like:
<label for="foo"> I'm the label!
<a data-toggle="popover" data-content="I'm a popover!" href="#"> <span class="glyphicon glyphicon-info-sign"></span></a>
</label>
If not, will I have to use positioning instead?
EDIT: I ended up taking Ramo's advice and rolling with something simple.
<div class="form-group col-sm-5">
<label>
<span> I'm a **hard-coded** LabelFor DataAnnotation! </span>
<a data-toggle="popover" data-content="I'm a popover!" href="#">
<span class="glyphicon glyphicon-info-sign"></span>
</a>
</label>
</div>
Still interested if there's an MVC way to get Glyphicons to cohere with #Html.LabelFor, but my question is more or less academic at this point.
EDIT #2: I found an even easier solution which is kind of obvious in hindsight. This approach uses positioning (i.e. display: inline) to ensure that the accompanying <a> and <span> elements display on the same line.
<div class="col-sm-5 form-group">
#Html.LabelFor(m => m.foo, new { style = "display: inline;" })
<a data-toggle="popover" data-content="I'm a popover!" href="#"> <span class="glyphicon glyphicon-info-sign"></span></a>
</div>
You could use a table and do something like this
<table>
<tr>
<td>#Html.LabelFor(m => m.foo)</td>
<td><a data-toggle="popover" data-content="I'm a popover!" href="#"> <span class="glyphicon glyphicon-info-sign"></span></a></td>
</tr>
</table>
EDIT:
A quick google search brought me to this result which uses CSS to accomplish your goal Label and text box on the same line using css
EDIT 2:
Since you are weary of using tables you might be able to do something like this. I have not tested the code yet, but I do believe it should give you your desired behavior.
HTML:
<div>
<div class="Label">#Html.LabelFor(m => m.foo)</div>
<a data-toggle="popover" data-content="I'm a popover!" href="#"> <span class="glyphicon glyphicon-info-sign"></span></a>
</div>
CSS:
.Label{
display: inline-block;
}
I suggest you go ahead with positioning. Do not take unusual choices here use everything for what is supposed to be used because otherwise you will notice unusual behavior of your code in future.
Try this:
#{
var foo = Html.LabelFor(m => m.foo)
}
<a>#foo</a>
I have the below HTML. I want to fix the position of the "View All" anchor tag at a particular position. Instead the anchor tag moves as the value in the dropdown changes (i.e according to the length of the changed value in dropdown).
<div class="row " style="margin-left:75pt;">
<div class="dropdown" style="width:300px;display:inline;">
<label class="text-center" id ="categories" style="margin-top:10pt;font-size:14pt;"> Deals on</label>
<button data-toggle="dropdown" class=" btn dropdown-toggle dropdown-menu-hover-color text-center" style="padding:0px 0px;background-color:white;" href="#"><label style="font-size:14pt; color: #191970;" >{{currentCategory}}</label> <b class="caret"></b></button>
<ul class="dropdown-menu submenu-hover-color dropdown-menu-scroll" style="margin:0;">
<li>
{{page.category_name}}
</li>
</ul>
</div>
<div style="display:inline;" ng-show="deals"> View All</div>
<div style="display:inline;" ng-hide="deals"> <label class="text-center" style="margin-top:10pt;font-size:12pt;color: #909090;;">No deals found, please select a different category. </label></div>
</div>
Any pointers on how to achieve this.
Thanks in advance.
try using following html:
<div style="display:inline; position: fixed; top: 100px;" ng-show="deals"> View All</div>
Set the 'top' value as per your need. I think it should help you.
I'm getting pretty rusty in html/css and I introduced a problem in my web application when I created a new control on the left side.
<div id="leftnav">
<ul><li class="saveAndExit"><a class="noflag" href="" onclick="">Save and Exit</a></li></ul>
<span id=""><ul><div><li><a id="" class="noflag" href="btn0','')" onclick="javascript:keepDirtyFlag();undefined">Introduction</a></li></div><div><li><a id="" class="noflag" href="" onclick="">Applicant Details</a></li></div><div><li><a id="" class="noflag" href=")" onclick="javascript:keepDirtyFlag();undefined">Applicant Details</a></li></div><div><li><a id="" class="noflag" href="" onclick="j">Applicant details – Trust</a></li></div><div><li><a id="" class="noflag" href="" onclick="javascript:keepDirtyFlag();undefined">Applicant contact person – Trust</a></li></div><div><li><a id="" class="noflag" href="" onclick="">Applicant Trustees</a><a onclick="" class="noflag arrow"></a><ul style="display:none"><li><a id="" class="noflag" href="" onclick="javascript:keepDirtyFlag();undefined">Record 1</a></li><li><a id="" class="noflag" href="" onclick="">Record 2</a></li></ul></li></div><div><li><a id="" class="noflag" href="" onclick="">Eligibility Details</a></li></div><div><li><a id="" class="noflag" href="" onclick="">Eligibility Details</a></li></div><div><li><a id="" class="noflag" href="" onclick="">Review</a></li></div></ul></span>
</div>
The problem is, that I have a fieldset with fields inside with the following template
<div class="field-container"><div class="field-label"><label for="_Name_txt" id="mCtrl0_Name_txt_fieldLabel" accesskey="M">Na<u>m</u>e<span class="field-asterisk"><acronym title="Required">*</acronym></span></label><em></em></div><div class="field-control"><div class="field-wrapper-passive"><input name="ormCtrl0$Name_txt" type="text" id="mCtrl0_Name_txt" dtext="" class="field-text-idle"></div><div class="field-error-passive"><span id="mCtrl0_ctl06" style="color:Red;display:none;">A name is required</span><span id="mCtrl0_ctl07" style="color:Red;display:none;">The Name must not exceed 200 characters</span></div></div><div class="field-clear"></div></div>
Which were displayed correctly since the I added the new leftnav control but now, the "field-clear" class
.field-clear {
clear: left;
line-height: 1px;
font-size: 1px;
height: 1px;
}
clears the navigation list on the left side and creates a huge gap between the first field and the other fields inside my form. How can I solve this?
EDIT : JSFIDDLE http://jsfiddle.net/vS8jt/2/embedded/result/
This was resolved by floating the main container and then adding a new div that clears it at the bottom of the page.
I've a problem with anchor tags :/
I've got the following code:
<div name="divA">
<a name="A"> A</a>
</div>
<div name="divB" style="display: none;">
<a name="B"> B</a>
</div>
<div name="divHrefB">
B
</div>
My goal is that when i click on B (divHrefB) the application go to "divB" but since this element hidden it doesn't work.
Please note, that i don't want to show divB (i want a link to the place where div are... is that possible?
At this point, i'm thinking on generate dynamically the href value (in this case, i would generate the following div)
<div name="divHrefB">
B
</div>
Thanks a lot.
just don't apply display: none, just add this css for the hidden div.
<div name="divHrefB" style="height: 0px;width: 0px;overflow:hidden;">
B
</div>
You're missing the ending closing " comment.
try this guy:
style="display: none;"
you are missing " in style end
<div name="divA">
<a name="A"> A</a>
</div>
<div name="divB" style="display: none;">
<a name="B"> B</a>
</div>
<div name="divHrefB">
B
</div>
I'm using Primefaces 3.2 with Tomcat 7.0.23 and JSF 2.0
i'm using the component.
<p:carousel id="aCarousel" value="#{BBCarousel.carouselItems}" var="carouselItem"
autoPlayInterval="3000"
rows="4" vertical="true" circular="true" pageLinks="0" headerText="Informations" >
<div class="thumbnail">
<img src="images/minilogo.png" />
</div>
<div class="info">
#{carouselItem.item_title}
<span class="cat">Category: #{carouselItem.item_cat}</span>
</div>
</p:carousel>
When the carousel reaches the last carousel item, the carousel slides to (move up) the first element.. instead, i would like that the last item to be attached to the first item, in a "circular way", without a break.. so i get a continuous scrolling effect..
I hope I have been clear..
thanks!
Looking at Firebug I see that the carousel is mostly a div and a hidden input that have coordinate values.
<div id="slideShow" class="ui-carousel ui-widget ui-widget-content ui-corner-all" style="width: 404px;">
<div class="ui-carousel-header ui-widget-header ui-corner-all">
<div class="ui-carousel-viewport" style="width: 404px; height: 253px;">
<ul style="left: -808px;">
<li class="ui-carousel-item ui-widget-content ui-corner-all photo">
<img id="slideShow:j_idt15" alt="" src="/showcase/images/nature1.jpg;jsessionid=A181FD9A4E1990E40E09B3743EB2EE61">
</li>
<li class="ui-carousel-item ui-widget-content ui-corner-all photo">
<li class="ui-carousel-item ui-widget-content ui-corner-all photo">
<li class="ui-carousel-item ui-widget-content ui-corner-all photo">
</ul>
</div>
<input id="slideShow_first" type="hidden" value="2" name="slideShow_first">
</div>
These values are changing at the autoPlayInterval which looks like a jQuery script is being invoked to move the image and perform an effect while doing so.
I don't see anything in the Primefaces documentation that suggest the unwanted autoplay effect can be changed. I don't think this is possible without modifying the Primefaces code.