找不到變量：網頁中PhantomJS

Question

我在測試初學者，無論是在單元測試和用戶界面測試

我試圖創建一個使用下面的代碼我的登錄頁面的UI測試：

console.log("Teste de Login"); 

var page = require('webpage').create(); 
page.open('http://localhost/login', function(status) { 
    console.log("Page loadeed"); 

    if(status === "success") { 
     page.render('example1.png'); 
    } 

    page.evaluate(function() { 
     // $("#numeroUsuario").val("99734167"); 
     document.getElementById('numeroUsuario').value = "99734167"; 
     page.render('exampl2.png'); 

     // $("#formLogin").submit(); 
     page.render('example3.png'); 
    }); 

    phantom.exit(); 
}); 

但這代碼返回以下錯誤：

> phantomjs.exe ./testLogin.js 
Teste de Login 
Page loadeed 
ReferenceError: Can't find variable: page 

    phantomjs://webpage.evaluate():4 
    phantomjs://webpage.evaluate():8 

其中元素$("#numeroUsuario")存在。我做錯了什麼？

Answer 1

很確定在page.evaluate環境中，您不能引用Phantom腳本中的任何內容。

在你的情況，你實際上可以有多個評估呼叫：

console.log("Teste de Login"); 

var page = require('webpage').create(); 
page.open('http://localhost/login', function(status) { 
    console.log("Page loadeed"); 

    if(status === "success") { 
     page.render('example1.png'); 
    } 

    page.evaluate(function() { 
     // $("#numeroUsuario").val("99734167"); 
     document.getElementById('numeroUsuario').value = "99734167"; 
    }); 

    page.render('exampl2.png'); 

    page.evaluate(function() { 
     // $("#formLogin").submit(); 
    }); 

    page.render('example3.png'); 

    phantom.exit(); 
}); 

Answer 2

的documentation說下面的有關頁面上下文（重點煤礦）：

The execution is sandboxed, the web page has no access to the phantom object and it can't probe its own setting.

這意味着變量之外定義page.evaluate()回調函數的內部不可訪問。這也意味着this是指window對象。

你當然也可以拆分page.evaluate()呼叫到多個電話和移動此舉在page.evaluate()調用像Platinum Azure showed之間使用外部變量的呼叫，但如果你想從裏面調用一些PhantomJS功能這不起作用在page.evaluate()回調中的回調。

解決方法是使用window.callPhantom and page.onCallback pair。這對於異步功能非常適用：

var renderId = 0; 
page.onCallback = function(data){ 
    console.log("Callback: " + data.type); 
    if (data.type === "exit") { 
     phantom.exit(); 
    } else if (data.type === "render") { 
     page.render(data.fname || ("screenshot_" + (renderId++) + ".png")); 
    } 
}; 

page.onConsoleMessage = function(msg){ 
    console.log("remote> " + msg); 
}; 

var getUrl = "http://example.com"; 
page.open(url, function(){ 
    page.evaluate(function(getUrl){ 
     $.get(getUrl, "", function(data){ 
      console.log(JSON.stringify(data)); 
      window.callPhantom({ type: "render" }); 
      window.callPhantom({ type: "exit" }); 
     }); 
    }, getUrl); 
}); 

退出可能會干擾先前觸發的渲染操作。它肯定能夠通過一定的時間固定量如以延遲在這種情況下，出口半秒：

if (data.type === "exit") { 
    setTimeout(function(){ 
     phantom.exit(); 
    }, 500); 
} 

---

此外，它是不可能將page對象傳遞到頁上下文中，因爲只有序列化對象可以傳入：

Note: The arguments and the return value to the evaluate function must be a simple primitive object. The rule of thumb: if it can be serialized via JSON, then it is fine.

Closures, functions, DOM nodes, etc. will not work!