如何清除 Intern JS 中的输入字段？

Question

我已经为内联编辑表格字段编写了一小段代码。当用户单击时，该元素将被删除，并在其位置上创建一个 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.

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

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

Answer 1

您看到的问题是因为您尝试在错误的元素上 clearValue()，例如id 为268435506 的td 元素。当用户单击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()
    ;
)};

Answer 2

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

.setAttribute("value", "")