我正在深入进行功能测试,并试图让一些简单的任务正常运行。该应用程序是用 ReactJS 构建的,我决定使用 Phantom/Casper。问题是即使是最基本的任务也会失败。
简而言之,是否有使用 Phantom/Casper 测试 React 应用程序的技巧?
我已经安装了 Phantom (v.2.1.1) 和 Casper (v1.1.0-beta5)。作为第一次尝试,我创建了一个简单的脚本来捕获图像:
捕获.js
var casper = require('casper').create({
viewportSize: {
width: 1024,
height: 768
},
verbose: true,
logLevel: "debug"
});
casper.start('http://localhost:9494', function() {
console.log("page loaded");
});
casper.then(function() {
this.capture('img.png');
});
});
casper.run();
然后运行脚本:
> casperjs capture.js
在我的浏览器中查看 localhost:9494
可以正常启动应用程序。但是生成的 capture()
图像是一个空白屏幕。
我也试过添加 wait()
、waitForSelector()
和 waitForResource()
但无济于事。
这是控制台的输出:
[info] [phantom] Starting...
[info] [phantom] Running suite: 2 steps
[debug] [phantom] opening url: http://localhost:9494/, HTTP GET
[debug] [phantom] Navigation requested: url=http://localhost:9494/, type=Other, willNavigate=true, isMainFrame=true
[debug] [phantom] url changed to "http://localhost:9494/"
[debug] [phantom] Successfully injected Casper client-side utilities
[info] [phantom] Step anonymous 2/2 http://localhost:9494/ (HTTP 200) page loaded
[debug] [phantom] Capturing page to /path/to/img.png
[info] [phantom] Capture saved to /path/to/img.png
[info] [phantom] Step anonymous 2/2: done in 848ms.
[info] [phantom] Done 2 steps in 848ms
[debug] [phantom] Navigation requested: url=about:blank, type=Other, willNavigate=true, isMainFrame=true
[debug] [phantom] url changed to "about:blank"
最佳答案
您需要将 babel-polyfill NPM 包添加到您的项目(或任何其他版本的 polyfill),然后在您的应用程序的主要 index.js(x) 入口点中,在顶部包含此行:
import 'babel-polyfill';
我们遇到了与您遇到的问题完全相同的问题,这为我们解决了。
我们曾尝试将 babel polyfill 作为 Casper 测试套件的一部分注入(inject),但它没有用。
关于使用 Phantom/Casper 测试 React 应用程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35353482/