How to click on a simple link?

Question

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.

possible duplicate of [PhantomJS; click an element](http://stackoverflow.com/questions/15739263/phantomjs-click-an-element) — Jeff Noel, Aug 25 '15 at 13:44
You said that the element exists, but then the error wouldn't be there. Please show a complete and minimal example of your PhantomJS script. [Guessing](https://blog.stackexchange.com/2012/02/lets-play-the-guessing-game/) is not the right way to go about solving this. — Artjom B., Aug 25 '15 at 15:24
acutally it does exist as you can see in the source code. but know it works. i answered on this thread. thanks — Helyx, Aug 25 '15 at 15:51

Jeff Noel · Answer 1 · 2015-08-25T15:17:04.830

1

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

edited Aug 25 '15 at 15:17

answered Aug 25 '15 at 13:46

Jeff Noel

7,500
4
40
66

function(){ console.log('Clicking link'); document.querySelector('[href="/index/analyses"]').click(); } gives me the error TypeError: 'null' is not an object (evaluating 'document.querySelector('[href="/index/analyses"]').click') ama.js:51 ama.js:75 in executeRequestsStepByStep – Helyx Aug 25 '15 at 13:53
@Helyx At this point you might want to debug and `console.log()` different values (like the content of the querySelector function, to ensure it gets the element correctly). – Jeff Noel Aug 25 '15 at 13:57
Hmm it doest get the correct value indeed. console.log(document.querySelector('[href="/index/analyses"]')); always returns null. Just checked the link again and it seems to be correct – Helyx Aug 25 '15 at 14:01
@Helyx Have you verified that the element exists on the page with either a screenshot or by printing the page source? If it's not there, have you tried waiting for it? – Artjom B. Aug 25 '15 at 14:18
@ArtjomB. Yes, i added some more html code to my orginal post – Helyx Aug 25 '15 at 14:23
@ArtjomB. You are right, it might be a more appropriate query in this case. Updated the answer. Helyx, are the elements added to the page dynamically? The script might be running before the element is actually within the page. – Jeff Noel Aug 25 '15 at 15:16

MrD · Answer 2 · 2015-08-25T14:34:58.530

1

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()

edited Aug 25 '15 at 14:34

answered Aug 25 '15 at 14:25

MrD

2,423
3
33
57

what would the elementID be in my case? (see source code above) the href? – Helyx Aug 25 '15 at 14:30
See update. Update will work if this
– MrD Aug 25 '15 at 14:37
Also, if there is Jquery available on the website (and I assume it is), you can use jquery in Phantom evaluate function, which is 100 times easier. – MrD Aug 25 '15 at 14:37
now i'm getting TypeError: 'undefined' is not an object (evaluating 'document.getElementsByClassName("tab-list")[0].children') I've never worked with Jquery, so for me it is not easy. – Helyx Aug 25 '15 at 14:41
Just copy and paste the whole html document here pls. – MrD Aug 26 '15 at 08:00

score 1 · Accepted Answer · answered Aug 25 '15 at 15:39

1

Did it with a simple

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

answered Aug 25 '15 at 15:39

Helyx

329
1
5
17

He is trying to do this dinamically. What if the links generates some parameter like ?parameterA=hello, then this will not work! – MrD Aug 26 '15 at 08:01

How to click on a simple link?

3 Answers3

Update