如何單擊並利用影子DOM鍵入元素實習生

Question

我有我試圖實現與實習生功能測試，可以在這裏找到谷歌聚合物項目：

https://theintern.github.io/

我試圖測試的代碼是在Shadow DOM中，因爲頁面使用了各種Web組件。測試的主要目標是填寫表格併發布數據。代碼的結構如下：

<app> 
#shadow-root 
    <login-form> 
    #shadow-root 
    <card> 
    #shadow-root 
     <paper-input> 
     #shadow-root 
     <iron-input> 
      email 
     </iron-input> 
     </paper-input> 
     <paper-input> 
     #shadow-root 
     <iron-input> 
      password 
     </iron-input> 
     </paper-input> 
     <paper-button> 
      submit 
     </paper-button> 
    </card> 
    </login-form> 
</app> 

其中「＃shadow-root」暗示代碼在瀏覽器中的表示方式。

我用

document.querySelector('app').document.querySelector('login-form')...etc 

訪問特定的元素，但不能制定出一個辦法來點擊字段中的元素，類型，然後單擊完成時提交按鈕。實習生有沒有辦法做到這一點？

Answer 1

我想你應該看看intern-examples知道如何編寫一個帶實習生

例如功能測試，here是你應該怎麼寫測試（打開一個URL，找到ID的元素，點擊一個元素鍵入東西..）

define([ 
    'intern!object', 
    'intern/chai!assert', 
    'require' 
], function (registerSuite, assert, require) { 
    var url = '../../index.html'; 

    registerSuite({ 
    name: 'Todo (functional)', 

    'submit form': function() { 
     return this.remote 
     .get(require.toUrl(url)) 
     .findById('new-todo') 
     .click() 
     .pressKeys('Task 1') 
     .pressKeys('\n') 
     .pressKeys('Task 2') 
     .pressKeys('\n') 
     .pressKeys('Task 3') 
     .getProperty('value') 
     .then(function (val) { 
      assert.ok(val.indexOf('Task 3') > -1, 'Task 3 should remain in the new todo'); 
     }); 
    } 
    }); 
});