微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

你如何用selenium测试reactjs web应用程序?

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

作为我正在尝试做的一个简单示例,我删除评论框反应示例.我有一个textarea输入框和一个div应该用textarea的值更新. 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 TestUtils插件中尝试模拟:
React.addons.TestUtils.Simulate.change(document.getElementById('your-id-here'))

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

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

“To get the add-ons,use react-with-addons.js (and its minified counterpart) rather than the common react.js.” — 07001

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


Mip是什么意思以及作用有哪些
怎么测试Mip页面运行情况
MIP安装的具体步骤有哪些
HTML添加超链接、锚点的方法及作用详解(附视频)
MIP的规则有哪些
Mip轮播图组件中的重要属性讲解
Mip的内联框架组件是什么
怎么创建初始的MIP配置及模板文件
HTML实现多选框及无法提交多数据的原因分析(附视频)
HTML如何设置复选框、单选框以及默认选项?(图文+视频)