How do I click and type on element in the shadow dom using intern - shadow-dom

Question

I have a Google Polymer Project that I am trying to implement functional testing with Intern, which can be found here:
https://theintern.github.io/
The code I'm trying to test is in the Shadow DOM, as the page uses a variety of web components. The main goal of the test is to fill in a form and post the data. The structure of the code is as follows:
<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>
Where "#shadow-root" implies how the code is represented in a browser.
I have used
document.querySelector('app').document.querySelector('login-form')...etc
to access the specific elements, but cannot work out a way to click the elements, type in the fields, and click on the submit button upon completion. Is there any way to do this in Intern?

Answer 1

I think you should look at intern-examples to know how to write functional tests with Intern
For example, here is how you should write a test (open a url, find an element by id, click on an element, type something..)
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');
});
}
});
});