web-dev-qa-db-ja.com

セレンを使用してreactjsWebアプリをどのようにテストしますか？

Reactを使用するWebアプリがあり、Selenium RCを使用していくつかのテストを作成しようとしています。Seleniumがフィールドの値を変更すると、イベントが適切に発生しないことがわかりました。I WebDriver FAQ で証明されているように、これはやや典型的な問題であることを知っています。onChangeの代わりにonFocusを使用したり、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 で利用できるようになりました

これを機能させる方法が必要です！

seleniumselenium-rcreactjs
7
Ilion

React TestUtilsアドオンでシミュレーションしてみてください：

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

http://facebook.github.io/react/docs/test-utils.html#simulate を参照してください

また、アドオンを含むReactファイルに切り替える必要があります：

「アドオンを入手するには、一般的なreact.jsではなくreact-with-addons.js（およびその縮小版）を使用してください。」 — http://facebook.github.io/react/docs/addons.html

3
MPV
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 ..にロードします。
うまくいけばうまくいくでしょう。

0
Sandeep