javascript - 更新问题::querySelector 可能出现 PhantomJS/Javascript 问题

Question

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

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

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

id=ICType 的输入工作正常 anchor 返回一个 href/content，它不是我期望的 htmlAnchorType..

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

翻遍网络，还没想出我哪里做错了。

想法/评论？？？？

谢谢

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

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

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

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

因此，虽然直接调用 click() 函数不被接受，但您仍然可以触发 anchor 的默认 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);