如何使用selenium测试Reactjs Web应用程序?

我有一个使用React的网络应用程序,我正在尝试使用Selenium

RC创建一些测试。我发现,当Selenium更改字段的值时,不会正确触发事件。我知道这是一个典型的问题,正如WebDriver常见问题所证明的那样,我已经尝试了很多不同的事情,例如使用onFocus而不是onChange并使用sendKeys()和type()确保焦点进出,以编程方式调用该事件以及我可以在网上找到的任何其他建议,但是我无法使其正常运行。

作为我要尝试做的一个简单示例,我删除了注释框的react示例。我所拥有的是一个textarea输入框和一个div,应该使用textarea的值进行更新。Selenium可以更新文本区域,但是当它完成时,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文件:

“要获取附加组件,请使用react-with-addons.js(及其最小化的对应文件),而不要使用常见的react.js。” —

http://facebook.github.io/react/docs/addons.html

以上是 如何使用selenium测试Reactjs Web应用程序? 的全部内容, 来源链接: utcz.com/qa/428267.html

回到顶部