Cannot read property ‘platform’ of undefined

Problem resolution with Visual Review and Protractor

For some time I was not working with Protractor integrated with Visual Review, because of this, when I returned to integrate both tools, I got the following error when running my tests, after the needed configuration for it:

Cannot read property 'platform' of undefined

I searched in the internet for the exact error and I found nothing related to it, so, after finding the solution, I decided to post it here, to help anyone else with the same issue.

First of all, I searched in all my project for such platform, and I found nothing.

Then, I decided to take a look at the VisualReview-protractor node module. There, into the visualreview-protractor.js file I found such platform.

My first approach, after finding the platform was to verify the return of capabilities.

console.log(capabilities);

And it returned the following:

Capabilities {
  'acceptSslCerts' => true,
  'applicationCacheEnabled' => false,
  'browserConnectionEnabled' => false,
  'browserName' => 'chrome',
  'chrome' => { chromedriverVersion: '2.21.371459 (36d3d07f660ff2bc1bf28a75d1cdabed0983e7c4)',
  userDataDir: '/var/folders/dx/nv38lwrs4xjdb8tnqzpfz0840000gn/T/.org.chromium.Chromium.VUtHtc' },
  'cssSelectorsEnabled' => true,
  'databaseEnabled' => false,
  'handlesAlerts' => true,
  'hasTouchScreen' => false,
  'javascriptEnabled' => true,
  'locationContextEnabled' => true,
  'mobileEmulationEnabled' => false,
  'nativeEvents' => true,
  'platform' => 'Mac OS X',
  'rotatable' => false,
  'takesHeapSnapshot' => true,
  'takesScreenshot' => true,
  'version' => '51.0.2704.79',
  'webStorageEnabled' => true
}

The platform was there, but not with the capabilities.caps_.platform structure, but with capabilities.platform structure.

Then it was time to take a look at the tool's documentation, that was showing me the following:

With that was easy to understand what was missing.

I just changed the Protractor configuration file from:

const VisualReview = require('visualreview-protractor');
var vr = new VisualReview({
  hostname: 'localhost',
  port: 7000
});

To:

const VisualReview = require('visualreview-protractor');
var vr = new VisualReview({
  hostname: 'localhost',
  port: 7000,
  propertiesFn: function (capabilities) {
    return {
      'os': capabilities.platform,
      'browser': capabilities.browserName,
      'version': capabilities.version
    };
  }
});

With that all my e2e tests returned to work, integrated with Visual Review.

Obs.: This issue was perceived in an environment with the following configurations:

Chrome Version 51.0.2704.79 (64-bit)
Protractor Version 3.3.0
Visual Review v0.1.3
Visual review-protractor "^0.2.0"

And you, have you had some nice experience integrating Protractor and Visual Review? Let me know.

Got interested? Take a look here and see what I've already wrote about the subject, and here is a hands-on video showing how it works.

Take a look at this post in Portuguese on my WordPress blog.