你如何用 selenium 测试一个 reactjs web 应用程序？答案

【问题标题】：How do you test a reactjs web app with selenium?你如何用 selenium 测试一个 reactjs web 应用程序？
【发布时间】：2014-06-14 13:10:53
【问题描述】：

我有一个使用 React 的网络应用程序，我正在尝试使用 Selenium RC 创建一些测试。我发现当 Selenium 更改字段的值时，事件不会被正确触发。我知道这是一个有点典型的问题，正如WebDriver FAQ 所证明的那样，我尝试了很多不同的事情，比如使用 onFocus 而不是 onChange 并确保使用 sendKeys() vs type() 改变焦点，以编程方式调用事件，以及我可以在网上找到的任何其他建议，但我无法让它发挥作用。

作为我正在尝试做的一个简单示例，我剥离了评论框反应示例。我拥有的是一个 textarea 输入框和一个应该使用 textarea 的值更新的 div。 Selenium 可以更新 textarea，但是当它更新时 div 不会改变。

这是我的 reactjs 代码：

/** @jsx React.DOM */

var MarkdownEditor = React.createClass({
  getInitialState: function() {
    return {value: 'Original Text'};
  },
  handleChange: function() {
    this.setState({value: this.refs.textarea.getDOMNode().value});
  },
  render: function() {
    return (
      <div className="MarkdownEditor">
        <h3>Input</h3>
        <textarea
          onChange={this.handleChange}
          ref="textarea"
          defaultValue={this.state.value} />
        <h3>Output</h3>
        <div
          className="content"
          id="content2",
          dangerouslySetInnerHTML={{
            __html: this.state.value
          }}
        />
      </div>
    );
  }
});

React.renderComponent(<MarkdownEditor />, document.getElementById('content'));

这是我当前的 Selenium 测试用例：

import com.thoughtworks.selenium.*;
import org.junit.After;
import org.junit.Before;
import org.junit.Test;
import static org.junit.Assert.*;
import java.util.regex.Pattern;
import java.util.Properties;
import junit.framework.TestCase;

public class textTest extends TestCase {

    protected Selenium selenium;

    @Before
    public void setUp() throws Exception {
        Properties sysProps = System.getProperties();
        String browser = sysProps.getProperty("browser.property");
        selenium = new DefaultSelenium("localhost", 4444, "*chrome", "http://localhost/");
        selenium.start();
    }

    @After
    public void tearDown() throws Exception {
        selenium.stop();
    }

    @Test
    public void testText() throws Exception {
        selenium.open("/reactTest/index.html");
        assertEquals("Original Text", selenium.getText("id=content2"));
        selenium.focus("id=content2");
        selenium.type("css=textarea[value=\"Original Text\"]", "xxxxx");
        selenium.focus("id=content");
        selenium.runScript("$('#tatest').trigger('change')");
        assertEquals("xxxxxOriginal Text", selenium.getText("id=content2"));
        Thread.sleep(80000);
    }

}

编辑：代码现在可以在https://github.com/ilionblaze/reactTest获得

一定有办法让这个工作！

【问题讨论】：

React 调用 onChange whenever the text box value changes，不仅仅是在触发原生 onChange 事件时，因此焦点和模糊代码不应该有任何影响。我猜 React 在调用 selenium.getText 时还没有重新渲染——你试过在渲染方法中设置断点吗？
不知道这是否仍然是一个问题，但是您是否考虑过使用 Selenium WebDriver？ Selenium RC 可能有一年多没有更新了，可能更久。

标签： selenium selenium-rc reactjs

【解决方案1】：

在 React TestUtils 插件中尝试模拟：

React.addons.TestUtils.Simulate.change(document.getElementById('your-id-here'))

见http://facebook.github.io/react/docs/test-utils.html#simulate

它还要求你切换到包含插件的 React 文件：

"要获取附加组件，请使用 react-with-addons.js（及其缩小版对应）而不是常见的 react.js。” — http://facebook.github.io/react/docs/addons.html

【讨论】：

您好 MPV，您的回答为我提供了有关如何测试 react 应用程序的线索，但是当我使用带有 python 语言的机器人框架时，如何导入或加载 react Testutils Js 文件。

【解决方案2】：

import ReactTestUtils from 'react-addons-test-utils'    // ES6
var ReactTestUtils = require('react-addons-test-utils') // ES5 with npm
var ReactTestUtils = React.addons.TestUtils;            // ES5 with react-with-addons.js

将其包装在 python 库中并将其加载到 RF...
希望它会起作用。

【讨论】：