1

我已经为内联编辑表格字段编写了一小段代码。当用户单击时，该元素被删除并在其位置input上创建一个字段。修改完成后，该input字段将被删除并span创建一个具有新值的元素。让我展示一些背景代码。

点击前的html代码：

<div>
 <table id='mytable'>
 <thead>
...
 </thead>
 <tbody id='mybody'>
 ...
 <tr class="tr-edit even" role="row">
  <td>escape substitution</td>
  <td>TEXT</td>
  <td>4</td>
  <td id="268435506">
   <span class="td-span-edit">hola</span>
  </td>
 </tr>
 ...
 </tbody>
 </table>
</div>

点击后的html代码：

<div>
 <table id='mytable'>
 <thead>
...
 </thead>
 <tbody id='mybody'>
 ...
 <tr class="tr-edit even" role="row">
  <td>escape substitution</td>
  <td>TEXT</td>
  <td>4</td>
  <td id="268435506">
   <input class="td-input-edit" type="text" value='hola'/>
  </td>
 </tr>
 ...
 </tbody>
 </table>
</div>

当输入失焦blur、或ENTER_KEY按下时，修改后的值会发送到服务器。

另一方面，我在实习生 js 中编写了一个功能测试来模拟这种内联编辑。我的功能测试如下所示：

tdd.test('inline editing',function(){
return this.remote
 .findById('268435506')
     .then(function(param){
        return this.parent
            .moveMouseTo(param)
            ;
    })
    .click()
    .clearValue()
    .type('666')
    .executeAsync(function(done){
        promise
            .then(function(){
                done();
            });
    })
    .getVisibleText()
    .then(function(text){
        assert.strictEqual(text,
            '666',
            'typed value should be stored');
    })
 .end()
;
)};

问题是测试失败，chrome 和 firefox 都出现异常。

  1. 铬合金：InvalidElementState: invalid element state: Element must be user-editable in order to clear it
  2. 火狐：UnknownError: Element must be user-editable in order to clear it.

当发生异常并且输入字段明显集中时，我有屏幕截图。所以你应该可以编辑它。我试图.clearValue()从链中删除调用，但是正如预期的那样，断言失败了。

问题：如何测试这种内联编辑？

4

2 回答 2

1

您看到的问题是因为您尝试clearValue()使用错误的元素，例如td带有 id的元素268435506。当用户单击td元素时，单击处理程序会删除原始span元素并放置一个input元素，以便用户可以键入新值。发生这种情况时，您应该使用find*“选择”适当的元素并执行相应的操作。让我用你的初始代码来说明这一点：

tdd.test('inline editing',function(){
 return this.remote
 .findById('268435506')
    .then(function(param){
        return this.parent
            .moveMouseTo(param)
            ;
    })
    .click()
    .findByClassName('td-input-edit')
        .clearValue()
        .type('666\uE007')//enter button to end or click outside
        .executeAsync(function(done){
            promise
                .then(function(){
                    done();
                });
        })
    .end()
    .findByClassName('td-span-edit')
        .getVisibleText()
        .then(function(text){
            assert.strictEqual(text,
                '666',
                'typed value should be stored');
        })
    .end()
 .end()
    ;
)};
于 2015-11-25T13:00:16.603 回答
0

尝试将文本字段属性“值”设置为空白，而不是使用 clearValue()，然后键入新值

.setAttribute("value", "")
于 2015-11-25T12:19:27.623 回答