使用 Phantom/Casper 测试 React 应用程序答案

【问题标题】：Testing React Apps with Phantom/Casper使用 Phantom/Casper 测试 React 应用程序
【发布时间】：2016-02-12 01:48:56
【问题描述】：

我正在深入研究功能测试，并试图让一些简单的任务发挥作用。该应用程序是在 ReactJS 中构建的，我决定使用 Phantom/Casper。问题是即使是最基本的任务也会失败。

简而言之，有没有使用 Phantom/Casper 测试 React 应用程序的技巧？

我已经安装了 Phantom (v.2.1.1) 和 Casper (v1.1.0-beta5)。作为第一次尝试，我创建了一个简单的脚本来捕获图像：

capture.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"

【问题讨论】：

遇到了同样的问题。一个普通的网页就可以了，只是反应应用程序不加载

标签： testing reactjs phantomjs casperjs

【解决方案1】：

您需要将 babel-polyfill NPM 包添加到您的项目（或任何其他版本的 polyfill）中，然后在您的应用程序的主 index.js(x) 入口点中，在顶部包含以下行：

import 'babel-polyfill';

我们遇到了与您遇到的完全相同的问题，这为我们解决了问题。
我们曾尝试将 babel polyfill 作为 Casper 测试套件的一部分注入，但它不起作用。

【讨论】：

【解决方案2】：

不确定您是如何等待的。确保您的捕获处于等待回调中。我通常使用这样的代码，并且经常需要调整等待时间才能看到结果。

3 秒通常足以爬取公共网站，这就是我使用它的方式。

casper.then(function() {
    this.wait(3000, function() {
        this.capture('foo.jpg', undefined, 
            {
                format: 'jpg',
                quality: 75
            });
    });
});

【讨论】：