更新问题:: querySelector 可能存在 PhantomJS/Javascript 问题

Question

我正在使用 PhantomJS (v1.5) 和 cli 中的 javascript 运行测试。测试在 fedora/centos 上运行。

测试说明了从 querySelector 返回 html(type) 元素时出现的错误（用户或其他错误）。

测试两个项目，第一个是输入，第二个是锚

id=ICType 的输入正常工作 锚点返回的 href/content 不是我所期望的 htmlAnchorType..

我希望能够在返回的 htmlAnchorElement 上执行一种 foo.click() 操作，然后应该为所选锚点调用 href javascript。但是，如果返回的唯一内容是 href 内容..那么这似乎是一个问题..

翻遍网络，还没想出我做错了什么。

想法/cmets????

谢谢

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

这可能有点晚了，但事实证明锚点在 phantom js 中没有 click()

编辑 这不是选择器的问题。选择器实际上工作正常 - 它确实返回元素，而不仅仅是 href。 对调用 click() 函数没有响应是规范的一部分……http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-2651361 <a> 标签在调用 click 时不会执行默认行为。

我认为选择器混淆是由于虚拟上下文中缺少对象检查器的可用性，以及 console.log(el)（其中 el 是 <a> 标记元素）实际上 “有帮助” em> 注销 href - 给人一种错误的印象，即选择器只返回了 href 字符串。

因此，虽然不支持直接调用 click() 函数，但您仍然可以触发锚点的默认 onClick 事件处理程序，详情如下 - 这被记录为在其他线程、我自己的项目中工作，并在上面的 tom 代码上进行了测试.

结束编辑

还有一些其他关于同一问题的帖子，但与其他浏览器有关，例如..How to simulate a click with JavaScript? - 解决方法是自己复制和粘贴创建事件...

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