0

这是 PhantomJS 的一个简单测试用例，用于演示在调用时执行 AJAX 调用的事件处理程序不起作用。

我在这里创建了一个简单的测试来尝试访问通过 AJAX 加载的一些内容。我很可能做错了什么，在这种情况下，我会很感激有人指出那是什么。但是，如果不是，我认为 PhantomJS 有问题。

这是一个简单的页面，其中有一个绑定了更改事件的页面。当值改变时，它会从服务器加载一些内容并替换特定 <p> 的内容

<p id="bar">foo</p> 的文本应在 ajax 调用完成并处理后更改为 'bar'。

谁能帮我吗？

<html>
<head>
    <title>AJAX test</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script>
        $(function(){
            $('#getBar').change(function() {
                $('#bar').load("/test/bar");
            });
        });
    </script>
</head>
<body>
    <h1>Foo</h1>
    <div>
        <select id="getBar">
            <option value=""></option>
            <option value="go" id="go">Get Bar Text</option>
        </select>
    </div>
    <p id="bar">foo</p>
</body>
</html>

这是我用来导航到这个简单页面的脚本，并尝试使用 jQuery 更改值并触发更改事件。脚本的步骤被分解为一组“步骤”函数：

var wp = require("webpage");
var system = require('system');
var util = require('./util-module.js'); // my logging API

var baseUrl = 'http://127.0.0.1:8080';

/* Global error handler for phantom */
phantom.onError = function(msg, trace) {
    var msgStack = ['PHANTOM ERROR: ' + msg];
    if (trace) {
        msgStack.push('TRACE:');
        trace.forEach(function(t) {
            msgStack.push(' -> ' + (t.file || t.sourceURL) + ': ' + t.line);
        });
    }
    util.log.error(msgStack.join('\n'));

    // exit phantom on error
    phantom.exit();
};

/* Inject jQuery into the phantom context */
var injected = phantom.injectJs('./jquery.min.js');
util.log.debug('phantom injected jQuery: ' + injected);

/* Create and initialize the page */
var page = wp.create();

var loadInProgress = false;
page.onLoadStarted = function() {
    loadInProgress = true;
    util.log.debug("page load started: " + page.url);
};

page.onLoadFinished = function() {
    loadInProgress = false;
    util.log.debug("page load finished: " + page.url);

    // inject jquery onto the page
    var injected = page.injectJs('./jquery.min.js');
    util.log.debug('page injected jQuery: ' + injected);
    page.evaluate(function() {
        jQuery.noConflict();
    });
};

page.onResourceRequested = function(request) {
    console.log('Request (#' + request.id + '): ' + JSON.stringify(request));
};

page.onResourceReceived = function(response) {
    console.log('Response (#' + response.id + ', stage "' + response.stage + '"): ' + JSON.stringify(response));
};

/* Redirect all console messages logged on page to debug */
page.onConsoleMessage = function(msg) {
    util.log.debug(msg);
};

var steps = [
    function() {
        util.log.debug('LOAD THE TEST PAGE');
        page.open(baseUrl + "/test/foo");
    },
    function() {
        util.log.debug('CHANGE THE SELECT');
        // see what the first result is.  change the sort.  Wait for the ajax update to complete
        // start iterating over results.
        var oldTitle = page.evaluate(function() {
            return jQuery('#bar').text();
        });
        util.log.debug('OLD TEXT: ' + oldTitle);
        page.evaluate(function(){
            jQuery('select').val('go');
            jQuery('select').trigger('change');
            jQuery('select').change();
            console.log('SELECT VALUE AFTER UDPATE: ' + jQuery('select').val());
        });
        loadInProgress = true;
        count = 0;
        var fint = setInterval(function() {
            var newTitle = page.evaluate(function() {
                return jQuery('#bar').text();
            });
            util.log.debug('NEW TEXT: ' + newTitle);
            count++;
            if (oldTitle != newTitle) {
                clearInterval(fint);
                loadInProgress = false;
            }
            if (count > 5) {
                clearInterval(fint);
                loadInProgress = false;
            }
        }, 500);

    },
    function() {
        util.log.debug('PRINT PAGE TITLE');
        page.evaluate(function(){
            console.log(document.title);
        });
    },

];

// harness that executes each step of the scraper
var testIndex = 0;
interval = setInterval(function() {
    if (!loadInProgress && typeof steps[testIndex] == "function") {
        util.log.debug("step " + (testIndex + 1));
        steps[testIndex]();
        testIndex++;
    }
    if (typeof steps[testIndex] != "function") {
        util.log.debug("test complete!");
        clearInterval(interval);
        phantom.exit();
    }
}, 500);

这是输出。我期待文本从 'foo' 变为 'bar' 但它永远不会发生

DEBUG: CHANGE THE SELECT
DEBUG: OLD TEXT: foo
DEBUG: SELECT VALUE AFTER UDPATE: go
DEBUG: NEW TEXT: foo
DEBUG: NEW TEXT: foo
DEBUG: NEW TEXT: foo
DEBUG: NEW TEXT: foo
DEBUG: NEW TEXT: foo
DEBUG: NEW TEXT: foo
DEBUG: step 5
DEBUG: PRINT PAGE TITLE
DEBUG: AJAX test
DEBUG: test complete!
4

1 回答 1

2

顺便说一句，PhantomJS 1.7。这是一个伟大的项目。

上面列出的示例的问题是我只是将 jQuery 注入到已经有 jQuery 的页面中。当我停止这样做时，它起作用了。

于 2012-12-05T02:13:41.600 回答