Sunday, December 21, 2014

Protractor, Polymer, and Other Browsers


I am quickly warming to the idea of using Protractor for testing my Polymer elements. As of last night, I have some very nice tests.

They work well in Chrome:
$ protractor --verbose --browser=chrome
Using the selenium server at http://localhost:4444/wd/hub
[launcher] Running 1 instances of WebDriver
<x-pizza>
  has a shadow DOM - pass
  updates value when internal state changes - pass
  syncs <input> values - pass


Finished in 1.397 seconds
3 tests, 3 assertions, 0 failures

[launcher] 0 instance(s) of WebDriver still running
[launcher] chrome #1 passed
They even run well in Firefox:
$ protractor --verbose --browser=firefox
Using the selenium server at http://localhost:4444/wd/hub
[launcher] Running 1 instances of WebDriver
<x-pizza>
  has a shadow DOM - pass
  updates value when internal state changes - pass
  syncs <input> values - pass


Finished in 2.183 seconds
3 tests, 3 assertions, 0 failures

[launcher] 0 instance(s) of WebDriver still running
[launcher] firefox #1 passed
I will probably regret this, but what about Internet Explorer?

There is a nicely done post on getting Protractor working on Windows, but there are a crazy number of steps in there. I opt for the post's alternative #1 and install via Node.js. I do this in my VirtualBox VM for IE10.

I install Node the usual way then run npm install -g protractor to install it and the webdriver-manager globally:



When I try to run webdriver-manager start --seleniumPort=4410 however, I find that I do not have Java installed:



So it seems that I cannot skip all of the steps from that post. No matter, I install Java the usual way. I accept the defaults and enable any networking for which I am prompted:



With that, I have WebDriver running in my Windows VM.

Back in my Linux system that runs the actual tests, I change the configuration to point to the Windows webdriver instance:
exports.config = {
  //seleniumAddress: 'http://localhost:4444/wd/hub',
  seleniumAddress: 'http://localhost:4410/wd/hub',
  capabilities: {
    'browserName': 'internet explorer',
    'platform': 'ANY',
    'version': '10'
  },
  specs: ['tests/XPizzaSpec.js'],
  onPrepare: function() {
    require('./tests/polymerBrowser.js');
    require('./tests/xPizzaComponent.js');
  }
}
Ah, but that will not work without port forward. In the network setting of my VM, I click the port forwarding button:



In the resulting dialog, I tell VirtualBox to forward requests to my Linux box's port 4410 to the same TCP port in my Windows VM:



Even that does not quite work as my Windows VM cannot access the server that hosts my Polymer element. Bleh.

I work around this by rewriting my test to request the hostname of my Linux machine (instead of localhost):
describe('<x-pizza>', function(){
  beforeEach(function(){
    // browser.get('http://localhost:8000');
    browser.get('http://serenity.local:8000');
  });
  // Tests here...
});
That gets Protractor on my Linux box talking successfully to WebDriver on the Windows VM. I can even see it interacting with my <x-pizza> Polymer element:



But try as I might, I cannot get it to query the document for values against which to run my assertions:
$ protractor --verbose
Using the selenium server at http://localhost:4410/wd/hub
[launcher] Running 1 instances of WebDriver
A Jasmine spec timed out. Resetting the WebDriver Control Flow.
The last active task was:
WebDriver.findElements(By.cssSelector("input[type=hidden]"))
    at [object Object].webdriver.WebDriver.schedule (/home/chris/local/node-v0.10.20/lib/node_modules/protractor/node_modules/selenium-webdriver/lib/w
ebdriver/webdriver.js:345:15)
    at [object Object].webdriver.WebDriver.findElements (/home/chris/local/node-v0.10.20/lib/node_modules/protractor/node_modules/selenium-webdriver/l
ib/webdriver/webdriver.js:934:17)
...
<x-pizza>
  syncs <input> values - fail


Failures:

  1) <x-pizza> syncs <input> values
   Message:
     timeout: timed out after 30000 msec waiting for spec to complete
   Stacktrace:
     undefined

Finished in 32.849 seconds
1 test, 1 assertion, 1 failure
I cannot figure out why this is timing out. I can run assertions against some text values, but cannot get properties of elements on the page—Polymer or regular elements. While the test is timing out, I can even pop open the Developer Tools' console on IE and verify that it can query the value for which it is testing:



But, for some as yet unknown reason, I cannot get my local Protractor to successfully run this same query.

I really hate debugging code on IE so I may just punt on this. Or I could try a simpler test case to attempt to isolate the problem. Or maybe, if I am feeling industrious tomorrow, I will install all of this on a VM with IE11 instead of 10. But I'd have to be feeling pretty industrious to go through all of this again.


Day #31

No comments:

Post a Comment