loading DOM mit phantomjs

Question

Meine HTML-Webseite hat Javascript, das Stylesheets dynamisch lädt und anwendet. Der gesamte Inhalt und das Rendering finden innerhalb eines div-Tags statt. Dies lädt nicht den Inhalt des div-Tags, das die ID = 'tagid' hat. Weißt du was hier falsch ist? Ich verwende jquery Funktion, um sicherzustellen, dass die Seite geladen ist. Aber es scheint, dass page.evaluate nicht einmal aufgerufen wird.

Ich schreibe Komponententests mit Phantomjs. Neu bei den Phantomjs. Beziehen Sie sich auf das Code-Snippet unten.

page.open(address, function(status){ 
    console.log('status '+status) 
    if(status=='success'){ 
     console.log('inside status if ') 
     page.includeJs("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js", function() { 
      console.log('after include js ') 
      page.evaluate(function(){ 
       console.log('inside evlaute ') 
       $(window).load(function(){ 
        console.log(document.getElementById("tagid").innerHTML) 

       }); 
      }); 

      setTimeout(function(){phantom.exit()},18000) 
     }) 
    } 
}) 

Answer 1

Sie könnten versuchen, indem Sie ein Timeout geben, bevor Sie evaluate aufrufen.

window.setTimeout(function() { 
    page.evaluate(function() { 
     console.log(document.getElementById("tagid").innerHTML) 
    }); 
}, 1000 // adjust the time here 

Um zu überprüfen, welche Inhalte in PhantomJS gerendert wird, können Sie page.content verwenden und dort überprüfen, ob Ihr „MarkierungslD“ Element tatsächlich vorhanden ist.

Answer 2

Ihr Code ist korrekt, aber der Aufruf console.log hat standardmäßig keine Wirkung, da dies im Kontext der PhantomJS-Seite geschieht.

Sie können entweder den Rückgabewert des evaluate-Aufruf wie folgt:

page.includeJs("http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js", function() { 
    console.log('after include js ') 
    var tagid = page.evaluate(function(){ 
    console.log('inside evlaute ') 
    return document.getElementById("tagid").innerHTML; 
    }); 

    console.log('Got tag ID: ' + tagId) 
    setTimeout(function(){phantom.exit()},18000) 
}) 

Oder können Sie Nachrichten angezeigt, die mit onConsoleMessage auf der Seite angemeldet sind (kompliziertere Setup):

Ein wichtiger Hinweis ist, dass PhantomJS und der Kontext der Seite sind getrennt: innerhalb evaluate Aufrufe, können Sie nicht auf Variablen von außen zugreifen.

page.onConsoleMessage = function(msg, lineNum, sourceId) { 
    console.log('PAGE CONSOLE: ' + msg + ' (from line #' + lineNum + ' in "' + sourceId + '")'); 
}; 

Tatsächlich wird unter der Haube der Rückruf, der an evaluate gegeben wird, in eine Zeichenkette umgewandelt, bevor er an die page gegeben wird. Dies ist ein sehr verwirrender Teil von PhantomJS, der berücksichtigt werden muss.