如何单击并利用影子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'); 
     }); 
    } 
    }); 
});