0

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?

GeeKay
  • 13
  • 3
  • If your library uses Selenium WebDriver you should have a look at this answer: http://stackoverflow.com/questions/37384458/how-to-handle-elements-inside-shadow-root/37388179#37388179 – Supersharp Apr 04 '17 at 07:35

1 Answers1

0

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');
        });
    }
  });
});
Linh Nguyen
  • 1,120
  • 7
  • 13
  • I've already looked into doing this, but unfortunately the methods called do not find anything, as they are within the Shadow DOM. – GeeKay Apr 05 '17 at 00:10