使用Phantom/Casper测试React应用 [英] Testing React Apps with Phantom/Casper

问题描述

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

I'm diving into functional testing and attempting to get a few simple tasks working. The app is built in ReactJS and I've decided to use Phantom/Casper. The problem is that even the most basic tasks fail.

简而言之，用Phantom/Casper测试React应用程序是否有技巧?

In short, is there a trick for testing React apps with Phantom/Casper?

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

I've installed Phantom (v.2.1.1) and Casper (v1.1.0-beta5). As a first attempt I created a simple script to capture an image:

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()图像是空白屏幕.

Viewing localhost:9494 in my browser pulls up the app as it should. But the resulting capture() image is a blank screen.

我也尝试添加wait()，waitForSelector()和waitForResource()无济于事.

I've also tried adding a wait(), waitForSelector() and waitForResource() to no avail.

这是控制台中的输出:

[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)中应用程序的入口点，请在顶部包括以下行:

You need to add the babel-polyfill NPM package to your project (or any other version of the polyfill) and then in your main index.js(x) entry point for your app, include this line at the top:

import 'babel-polyfill';

我们遇到了与您所遇到的问题完全相同的问题，这已为我们解决了该问题.
我们曾尝试将babel polyfill注入作为Casper测试套件的一部分，但无法正常工作.

We were having the exact same issue you are experiencing and this fixed it for us.
We had tried injecting the babel polyfill as part of the Casper test suite, but it was not working.

这篇关于使用Phantom/Casper测试React应用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！