How to click a JS link with Selenium in C# - javascript

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']

Related

How can I get data from different pages with javascripts buttons?

I have the following HTML:
<div class="pagination pagination-centered">
<ul>
<li class="active">
<a class="page" data-page="1" href="javascript:void(0)">
1 </a>
</li>
<li >
<a class="page" data-page="2" href="javascript:void(0)">
2 </a>
</li>
<li >
<a class="page" data-page="3" href="javascript:void(0)">
3 </a>
</li>
<li >
<a class="page" data-page="4" href="javascript:void(0)">
4 </a>
</li>
<li >
<a class="page" data-page="5" href="javascript:void(0)">
5 </a>
</li>
<li >
<a class="page" data-page="6" href="javascript:void(0)">
6 </a>
</li>
<li >
<a class="page" data-page="7" href="javascript:void(0)">
7 </a>
</li>
<li >
<a class="page" data-page="8" href="javascript:void(0)">
8 </a>
</li>
<li class="threeDots">
<a class="page" data-page="..." href="javascript:void(0)">
... </a>
</li>
<li >
<a class="page" data-page="20" href="javascript:void(0)">
20 </a>
</li>
</ul>
</div>
When I click in this buttons I go to something like this www.example.com/something?page=X (x = number of the button)
I use this:
Document doc = Jsoup.connect("www.example.com/something?page=5").get();
But I get always the first page HTML.
How I can "click" or extract information about this pages? I don't know so much about PHP but I think this page use it to change pages.
Edit:
I'm not using javascript. I'm using a java project that extract information from page using html.
It seems you need to dynamically set the page URL argument. If you use jQuery you should be able to have a click event like this:
Document doc = Jsoup.connect("www.example.com/something?page=" + $(this).data('page')).get();
Only a single digit gets changed for every link, you can use for loop with a variable denoting your page number as follows:
for (int i = 1; i <= 8; i++) {
Document doc = Jsoup.connect("www.example.com/something?page=" + i).get();
/* Your code for each page*/
}

How to apply classes based on the open linked?

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');
}
});

How to make buttons to skip on first and last page in smart table for AngularJS

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

Protractor - Identifying Ui-Sref link

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'));

Issue Creating/Displaying a HTML5 Breadcrumb

I'm trying to create a breadcrumb for my web application.
I have the following navigation menu within my .JSP file:
<nav class="nav">
<ul class="wrap">
<li class="menu-nav--home"><span class="icon-home"></span></li>
<ul>
<li>Business</li>
<li>Search</li>
<li>Search Deatils</li>
<li>Change Records</li>
<li>Remove</li>
<li>Order Deatils</li>
<li>Checkout</li>
</ul>
</li>
</ul>
</nav>
..And i have attempted to create a breadcrumb using HTML5 Microdata as per below:
<div class="breadcrumb">
<div class="wrap">
<ol class="menu menu--hor">
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="/home" itemprop="url">
<span itemprop="title">Home</span>
</a>
</li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="/business" itemprop="url">
<span itemprop="title">Business</span>
</a>
</li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="/search" itemprop="url">
<span itemprop="title">Search</span>
</a>
</li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="/details" itemprop="url">
<span itemprop="title">Details</span>
</a>
</li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="/update" itemprop="url">
<span itemprop="title">Update</span>
</a>
</li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="/delete" itemprop="url">
<span itemprop="title">Delete</span>
</a>
</li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="/order" itemprop="url">
<span itemprop="title">New Order</span>
</a>
</li>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="/checkout" itemprop="url">
<span itemprop="title">Checkout</span>
</a>
</li>
</ol>
</div>
</div>
My issue is, all items on the breadcrumb are being displayed, when, i only want the current location to be displayed.
Current display:
Home Business Search Details Update Delete New Order Checkout
Preferred Display (when on Checkout page, for example)
Home > Checkout
Any help is appreciated.
Thanks
UPDATE - 24/07/13
So, after a bit of Googling, it was clear some JS was missing, here is a first attempt.
// Bread crumb script /////////////
var path = "";
var href = document.location.href;
var s = href.split("/");
for (var i=2;i<(s.length-1);i++) {
path+=""+s[i]+" / ";
}
i=s.length-1;
path+=""+s[i]+"";
var url = window.location.protocol + "//" + path;
document.writeln(url);
Which does appear to retrieve the current page/site.. however, does not place it below my Nav menu but rather in a new page that seems to crash my site.
Do it need some form of .append on a new DIV ?

Categories