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++ - 是否可以根据模板参数的条件排除模板成员变量？

casperjs - 什么是 casperjs 中的可疑测试
运行测试时获取。 FAIL 35 tests executed in 16.806s, 35 passed, 0 failed, 2 dubious, 0 skipped. “可疑”意味着什么？如何查
casperjs - 使用 CasperJS 实现页面对象模式
是否有人已经使用 casperjs 实现了著名的“页面对象模式”，从长远来看，它对于测试的可维护性非常有用？当您必须将测试的机制和目的分开时，使用它非常非常酷。以这种方式编写测试会变得更加愉快。有
casperjs - 从 cron 运行 CasperJS
所以，我试图在我的服务器上运行 casperJS 作为 cron 作业，这是 crontab: * * * * * /usr/local/bin/casperjs /var/www/javascrip
casperjs - 你如何在 CasperJS 中禁用 css？
我知道如何禁用图像和插件，但似乎没有明显的选项来禁用 CasperJS 中的 css。有谁知道这是如何工作的？最佳答案假设您想抑制所有外部样式表的加载，您可以通过中止加载 css 文件的请求来实
casperjs - 从 Evaluate CasperJS 中发出事件
我在删除网站时从创建的 URL 下载文件时遇到问题。目前我发现了一个文件的月份和年份，然后替换了 url 中的值并尝试从该位置下载。我了解到您无法使用评估范围内的下载功能。 this.evaluate
casperjs - 如何在 casperjs 中维护 session ？
在 CasperJS 中，如何在使用 casper.thenOpen() 时保持 session 例如: var casper = require('casper').create(); casper
cookies - Casperjs 登录 : Does casperjs manage cookies?
我希望我的 casper 在 session 期间登录并保持登录状态。有可能吗？如果是这样，如何？最佳答案如果你想在 CasperJS 中存储 cookie，你可以使用 PhantomJS coo
casperjs - 使用 slimerjs 运行 casperjs 测试
我用 casperjs 编写了一些测试。他们与 phantomjs 一起运行得很好。但是，当我尝试通过以下命令使用 slimerjs 时: casperjs --verbose --engine=sl
casperjs - 使用 slimerjs 运行 casperjs 测试
我用 casperjs 编写了一些测试。他们与 phantomjs 一起运行得很好。但是，当我尝试通过以下命令使用 slimerjs 时: casperjs --verbose --engine=sl
casperjs - casperjs click()一个表单元素，用于提交，等待，在下一页上运行查询？
我想单击“提交”按钮，等待下一页加载，然后在第二页上获取html。。我先做然后再运行，但然后一步仍在首页上运行。有任何想法吗？ var casper = require('casper').creat
casperjs - CasperJS 中的 waitForPopup 总是得到 "wait timeout"
在我的页面自动化脚本中，当我单击标签链接时，将打开一个新窗口。链接的 url 是由复杂的 javascript 生成的。办理任务触发后 url 变为: https://oa.phicomm.co
phantomjs - 将 CasperJS 作为网页中包含的 Javascript 运行，并以交互方式执行 casperJS 命令
CasperJS(带有 phantomJS)可以直接在浏览器中运行而不是通过命令行运行吗？我想从浏览器运行交互式测试，我从用户那里获取输入并相应地进行。我想将 casperJS 作为在浏览器中执行的
javascript - 让 CasperJS 将图像上传到文件字段的问题 - 尝试过 CasperJS fill() 和 PhantomJS uploadFile()
我正在尝试使用 CasperJS 将图像上传到网络表单。我的表格看起来像这样: ... Campaign Banner
phantomjs - Casperjs “casper.test property is only available using the ` casperjs test`命令”，但不调用casper test
错误: casper.test property is only available using the `casperjs test` command 在我的整个代码库中搜索了“casper.tes
CasperJS 并发请求
假设我有一组网址。我不想使用 thenOpen 函数。因为它等待每个以前的 url 被加载并且它减少了加载时间。 casper.each(hrefs,function(self,href){
Casperjs 无法动态打开网址？
我正在尝试导航到从脚本本身创建的 url。此示例代码不像(我曾)预期的那样工作。不知道为什么:( var casper = require('casper').create({ viewpo
casperjs - 单击与选择器匹配的所有链接
我有一个链接列表，我必须模拟这些链接才能使用CasperJS进行点击。他们都共享同一个类(class)。但是，使用this.click('.click-me')仅单击第一个链接。单击所有链接的正确
casperjs 传递参数来评估失败
casper.then(function(){ phone_number = '7wqeqwe6'; phone_password = 'Teqweqweqw34'; }); casper.t
CasperJS 不加载页面资源
我如何告诉 casper 不要加载图像、css、js 视频等。所以我只对 DOM 元素感兴趣。最佳答案看看 CasperJS API . var casper = require('casper'
casperjs - 在Casper中设置PDF打印的纸张尺寸
在Phantom中生成PDF时，我可以这样设置纸张大小: page.paperSize = { height: '8.5in', width: '11in', orientation: '

首页

博学

6Ren·AI

商城

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