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

Question

我已经编写了一小段用于内联编辑 table 字段的代码。当用户单击时，该元素将被删除，并在其位置创建一个 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 时，修改后的值被发送到服务器。

另一方面，我在 intern 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
火狐：UnknownError: Element must be user-editable in order to clear it.

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

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

Answer 1

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

.setAttribute("value", "")

Answer 2

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

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()
    ;
)};

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

How do I clear input field in Intern JS?

selenium

intern

leadfoot