updated issue:: Possible PhantomJS/Javascript Issue with querySelector

Question

I'm running a test using both PhantomJS (v1.5) and javascript from the cli. The test is running on fedora/centos.

The test illustrates what appears to be an error (user or otherwise) in returning an html(type)element from the querySelector.

Two items are tested, 1st an input, the 2nd is the anchor

The input with the id=ICType works correctly the anchor returns an href/content which isnt the htmlAnchorType that I was expecting..

I'm looking to be able to do a kind of foo.click() on the returned htmlAnchorElement which should then invoke thhe href javascript for the selected anchor. However, if the only thing that's returned is the href content.. then this appears to be an issue..

Looking over the net, haven't come up with what I've done wrong.

thoughts/comments????

thanks

running on fedora
 phantomjs  foo.js

foo.js

String.prototype.trim = function() {
    return this.replace(/^\s+|\s+$/g,"");
}

//
var page = require('webpage').create();
var searchUrl = 'https://courses.osu.edu/psc/hcosuct/EMPLOYEE/HRMS/c/COMMUNITY_ACCESS.CLASS_SEARCH.GBL';

page.onConsoleMessage = function(msg) {
    console.log(msg);
};

phantom.loadState = false;

page.onLoadFinished = function(status) { 
    console.log('called with state ' + phantom.loadState);
    if (status !== "success") {
        console.log("Unable to access network");
    } else {
        if (!phantom.loadState) {
            page.evaluate(function() {
                    var aa1;


                    /*
                        we test two items, one is an input, which succeeds, the other is the anchor, 
                    which fails

                        the querySelector should return an element htmlelement(type)..
                        for the ancho, it simply returns the href content... wth!!!
                    */

                    var sub="ICType";
                    var t1 = document.querySelector("[id^='ICType']");

                    console.log(t1);        //<<< this will be htmlelement. which is correct..
                    console.log("after ictype");

                    /*
                        the complete id for the anchor
                        var sub="CLASS_SRCH_WRK2_SSR_PB_SRCH$56$";

                        for testing, use a subset without the $.. doesn't make a difference..
                    */  
                    sub="CLASS_SRCH_WRK2_SSR_PB_SRCH";
                    t1 = document.querySelector("[id^='CLASS_SRCH_WRK2_SSR_PB_SRCH']");

                    console.log(t1);    // <<< this should be htmlelement.. but is the href content.. WHY??????
                    console.log("test complete");

                    /*
                        -- IF the test ever generates the actual/correct htmlelemtent for the anchor
                        --the goal will be to then do a foo.click() to then run/invoke the 
                        --underlying javascript for the anchor/href which is

                            <a class="SSSBUTTON_CONFIRMLINK" 
                        href="javascript:submitAction_win0(document.win0,'CLASS_SRCH_WRK2_SSR_PB_SRCH$56$');" 
                            tabindex="32" id="CLASS_SRCH_WRK2_SSR_PB_SRCH$56$" 
                        name="CLASS_SRCH_WRK2_SSR_PB_SRCH$56$">
                    */

                //window.setTimeout(function () {
                //submitAction_win0(document.win0,'CLASS_SRCH_WRK2_SSR_PB_SRCH$56$');
                //}, 2000);
            });
            phantom.loadState = true;
        } else {
            console.log(page.content);
            phantom.exit();
        }
    }
}

page.open(encodeURI(searchUrl));

Answer 1

This is probably a bit late but it turns out that the anchors dont have a click() in phantom js

EDIT This is not a problem with the selector. The selector is in fact working properly - it does return the element, not just the href. The lack of response to calling the click() function is part of the spec ... http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-2651361 <a> tags do not execute default behaviour when click is called on them.

I think the selector confusion arises from the lack of availability an object inspector in the phantom context, and the fact that a console.log(el) (where el is an <a> tag element) actually "helpfully" logs out the href - giving the false impression that only the href string was returned by the selector.

So whilst calling the click() function directly is not honoured you can still fire the anchor's default onClick event handler as detailed below - this is documented as working in other threads, my own project, and tested as working on tom's code above.

END EDIT

Theres a few other posts on the same issue but with respect to other browsers eg.. How to simulate a click with JavaScript? - and the fix is to create the event yourself copied and pasted...

var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
t1.dispatchEvent(evt);