javascript - 使用 CasperJS 检查 AJAX 加载的 JS 对象/类？-6ren

javascript - 使用 CasperJS 检查 AJAX 加载的 JS 对象/类？

转载作者：行者123 更新时间：2023-11-27 22:54:58

25

4

我使用与 Checking JavaScript AJAX loaded resources with Mink/Zombie in PHP? 中相同的示例:

<强> 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页面.

简单地说，在这个页面中，当单击按钮时，JavaScript 类会分两遍加载 - 首先是一个带有 <script> 的 HTML。标签，其脚本将在第二遍中加载。 Firefox 会在控制台中打印此操作:

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变量或 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();

...但是，当我运行这个 CasperJS 脚本时，我得到的是:

$ ~/.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 对象/类，可能通过多次运行/步骤加载) - 如果可以，如何进行？

最佳答案

通过点击触发的 Ajax 请求可能没有足够的时间对您正在抓取的页面产生影响。确保使用众多 wait* 函数之一等待其完成。如果 DOM 由于 Ajax 请求而发生更改，那么我建议 waitForSelector .

一个相关问题是页面的 JavaScript 已损坏。由于填充 ptest 的 Ajax 请求是异步的，因此 ptest.changeName("Somename") 在响应到达之前执行，从而导致 TypeError。您可以将 ptest.changeName(...) 移至 Ajax 请求的 success 回调。

为了从页面查看控制台消息，您必须收听 'remote.message' event :

casper.on("remote.message", function(msg){
    this.echo("remote> " + msg);
});

casper.start(...)...

关于javascript - 使用 CasperJS 检查 AJAX 加载的 JS 对象/类？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37697645/

25

4

0

文章推荐： javascript - routerLink 带有单行 if 和子路由

文章推荐： php - 来自 html 表单输入 DOM 引用的意外输出

文章推荐： c++ - 是否可以根据模板参数的条件排除模板成员变量？

java - 对象 a = 对象 b；对象 a 会发生什么？
我的一位教授给了我们一些考试练习题，其中一个问题类似于下面(伪代码): a.setColor(blue); b.setColor(red); a = b; b.setColor(purple); b
JavaScript 测试(对象 && 对象 !== "null"&& 对象 !== "undefined")
我似乎经常使用这个测试 if( object && object !== "null" && object !== "undefined" ){ doSomething(); } 在对象上，我
C#对象/对象
C# Object/object 是值类型还是引用类型？我检查过它们可以保留引用，但是这个引用不能用于更改对象。 using System; class MyClass { public s
javascript - 通过ajax发送json - 对象 - 对象
我在通过 AJAX 发送 json 时遇到问题。 var data = [{"name": "Will", "surname": "Smith", "age": "40"},{"name": "Wil
javascript - 如何获取值[对象][对象]
当我尝试访问我的 View 中的对象 {{result}} 时(我从 Express js 服务器发送该对象)，它只显示 [object][object]有谁知道如何获取 JSON 格式的值吗？这是
java - 对象...对象[] 和格式
我有不同类型的数据(可能是字符串、整数......)。这是一个简单的例子: public static void main(String[] args) { before("one"); }
javascript - 如何修复[对象，对象]
嗨，我是 json 和 javascript 的新手。我在这个网站找到了使用json数据作为表格的方法。我很好奇为什么当我尝试使用 json 数据作为表时，我得到 [Object,Object]
JavaScript [对象][对象] 调试
已关闭。此问题需要 debugging details 。目前不接受答案。编辑问题以包含 desired behavior, a specific problem or error, and the
java - 对象==空或空==对象？
我听别人说 null == object 比 object == null check 例如: void m1(Object obj ) { if(null == obj) // Is thi
VBS教程：对象-Match 对象
Match 对象提供了对正则表达式匹配的只读属性的访问。说明 Match 对象只能通过 RegExp 对象的 Execute 方法来创建，该方法实际上返回了 Match 对象的集合。所有的
VBS教程：对象-Class 对象
Class 对象使用 Class 语句创建的对象。提供了对类的各种事件的访问。说明不允许显式地将一个变量声明为 Class 类型。在 VBScript 的上下文中，“类对象”一词指的是用
VBS教程：对象-Folder 对象
Folder 对象提供对文件夹所有属性的访问。说明以下代码举例说明如何获得 Folder 对象并查看它的属性： Function ShowDateCreated(f
VBS教程：对象-File 对象
File 对象提供对文件的所有属性的访问。说明以下代码举例说明如何获得一个 File 对象并查看它的属性： Function ShowDateCreated(fil
VBS教程：对象-Drive 对象
Drive 对象提供对磁盘驱动器或网络共享的属性的访问。说明以下代码举例说明如何使用 Drive 对象访问驱动器的属性： Function ShowFreeSpac
VBS教程：对象-FileSystemObject 对象
FileSystemObject 对象提供对计算机文件系统的访问。说明以下代码举例说明如何使用 FileSystemObject 对象返回一个 TextStream 对象，此对象可以被读
对象
我是 javascript OOP 的新手，我认为这是一个相对基本的问题，但我无法通过搜索网络找到任何帮助。我是否遗漏了什么，或者我只是以错误的方式解决了这个问题？这是我的示例代码: functio
对象
我可以很容易地创造出很多不同的对象。例如像这样: var myObject = { myFunction: function () { return ""; } };
对象
function Person(fname, lname) { this.fname = fname, this.lname = lname, this.getName = function()
javascript - JSON 返回(对象，对象)
任何人都可以向我解释为什么下面的代码给出 (object, Object) 吗？ (console.log(dope) 给出了它应该的内容，但在 JSON.stringify 和 JSON.parse
javascript - 返回 [对象，对象] 的工具提示
我正在尝试完成散点图 exercise来自免费代码营。然而，我现在只自己学习了 d3 几个小时，在遵循 lynda.com 的教程后，我一直在尝试确定如何在工具提示中显示特定数据。 This code

首页

博学

6Ren·AI

商城

javascript - 使用 CasperJS 检查 AJAX 加载的 JS 对象/类？