Getting Unexpected token { at the import statement while running protractor tests from WebStorm

Question

I am using Node 6.4.1 and esversion 6.

I am trying to run protractor tests from WebStorm but I am getting the following error during run-time. The browser is getting invoked successfully but then it stops.

Error:
    [20:15:29] I/launcher - Running 1 instances of WebDriver
    [20:15:29] I/hosted - Using the selenium server at           http://localhost:4444/wd/hub
    [20:15:33] E/launcher - Error: D:\Protractor-Final\e2e-tests\spec.js:3
    import {WebDriver as browser}  from "selenium-webdriver";
       ^

SyntaxError: Unexpected token {
at new Script (vm.js:79:7)
at createScript (vm.js:251:10)
at Object.runInThisContext (vm.js:303:10)
at Module._compile (internal/modules/cjs/loader.js:657:28)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
at Module.load (internal/modules/cjs/loader.js:599:32)
at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
at Function.Module._load (internal/modules/cjs/loader.js:530:3)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (internal/modules/cjs/helpers.js:22:18)
[20:15:33] E/launcher - Process exited with error code 100

Process finished with exit code 4

Conf.js File

"use strict";
exports.config = {
  framework: 'jasmine',
  seleniumAddress: 'http://localhost:4444/wd/hub',
  specs: ['spec.js'],
  capabilities: {
  browserName: 'chrome'
  }
};

spec.js

"use strict";

import {WebDriver as browser}  from "selenium-webdriver";
import {By as by} from "selenium-webdriver";
import {beforeEach, describe, it} from "selenium-webdriver/testing";
import {element} from "protractor";


describe('Protractor Demo App', function() {
let firstNumber = element(by.model('first'));
let secondNumber = element(by.model('second'));
let goButton = element(by.id('gobutton'));
let latestResult = element(by.binding('latest'));

beforeEach(function() {
browser.get('http://juliemr.github.io/protractor-demo/');
});

it('should have a title', function() {
  expect(browser.getTitle()).toEqual('Super Calculator');
});

it('should add one and two', function() {
  firstNumber.sendKeys(1);
  secondNumber.sendKeys(2);

  goButton.click();

  expect(latestResult.getText()).toEqual('3');
 });

 it('should add four and six', function() {
  firstNumber.sendKeys(4);
  secondNumber.sendKeys(6);

  goButton.click();
  expect(latestResult.getText()).toEqual('10');
  });

 it('should read the value from an input', function() {
   firstNumber.sendKeys(1);
   expect(firstNumber.getAttribute('value')).toEqual('1');
  });
});

Answer 1

I'll admit I'm not familiar with webstorm but I see no reason why you need those imports in your spec file. Protractor should setup these variables when it starts up automatically. It's possible I've missed something but can you try removing them and seeing if your project runs then.

import {WebDriver as browser}  from "selenium-webdriver";
import {By as by} from "selenium-webdriver";
import {beforeEach, describe, it} from "selenium-webdriver/testing";
import {element} from "protractor";