I am trying to identify the links on the following html by the following. I have installed linkUiSref by using npm. But i am still getting object has no method linkUisref. Please advise.
element(by.linkUiSref(element(by.css('#monitoring-tab > ul > li:nth-child(2) > a'))))
<nav id="monitoring-tab" class="pure-menu pure-menu-open pure-menu-horizontal ng-scope">
<ul>
<li ui-sref-active="pure-menu-selected" ng-hide="hideTab.now" class="pure-menu-selected">
<a ui-sref="app.monitoring.real-time" href="#/monitoring/real-time">
Now
</a>
</li>
<li ui-sref-active="pure-menu-selected" class="">
<a ui-sref="app.monitoring.historical.day" href="#/monitoring/historical/day">
Day</a>
</li>
<li ui-sref-active="pure-menu-selected" class="">
<a ui-sref="app.monitoring.historical.month" href="#/monitoring/historical/month">
Month</a>
</li>
<li ui-sref-active="pure-menu-selected" class="">
<a ui-sref="app.monitoring.historical.year" href="#/monitoring/historical/year">
Year</a>
</li>
<li ui-sref-active="pure-menu-selected" class="">
<a ui-sref="app.monitoring.historical.lifetime" href="#/monitoring/historical/lifetime">
Lifetime</a>
</li>
</ul>
</nav>
Usage:
by.linkUiSref(toState, [parentElement]).
toState is a String that represents a ui-router state.
You're passing an ElementFinder instead of a String ... so do:
$('#monitoring-tab').element(by.linkUiSref('app.monitoring.historical.month'));
Can also do:
$('#monitoring-tab').element(by.linkText('Month'));
Related
I am new to Selenium and trying to build a project with it. I need to learn how to click a JS link. There are many items listed by pages. Pagination is done by JS, unfortunately. here is an example...
<ul class="pagination museo-700">
<li class="first hidden disabled">
First
</li>
<li class="prev disabled">
<a class="arrow" href="#">
<img src="/areas/site/Content/images/page/pagination-prev-arrow.png">
</a>
</li>
<li class="page active">
1
</li>
<li class="page">
2
</li>
<li class="page">
3
</li>
<li class="page">
4
</li>
<li class="page">
5
</li>
<li class="next">
<a class="arrow" href="#">
<img src="/areas/site/Content/images/page/pagination-next-arrow.png">
</a>
</li>
<li class="last hidden">
Last
</li>
</ul>
I would like to click pages 1., 2., 3. ,4. and 5. pages above. Please give me a clue
You could first locate the pager with a CSS selector and then each link by link text:
driver.FindElement(By.CssSelector("ul.pagination"))
.FindElement(By.LinkText("1")).Click();
You could also use an XPath:
driver.FindElement(By.XPath("//a[#href='#'][text()='1']")).Click();
code not tested but I feel like they should work
.page > a:contains("1")
.page > a:contains("2")
.page > a:contains("3")
.page > a:contains("4")
.page > a:contains("5")
or
//li[contains(#class, 'page')]/a[text()='1']
My sidebar menu has the ability to expand and reveal the subsections of a section as shown below. The open section has the open active class and the clicked link has the active class.
All of my links has a different #url.So this will determine the classes.
How can I automatically place the open active and active classes based on the opened link? I can also use PHP.
<ul class="menu-items scroll-content">
<li class="open active">
<a href="javascript:;"><span class="title">first section</span>
<span class="open arrow"></span></a>
<span class="icon-thumbnail">LV</span>
<ul class="sub-menu">
<li class="active">
First Section 1
<span class="icon-thumbnail">au</span>
</li>
<li class="">
First Section 2
<span class="icon-thumbnail">ou</span>
</li>
</ul>
</li>
<li class="">
<a href="javascript:;"><span class="title">Second section</span>
<span class="arrow"></span></a>
<span class="icon-thumbnail">LV</span>
<ul class="sub-menu">
<li class="">
Second Section 1
<span class="icon-thumbnail">au</span>
</li>
</ul>
</li>
</ul>
Try like this:
HTML:
<ul>
<li class="">
<a href="javascript:;"><span class="title">first section</span>
<ul class="sub-menu">
<li class="">
First Section 1
<span class="icon-thumbnail">au</span>
</li>
<li class="">
First Section 2
<span class="icon-thumbnail">ou</span>
</li>
</ul>
</li>
<li class="">
<a href="javascript:;"><span class="title">Second section</span>
<ul class="sub-menu">
<li class="">
Second Section 1
<span class="icon-thumbnail">au</span>
</li>
</ul>
</li>
</ul>
JS:
var href = location.pathname+location.hash;
$('.sub-menu > li > a').each(function() {
if ($(this).attr("href") == href) {
$(this).parent('li').addClass('active');
$(this).parent().parent().parent('li').addClass('open active');
}
});
I am using smart table for angularJS, how can I add buttons to jump on first and last page?
There are already quite few github issues talking about the matter, you should simply specify your custom template:
By overriding the template in the $templateCache
Or by specifying a custom url for your template.
Template could be
<div class="pagination" ng-if="pages.length >= 2">
<ul class="pagination">
<li ng-if="currentPage > 1">
<a ng-click="selectPage(1)"><<</a>
</li>
<li ng-if="currentPage > 1">
<a ng-click="selectPage(currentPage-1)"><</a>
</li>
<li ng-repeat="page in pages" ng-class="{active: page==currentPage}"><a ng-click="selectPage(page)">{{page}}</a>
</li>
<li ng-if="currentPage < numPages">
<a ng-click="selectPage(currentPage+1)">></a>
</li>
<li ng-if="currentPage < numPages">
<a ng-click="selectPage(numPages)">>></a>
</li>
</ul>
</div>
running example
I am trying to write a function that will combine two children ul#level_2and append them to their parent li#level_1 within a dropdown #navigation.
I currently have the following which does the job, but it means I have to manually target each category. I'm sure there is a far shorter way to produce the same results with very little code.
$('li#furniture ul.level_2').children('li').appendTo('li#furniture ul.level_2:first');
$('li#furniture ul.level_2').children('li').not(':first').remove();
Here is a shortened version of my current html structure & below is the desired result:
Simple Current HTML
<div id="navigation">
<ul id="level_1">
<li class="level_1">
<div class="subnav_wrapper">
<ul class="level_2">
<li class="level_2">
Link A
</li>
</ul>
<ul class="level_2">
<li class="level_2">
Link B
</li>
</ul>
</div>
</li>
</ul>
</div>
Desire HTML
<div id="navigation">
<ul id="level_1">
<li class="level_1">
<ul class="level_2">
<li class="level_2">
Link A
</li>
<li class="level_2">
Link B
</li>
</ul>
</li>
</ul>
</div>
Full Detailed HTML
<div id="navigation">
<ul id="level_1">
<li class="level_1 furniture">
Furniture
<div class="subnav_wrapper">
<ul class="level_2">
<li class="level_2 sofa">
Sofa
</li>
</ul>
<ul class="level_2">
<li class="level_2 bed">
Bed
</li>
</ul>
</div>
</li>
<li class="level_1 bathroom">
Bathroom
<div class="subnav_wrapper">
<ul class="level_2">
<li class="level_2 shower">
<a href="#">Shower/a>
</li>
</ul>
<ul class="level_2">
<li class="level_2 bath">
Bath
</li>
</ul>
</div>
</li>
</ul>
</div>
This should do what you need.
var wrapper = $(".subnav_wrapper").contents();
$(".subnav_wrapper").replaceWith(wrapper );
$('ul.level_2').children('li').appendTo('ul.level_2:first');
$('ul.level_2').not(':first').remove();
JSFIDDLE DEMO
I am a very new to Backbone.js just started to learn it. I am implementing backbone in my existing web page. I have created an html div which displays the contents fetched from the xml file. Normally it works fine, but when i started to display it using backbone's template and view , it does not show any data on my page.Note that, have written a jQuery code to read data from xml file and display it in html div.So please help me to sole my problem. Up till now i have done following things:
This is my html present in 'index.html':
<!-- start Cloud section-->
<center>
<section id="clouds">
<div class="container" style="margin-top:0px;">
<div class="row">
<div class="col-lg-12 "style="background:white">
<div id="side">
<div class="tags">
</div><!--/tags-->
</div><!--/side-->
</div><!--/col-lg-12-->
</div><!--/row-->
</div><!--/container-->
</section><!--/Cloudtags-->
</center>
<!--------- end of cloud tags ----------->
(note that i have added all backbone dependancies in my file i.e.jQuery.js,Backbone.js and unerscore.js)
Following is the template in the same file,in which content should load:
<script type="text/template" id="cloudtag_tempalte">
<center>
<ul class="cld" ">
<li > <a class="tag1" id="t1" href="https://www.google.com" target="_blank"></a> </li>
<li > <a class="tag2" id="t2" href="#"></a> </li>
<li > <a class="tag3" id="t3" href="#"></a> </li>
<li > <a class="tag2" id="t4" href="#"></a> </li>
<li > <a class="tag4" id="t5" href="#"></a> </li>
<li > <a class="tag1" id="t6" href="#"></a> </li>
<li > <a class="tag1" id="t7" href="#"></a> </li>
<li > <a class="tag5"id="t8" href="#"></a> </li>
<li > <a class="tag2"id="t9" href="#"></a></li>
<li > <a class="tag1"id="t10" href="#"></a></li>
<li > <a class="tag3"id="t11" href="#"></a></li>
<li > <a class="tag4"id="t12" href="#"> </a></li>
<li > <a class="tag1"id="t13" href="#"></a></li>
<li > <a class="tag5"id="t14" href="#"></a></li>
<li > <a class="tag1"id="t15" href="#"></a></li>
<li > <a class="tag2"id="t16" href="#"></a></li>
<li > <a class="tag1"id="t17" href="https://www.google.com"></a></li>
<li > <a class="tag2" id="t18" href="#"></a></li>
<li > <a class="tag3"id="t19" href="#"></a></li>
<li > <a class="tag2"id="t20" href="#"></a></li>
<li > <a class="tag4"id="t21" href="#"></a></li>
<li > <a class="tag1"id="t22" href="#"></a></li>
<li > <a class="tag1"id="t23" href="#"></a></li>
<li > <a class="tag5"id="t24" href="#"></a></li>
<li > <a class="tag2"id="t25" href="#"></a></li>
<li > <a class="tag1"id="t26" href="#"></a></li>
<li > <a class="tag5"id="t27" href="#"></a></li>
<li > <a class="tag3"id="t28" href="#"> </a></li>
<li > <a class="tag1"id="t29" href="#"></a></li>
<li > <a class="tag3"id="t30" href="#"></a></li>
<li > <a class="tag1"id="t31" href="#"></a></li>
<li > <a class="tag4"id="t32" href="#"></a></li>
<li > <a class="tag1"id="t33" href="#"></a></li>
<li > <a class="tag5"id="t34" href="#"></a></li>
<li > <a class="tag2"id="t35" href="#"></a></li>
</ul><!--/cld-->
</center>
</script>
Following is the code of Backbone in the same index.html file:
<script type="text/javascript">
var cld_view=Backbone.View.extend({
initialize: function(){
},
render: function(){
// Compile the template using underscore
var template = _.template( $("#cloudtag_tempalte").html(), {} );
// Load the compiled HTML into the Backbone "el"
this.$el.html( template );
alert("in render of cldview");
}
});
var cloudtag=new cld_view({el:$(".tags")});
cloudtag.render();
</script>
You need to wrap your backbone code in document.ready() function.
When you pass an el to a view, that element needs to be in the DOM. Without document.ready() your code is executing before the DOM is loaded, and so there is no .tags element when you call the following line:
var cloudtag=new cld_view({el:$(".tags")});
Here is some working code:
<script type="text/javascript">
// Run this code with the DOM is loaded
$(function() {
var cld_view=Backbone.View.extend({
render: function(){
console.log("in render of cldview");
var template = _.template( $("#cloudtag_tempalte").html(), {} );
this.$el.html( template );
return this;
}
});
var cloudtag=new cld_view({el:'.tags'});
cloudtag.render();
});
Some other changes:
1) You can pass the el as {el:'.tags'} instead of {el:$(".tags")}.
2) I added return this to the render call. This allows you to chain calls with
render like cloudtag.render().el
3) I added text to your <a> tags, You won't see them displayed if you don't have any text there.
Here is working demo with the changes.