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

我已經寫了一小段代碼爲內聯編輯表中的字段。當用戶點擊時，該元素被刪除，並在其位置創建一個input字段。修改完成後，將input場被移除，並創建與新的值的span元件。讓我展示一些背景代碼。點擊之前如何清除Intern JS中的輸入字段？

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上都會出現異常並失敗。

鉻：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()調用，但是如期望的那樣，斷言失敗。

問題：如何測試這個行內編輯？

來源

2015-11-25 KiaMorot

你看到的問題是，因爲你試圖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-25 13:00:16 KiaMorot

嘗試設置文本字段屬性「值」爲空白，而不是使用clearValue（），然後鍵入新值

.setAttribute("value", "")

來源

2015-11-25 12:19:27

在leadfoot中沒有這樣的函數調用。至少我沒有看到它。無論如何，我發現我將很快提供答案的問題。 – KiaMorot

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

回答

相關問題