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を使用しての値を変更し、変更イベントをトリガーするためのATTEMPTです。スクリプトのステップは、「step」関数の配列に分割されます。

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 に答える