Getting Started with Protractor (But Not Really)

So Protractor: do I need it? Well, since it has been announced as the official end-to-end testing framework for AngularJS, I probably need it. But do I need it for Polymer and will it prove useful for Patterns in Polymer?

I think today I will explore that by using Protractor to test last night's Angular + Polymer + SVG application:



I start by installing Protractor with npm:

$ npm install -g protractor
...
/home/chris/local/node-v0.10.20/bin/protractor -> /home/chris/local/node-v0.10.20/lib/node_modules/protractor/bin/protractor
/home/chris/local/node-v0.10.20/bin/webdriver-manager -> /home/chris/local/node-v0.10.20/lib/node_modules/protractor/bin/webdriver-manager
protractor@0.17.0 /home/chris/local/node-v0.10.20/lib/node_modules/protractor
├── saucelabs@0.1.1
├── minijasminenode@0.2.7
├── adm-zip@0.4.3
├── optimist@0.6.0 (wordwrap@0.0.2, minimist@0.0.5)
├── glob@3.2.8 (inherits@2.0.1, minimatch@0.2.14)
└── selenium-webdriver@2.39.0

Protractor does not seem to come with slick setup and configuration initializers just yet, but it does have example config that I can copy from the installation directory:

$ mkdir protractor
$ cp /home/chris/local/node-v0.10.20/lib/node_modules/protractor/example/* protractor/

I am going to test with the Chrome driver tonight, so I download:

$ wget http://chromedriver.storage.googleapis.com/2.8/chromedriver_linux64.zip

And install it:

$ unzip chromedriver_linux64.zip
$ mv chromedriver protractor/

With that, I can run the example Protractor test:

$ protractor protractor/chromeOnlyConf.js                                     
Using ChromeDriver directly...
...

Finished in 10.63 seconds
3 tests, 5 assertions, 0 failures

To test my own application, I start a protractor/conf.js for my current angular application:

exports.config = {
  chromeOnly: true,
  chromeDriver: 'chromedriver',
  capabilities: {
    'browserName': 'chrome'
  },
  specs: ['pizza_spec.js'],
  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30000
  }
};

But that is about as far as I get. I try what I think is a simple test to click on the <a> tag to get to the next page in my app where I can verify that that <x-pizza> tag is present:

describe('pizza store', function() {
  beforeEach(function() {
    browser.get('http://localhost:8000');
  });

  describe('pizza builder', function() {
    beforeEach(function() {
      var finder = by.id('mk-custom');
      var el = element(finder);
      el.click();
    });

    it('should have an <x-pizza> Polymer', function() {
      var el = by.css('x-pizza');
      expect(browser.isElementPresent(el)).toBe(true);
    });
  });
});

Bu no matter what I try, I get stale element errors:

protractor protractor/conf.js
Using ChromeDriver directly...
F

Failures:  

  1) pizza store pizza builder should have an <x-pizza> Polymer
   Message:
     StaleElementReferenceError: stale element reference: element is not attached to the page document
  (Session info: chrome=34.0.1797.2)
  (Driver info: chromedriver=2.8.240825,platform=Linux 3.5.0-18-generic x86_64)
   Stacktrace:
     StaleElementReferenceError: stale element reference: element is not attached to the page document
  (Session info: chrome=34.0.1797.2)
  (Driver info: chromedriver=2.8.240825,platform=Linux 3.5.0-18-generic x86_64)
==== async task ====
WebElement.click()
    at element.(anonymous function) [as click] (/home/chris/local/node-v0.10.20/lib/node_modules/protractor/lib/protractor.js:440:32)
    at /home/chris/local/node-v0.10.20/lib/node_modules/protractor/lib/protractor.js:89:34

I suspect this has something to do with my use of partials—especially on the start page, but I'll be darned if I can figure out how to convince Protractor that there really is a clickable link tag.

Bother. I may try this again tomorrow, but I cannot afford too much time. There are many more Polymer things to research before I am done.


Day #1,006

‹prev | My Chain | next›