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都有例外。

chrome：InvalidElementState: invalid element state: Element must be user-editable in order to clear it
firefox：UnknownError: Element must be user-editable in order to clear it.

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

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

Answer 1

您看到的问题是因为您在错误的元素上尝试clearValue()，例如标识为td的{{1}}元素。当用户单击268435506元素时，单击处理程序将删除原始td元素并放置span元素，以便用户可以键入新值。发生这种情况时，您应该使用input来选择＆＃39;适当的元素并执行相应的操作。让我用你的初始代码来说明这一点：

find*

Answer 2

尝试设置文本字段属性＆＃34;值＆＃34;空白而不是使用clearValue（）然后键入新值

.setAttribute("value", "")

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

2 个答案: