CODEWITHSUNDEEP
javascriptcss-selectorsphantomjs
Helyx
Helyx

Reputation: 339

How to click on a simple link?

I've logged in on a Webpage using PhantomJS. Everything works fine. I printed the page and know that I am logged in. Now I want to click on a link, which is called "Analysis" and the following html code.

 <div class="navbar-subnav" data-id="Dashboard">
  <ul class="tab-list nav navbar-nav">

            <li class='active'><a href="/"><i class='icon-chart-pie'></i> Dashboard</a></li>

            <li><a href="/index/analyses"><i class='icon-search'></i> Analysis</a></li>

            <li><a href="/date_time/set_date_time"><i class='icon-cog'></i> Settings</a></li>

            <li><a href="/report/report" onclick="setTimeout(showLoading, 50);"><i class='icon-chart-area'></i> Reports</a></li>

            <li><a href="/manual/csc"><i class='icon-info-circled'></i> About</a></li>


</ul>

Usually I "click" on a element using 

document.getElementById("logInButton").click();

but there is no ID in this case. So how can I navigate to /index/analysis when I'm currently in /index?

As I had to log in I have to use the same session so a simple page.open command didn't work.

I tried 

 function(){

console.log(document.querySelector('[href="/index/analyses"]'));
    document.querySelector('[href="/index/analyses"]').click();
},

but it the log always shows 

null
'TypeError: 'null' is not an object (evaluating 'document.querySelector('[href="/index/analyses"]').click')

ama.js:52
ama.js:76 in executeRequestsStepByStep

and spams the log with it.

Upvotes: 1

Views: 3438

Answers (3)

Helyx
Helyx

Reputation: 339

Did it with a simple

function(){         
        page.open('https://localhost/index/analyses',function(status){
    });    
},

Upvotes: 1

Jeff Noel
Jeff Noel

Reputation: 7618

You could get the element thanks to its href attribute value:

document.querySelector('[href*="/index/analyses"]')

Then you can trigger a click event or anything you want with it :)

querySelector is supported since IE8 (MDN).

JSFiddle

Upvotes: 1

MrD
MrD

Reputation: 2481

If on your page there is only one <li> element with class 'active' then you can write:

document.getElementsByClassName('active')[0].children[0].click();

If you have more <li class="active"> elements inside some <ul id="elementID"> element then you can write something like:

var ul = document.getElementsById('elementID');
var li = ul.children[0];//Here 0 is index of the first child, but if you want second element you can put 1 etc.
var a = li.children[0];//Here is your <a> element 
a.click();

Update

This should work:

document.getElementsByClassName("tab-list")[0].children[1].children[0].click()

Upvotes: 1

Related Questions