1
나는 Checking JavaScript AJAX loaded resources with Mink/Zombie in PHP?과 같은 예를 사용하고 있습니다 :AJAX를 검사하여 CasperJS로 JS 객체/클래스를로드 했습니까?
test_JSload.php 다음
<?php
if (array_key_exists("QUERY_STRING", $_SERVER)) {
if ($_SERVER["QUERY_STRING"] == "getone") {
echo "<!doctype html>
<html>
<head>
<script src='test_JSload.php?gettwo'></script>
</head>
</html>
";
exit;
}
if ($_SERVER["QUERY_STRING"] == "gettwo") {
header('Content-Type: application/javascript');
echo "
function person(firstName) {
this.firstName = firstName;
this.changeName = function (name) {
this.firstName = name;
};
}
";
exit;
}
}
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
.my_btn { background-color:yellow; }
</style>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
var thishref = window.location.href.slice(0, window.location.href.indexOf('?')+1);
var qstr = window.location.href.slice(window.location.href.indexOf('?')+1);
function OnGetdata(inbtn) {
console.log("OnGetdata; loading ?getone via AJAX call");
//~ $.ajax(thishref + "?getone", { // works
var ptest = {}; // init as empty object
console.log(" ptest pre ajax is ", ptest);
$.ajax({url: thishref + "?getone",
async: true, // still "Synchronous XMLHttpRequest on the main thread is deprecated", because we load a script; https://stackoverflow.com/q/24639335
success: function(data) {
console.log("got getone data "); //, data);
$("#dataholder").html(data);
ptest = new person("AHA");
console.log(" ptest post getone is ", ptest);
},
error: function(xhr, ajaxOptions, thrownError) {
console.log("getone error " + thishref + " : " + xhr.status + "/" + thrownError);
}
});
ptest.changeName("Somename");
console.log(" ptest post ajax is ", ptest);
}
ondocready = function() {
$("#getdatabtn").click(function(){
OnGetdata(this);
});
}
$(document).ready(ondocready);
</script>
</head>
<body>
<h1>Hello World!</h1>
<button type="button" id="getdatabtn" class="my_btn">Get Data!</button>
<div id="dataholder"></div>
</body>
</html>
, 당신은 단지 PHP> 5.4 CLI (명령 행)와 임시 서버를 실행할 수 있습니다, 같은 디렉토리에 합니다 (.php 파일의) : 마지막으로 다음
php -S localhost:8080
... 그리고, 당신은 http://127.0.0.1:8080/test_JSload.php에 페이지를 방문 할 수 있습니다.
간단히 말해서이 페이지에서 버튼을 클릭하면 자바 스크립트 클래스가 두 번의 패스로로드됩니다. 먼저 HTML에 <script> 태그가 붙어 있으며이 스크립트의 스크립트는 두 번째 패스에로드됩니다. 파이어 폭스 콘솔에서이 작업 인쇄를 위해 :
OnGetdata; loading ?getone via AJAX call test_JSload.php:13:3
ptest pre ajax is Object { } test_JSload.php:16:3
TypeError: ptest.changeName is not a function test_JSload.php:31:3
got getone data test_JSload.php:21:7
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help http://xhr.spec.whatwg.org/ jquery-1.12.4.min.js:4:26272
ptest post getone is Object { firstName: "AHA", changeName: person/this.changeName(name) } test_JSload.php:24:7
나는 궁극적으로 ptest 변수 또는 CasperJS에서 person 클래스 중 하나를 검사하고 싶습니다. 나는이 스크립트를 CasperJS 실행할 때
test_JSload_casper.js
// run with:
// ~/.nvm/versions/node/v4.0.0/lib/node_modules/casperjs/bin/casperjs test_JSload_casper.js
// based on http://code-epicenter.com/how-to-login-to-amazon-using-casperjs-working-example/
var casper = require('casper').create({
pageSettings: {
loadImages: false,//The script is much faster when this field is set to false
loadPlugins: false,
userAgent: 'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.157 Safari/537.36'
}
});
//First step is to open page
casper.start().thenOpen("http://127.0.0.1:8080/test_JSload.php", function() {
console.log("website opened");
});
//Second step is to click to the button
casper.then(function(){
this.evaluate(function(){
document.getElementById("getdatabtn").click();
});
});
//Wait for JS to execute?!, then inspect
casper.then(function(){
console.log("After login...");
console.log("AA " + JSON.stringify(person));
});
casper.run();
이 ... 그러나, 난 그냥 얻을 :
$ ~/.nvm/versions/node/v4.0.0/lib/node_modules/casperjs/bin/casperjs test_JSload_casper.js
website opened
After login...
... 아무것도 지금까지,이 스크립트를 만든 그밖에. 마지막 줄인 console.log("AA " + JSON.stringify(person));은 부분적으로 실행되지 않습니다 (즉, "AA"가 인쇄되지 않으며 오류 메시지가 표시되지 않음).
따라서 Casper JS를 사용하여 이러한 리소스 (AJAX로드 된 JS 개체/클래스, 복수 실행/단계로드 가능)를 검사 할 수 있습니까? 그렇다면 어떻게해야합니까?
많은 감사합니다 @ArtjomB. -이 이벤트 메시지 수신기를 여러 개 추가하고 실행에 대한 자세한 로그를 가져 왔습니다 (게시 된 답변 참조). 궁극적으로, 나는 또한 "질문"인 "person"클래스를 보여줄 수 있었지만,'casperjs'가 해당 리소스가로드되었다고보고하지 않는다면 여전히 가능한 방법에 대해 당황 스럽다. 또한,보고되지 않은 치명적인 오류가 발생하고있는 것 같습니다. – sdbbs