Karma IE Testing of Polymer Elements with WebDriver

I think I am resigned to Karma as the best solution for Polymer—especially for the testing chapters in Patterns in Polymer. My experience with WebDriver, and Protractor in particular, made this a tougher decision than I expected. In the end, the combination of WebDriver's lack of shadow DOM support (kinda important with Polymer) and conceptual overload lead me to set Protractor aside. For now.

There are two things that I will miss from Protactor: wait-for-element baked in to element finders and easy Internet Explorer testing. There is not much to be done with async testing in Karma—that is more or less up to the testing library, most of which rely on done() callbacks. Those work, but are not as nice as Protractor's promise-based finders. I can live without them—especially in the book. But crazy as it might seem, I would like to be able to test on Internet Explorer.

In Protractor, I could establish a WebDriver instance in a Windows VM that my Protractor tests could drive from my Linux box. In Karma, I think I am stuck with karma-ie-launcher. There is not a ton of documentation on that project, but I assume that I would have to install Node.js, Karma, and my code on the Windows VM in order to make that work. I much prefer the code residing entirely on my machine with only a WebDriver instance running on the Windows VM.

Enter karma-webdriver-launcher. I add it to the list of NPM package dependencies:

{
  "name": "plain_old_forms",
  "devDependencies": {
    // ....
    "karma-webdriver-launcher": "~ 1.0.1"
  }
}

And then install:

$ npm install

karma-webdriver-launcher@1.0.1 node_modules/karma-webdriver-launcher
└── wd@0.2.8 (vargs@0.1.0, async@0.2.10, q@0.9.7, underscore.string@2.3.3, archiver@0.4.10, lodash@1.3.1, request@2.21.0)

To use in my Karma configuration, I add a custom launcher for IE11:

module.exports = function(config) {
  var webdriverConfig = {
    hostname: 'localhost',
    port: 4411
  };

  config.set({
    // ...
    customLaunchers: {
      'IE11': {
        base: 'WebDriver',
        config: webdriverConfig,
        browserName: 'internet explorer',
        name: 'Karma'
      }
    },

    browsers: ['IE11']
  });
};

I already have WebDriver installed on my Windows VM via the webdriver Node.js package. I start it with:

C:\Users\IEUser>webdriver-manager start --seleniumPort=4411

(I also have port forwarding to 4411 in place)

Then I run the tests from my Linux box, or I try. Instead of successful or failing tests, I see an error:

$ karma start --single-run
INFO [karma]: Karma v0.12.28 server started at http://localhost:9876/
...
INFO [launcher]: Trying to start internet explorer via Remote WebDriver again (2/2).
WARN [launcher]: internet explorer via Remote WebDriver have not captured in 60000 ms, killing.
INFO [WebDriver]: Killed Karma test.
ERROR [launcher]: internet explorer via Remote WebDriver failed 2 times (timeout). Giving up.

On the Windows side, I see that I am unable to connect to the Karma server on port 9876:



I was unaware of this, but it is possible to set the hostname for the Karma web server in the configuration file. So I add the IP address of my Linux box:

  config.set({
    // ...
    hostname: '192.168.1.129',

    customLaunchers: {
      'IE11': {
        base: 'WebDriver',
        config: webdriverConfig,
        browserName: 'internet explorer',
        name: 'Karma'
      }
    },
    browsers: ['IE11']
  });

And that actually works:

$ karma start --single-run
INFO [karma]: Karma v0.12.28 server started at http://192.168.1.129:9876/
INFO [launcher]: Starting browser internet explorer via Remote WebDriver
INFO [IE 11.0.0 (Windows 7)]: Connected on socket JiWBPa2Dzoq-fiGXsSvi with id 96899745
IE 11.0.0 (Windows 7) <x-pizza> properties updates value when internal state changes FAILED
        TypeError: Unable to get property 'firstHalfToppings' of undefined or null reference
           at Anonymous function (/home/chris/repos/polymer-book/play/plain_forms/js/test/XPizzaSpec.js:29:7)
IE 11.0.0 (Windows 7) <x-pizza> syncing <input> values updates the input FAILED
        TypeError: Unable to get property 'firstHalfToppings' of undefined or null reference
           at Anonymous function (/home/chris/repos/polymer-book/play/plain_forms/js/test/XPizzaSpec.js:42:7)
        TypeError: Unable to get property 'value' of undefined or null reference
           at Anonymous function (/home/chris/repos/polymer-book/play/plain_forms/js/test/XPizzaSpec.js:47:7)
IE 11.0.0 (Windows 7): Executed 3 of 3 (2 FAILED) (0.415 secs / 0.409 secs)
INFO [WebDriver]: Killed Karma test.

Well, it kind of works.

The connection is made and one of the test even passes. The two failing tests seem an awful lot like WebDriver and Polymer issues that I have seen over the past two weeks. Satisfied that I can connect, I will call it a night here. I may investigate the failures tomorrow.


Day #35

‹prev | My Chain | next›