phantomjs和requirejs

文件main.js中的代码是这样的：

phantom.injectJs("libs/require-1.0.7.js");
      require.config(
        {
          baseUrl: "" 
        }
      );
      require([],function(){});

当我在命令行中运行“phantomjs main.js”时,requirejs在main.js中运行不正常.我知道如何在浏览器中运行的页面中使用requirejs(包括phantomjs的方式：page.open(url,callback)),但不像上面那样.我尝试使用像main.js这样的requirejs,我觉得这是一个很受欢迎的问题.谢谢！

解决方法

我只是挣扎了一段时间.我的解决方案并不干净,但它确实有效,而且由于来自phantomjs的未完成的api文档,我很满意.

罗嗦的解释

你需要三个文件.一个是你的amd phantomjs测试文件,我称之为“amd.js”.第二个是你要加载的html页面,我将其命名为“amd.html”.最后我称之为“amdTestModule.js”的浏览器测试.

在amd.html中,按正常方式声明脚本标记：

<script data-main="amdTestModule.js" src="require.js"></script>

在你的phantomjs测试文件中,这就是hacky的地方.创建页面,然后加载’fs’模块.这允许您打开相对文件路径.

var page = require('webpage').create();
var fs = require('fs');

page.open('file://' + fs.absolute('tests/amd.html'));

现在因为requirejs异步加载文件,我们不能只是将回调传递给page.open并期望事情顺利进行.我们需要一些方法来
1)在浏览器中测试我们的模块,并将结果传回我们的phantomjs上下文.要么
2)告诉我们的phantomjs上下文,在加载所有资源时,运行测试.

对我来说,#1更简单.我通过以下方式完成了

page.onConsoleMessage = function(msg) {
    msg = msg.split('=');
    if (msg[1] === 'success') {
        console.log('amd test successful');
    } else {
        console.log('amd test Failed');
    }
    phantom.exit();
};

**请参阅下面的完整代码以获取我的console.log消息.

现在phantomjs显然有一个内置的事件api但它没有记录.我还成功地从他们的page.onResourceReceived和page.onResourceRequested获取请求/响应消息 – 这意味着您可以在加载所有必需模块时进行调试.然而,为了传达我的测试结果,我只使用了console.log.

现在如果从未运行console.log消息会发生什么？我能想到解决这个问题的唯一方法就是使用setTimeout

setTimeout(function() {
    console.log('amd test Failed - timeout');
    phantom.exit();
},500);

应该这样做！

完整代码

目录结构

/projectRoot  
  /tests  
    - amd.js  
    - amdTestModule.js  
    - amd.html  
    - require.js (which I symlinked)  
    - <dependencies> (also symlinked)

amd.js

'use strict';
var page = require('webpage').create();
var fs = require('fs');

/*
page.onResourceRequested = function(req) {
    console.log('\n');
    console.log('REQUEST');
    console.log(JSON.stringify(req,null,4));
    console.log('\n');
};
page.onResourceReceived = function(response) {
    console.log('\n');
    console.log('RESPONSE');
    console.log('Response (#' + response.id + ',stage "' + response.stage + '"): ' + JSON.stringify(response,4));
    console.log('\n');
};
*/

page.onConsoleMessage = function(msg) {
    msg = msg.split('=');
    if (msg[1] === 'success') {
        console.log('amd test successful');
    } else {
        console.log('amd test Failed');
    }
    phantom.exit();
};

page.open('file://' + fs.absolute('tests/amd.html'));

setTimeout(function() {
    console.log('amd test Failed - timeout');
    phantom.exit();
},500);

amd.html

<!DOCTYPE html>
<html>

<head>
    <Meta charset="UTF-8">
</head>

<body>
    <script data-main='amdTestModule.js' src='require.js'></script>
</body>

</html>

amdTestModule.js

require([<dependencies>],function(<dependencies>) {
    ...
    console.log(
        (<test>) ? "test=success" : "test=Failed"
    );
});

安慰

$phantomjs tests/amd.js
amd test successful

解决方法

相关推荐