Question

我试图用Zombie.js编写单元测试。我的问题是AJAX请求在使用browser.evaluate启动时没有完成，即使它们在包含在带有脚本标记的页面上时执行正常。

我有三个文件：

index.html：僵尸加载的HTML页面
hello.txt：包含内容hello, world
main.js：一个加载index.html

index.html和hello.txt使用命令python -m SimpleHTTPServer 8009投放。（请注意，我使用dev.local，这是我的主机文件中127.0.0.1的同义词）

这是index.html。它发出一个AJAX请求来检索hello.txt。这很好用：

<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8' />
    <title></title>
</head>
<body>
  <script type='text/javascript' src='https://code.jquery.com/jquery-2.2.0.min.js'>
  </script>
  <script type='text/javascript'>
    $.support.cors = true;
    var doRequest = function(msg) {
      $.support.cors = true;
      return $.ajax({
        url: "http://dev.local:8009/hello.txt",
        success: function(v) { console.log("success ", msg, v); }
      });
    };
  </script>
  <script type="text/javascript">
    console.log("page loaded");                                                                                                                                                    
    doRequest('script');
  </script>
</body>
</html>

此处main.js。它导航到index.html并尝试评估doRequest函数，该函数应该导致AJAX请求。但是，请求永远不会完成，而是超时。

var Browser = require("zombie");
const browser = new Browser({debug: true});
const rootURL = "http://dev.local:8009/"

browser.visit(rootURL, function(err) {                                                                                                                                             
  browser.evaluate('console.log("browser.evaluate ✔");');
  browser.evaluate('doRequest("zombie");');
});

以下是运行DEBUG=zombie node ./main.js的日志：

  zombie Opened window http://dev.local:8009/  +0ms
  zombie GET http://dev.local:8009/ => 200 +38ms
  zombie Loaded document http://dev.local:8009/ +36ms
  zombie GET https://code.jquery.com/jquery-2.2.0.min.js => 200 +55ms
page loaded
  zombie XHR readystatechange http://dev.local:8009/hello.txt +64ms
  zombie XHR loadstart http://dev.local:8009/hello.txt +1ms
  zombie GET http://dev.local:8009/hello.txt => 200 +9ms
  zombie XHR readystatechange http://dev.local:8009/hello.txt +1ms
  zombie XHR readystatechange http://dev.local:8009/hello.txt +0ms
  zombie XHR readystatechange http://dev.local:8009/hello.txt +1ms
  zombie XHR progress http://dev.local:8009/hello.txt +0ms
success  script hello, world

  zombie XHR load http://dev.local:8009/hello.txt +2ms
  zombie XHR loadend http://dev.local:8009/hello.txt +0ms
  zombie Fired setTimeout after 0ms delay +1ms
  zombie Event loop is empty +0ms
browser.evaluate ✔
  zombie XHR readystatechange http://dev.local:8009/hello.txt +4ms
  zombie XHR loadstart http://dev.local:8009/hello.txt +0ms
  zombie GET http://dev.local:8009/hello.txt => 200 +6ms

奇怪的是，zombie似乎已经完成了请求：日志的最后一行显示收到了HTTP 200响应，但事件从未提供给处理程序。

为什么僵尸发起的请求没有正确完成？

Answer 1

我和zombie.js有同样的问题，所以我查看了源代码，发现了以下几行：

// -- Event processing --

// Grabs next event from the queue, processes it and notifies all listeners.
// Keeps processing until the queue is empty or all listeners are gone. You
// only need to bootstrap this when you suspect it's not recursing.
//... more lines ...
// Is there anybody out there?
if (this.waiting === 0)
    return;

因此，如果没有人等待，则不会触发任何事件，您需要添加browser.wait()

browser.visit(rootURL, function(err) {                                                                                                                                             
    browser.evaluate('console.log("browser.evaluate ✔");');
    browser.evaluate('doRequest("zombie");');
    browser.wait();
});

Answer 2

以上答案正确。使用wait，您可以获取被废止的数据。通过创建一个将浏览器作为参数的函数来适应的另一个示例：

async function getAjaxedData(url, browser) {
    return browser.visit(url).wait().then(() => {
        // Do stuff
        // e.g. browswer.queryAll(selector)
    });
}

zombie.js触发的AJAX请求无法完成

2 个答案: