E2E test error - Uncaught ReferenceError: by is not defined

[dtwen]

I've been using ng-scenario and karma with Angular 1.2.6 and today I installed protractor and grunt-protractor-runner, I know I'm a little late, because I keep on getting this error in my e2e tests. My setup currently uses karma.conf.js, karma-e2e.conf.js and protractor.conf.js

I've searched SO and online with no success. Protractor documentation specifically states that (by.css('')) is a locator.

Why does the error message say it's undefined? Is Karma interfering with Protractor?

navmenu_spec.js:

'use strict';

describe("E2E: Testing Nav Menu Directive", function() {

 beforeEach(function() {
   browser().navigateTo('/');
  });

 it('should have a working nav menu directive apply it\'s logic to the page', function() {
   browser().navigateTo('#/');
   expect(browser().location().path()).toBe("/");
 });

  it('should have a working nav menu that goes to the right page when clicked', function() {
    browser().navigateTo('#/');
    element('ul li a.page1').click();
    expect(browser().location().path()).toMatch('/page1');
    browser().navigateTo('#/page2/');
    element('ul li a.page2').click();
    expect(browser().location().path()).toMatch(/page2/);
  });

  it('changes active link and applies .active class depending on route', function() {
    browser().get('/');
    var activeListItem = element(by.css('.active'));
    var linkClass = activeListItem.findElement(by.tagName('a')).getCss();
    expect(linkClass).toEqual('.page1');

    var infoLink = element(by.css('.page2'));
    infoLink.click();
    activeListItem = element(by.css('.active'));
    linkClass = activeListItem.findElement(by.tagName('a')).getCss();
   expect(linkClass).toEqual('page2');
  })
});

[mitchhentges]

Hmm, that's really weird that it says that 'by' is not defined. However, I think I might know where to start.
You see how all calls to element() in the it('changes active link and applies .active class depending on route') spec have by.<something> in them? E.g.

element(by.css('.active'))

I'm noticing that a few of the calls to element() look like they are locating by CSS, but they aren't wrapped in by.css(). For example, in the it('should have a working nav menu that goes to the right page when clicked') spec has:

element('ul li a.page1')

It should probably be

element(by.css('ul li a.page1'))

Anyways, that's probably just the best way to start.
After making these edits, can you post the updated test code and tell us where (e.g. what line) the error occurs?

[dtwen]

@mhentgesarrow Thanks for the help. I also suspected it was a JSHint config error but I was wrong after I played around with .jshintrc. Here's my updated code. Now I get this error with no line numbers:

Chrome 33.0.1750 (Mac OS X 10.9.4) E2E: Testing Nav Menu Directive changes active link and applies .active class depending on route FAILED
TypeError: Object #<Object> has no method 'get'
Chrome 33.0.1750 (Mac OS X 10.9.4) E2E: Testing Nav Menu Directive should have a working nav menu directive apply it's logic to the page FAILED
ReferenceError: by is not defined
Chrome 33.0.1750 (Mac OS X 10.9.4) E2E: Testing Nav Menu Directive should have a working nav menu that goes to the right page when clicked FAILED
ReferenceError: by is not defined
Chrome 33.0.1750 (Mac OS X 10.9.4) E2E: Testing Nav Menu Directive changes active link and applies .active class depending on route FAILED
TypeError: Object #<Object> has no method 'get'

navmenu_spec.js (UPDATED):

'use strict';

describe("E2E: Testing Nav Menu Directive", function() {

 beforeEach(function() {
   browser().navigateTo('/');
  });

 it('should have a working nav menu directive apply it\'s logic to the page', function() {
   browser().navigateTo('#/');
   expect(browser().location().path()).toBe("/");
 });

  it('should have a working nav menu that goes to the right page when clicked', function() {
    browser().navigateTo('#/');
    element((by.css('ul li a.page1')).click();
    expect(browser().location().path()).toMatch('/page1');
    browser().navigateTo('#/page2/');
    element(by.css('ul li a.page2')).click();
    expect(browser().location().path()).toMatch(/page2/);
  });

  it('changes active link and applies .active class depending on route', function() {
    browser().get('/');
    var activeListItem = element(by.css('.active'));
    var linkClass = activeListItem.findElement(by.tagName('a')).getCss();
    expect(linkClass).toEqual('.page1');

    var infoLink = element(by.css('.page2'));
    infoLink.click();
    activeListItem = element(by.css('.active'));
    linkClass = activeListItem.findElement(by.tagName('a')).getCss();
   expect(linkClass).toEqual('page2');
  })
});

[mitchhentges]

First, I'm a little distracted. On one of the lines, you have element((by.css('ul li a.page1')).click();. The by.css part doesn't need to be in double brackets. It could be element(by.css('ul li a.page1')).click(); :)

Anyway, onto more important things.
browser isn't a function. Rather, it's an object. To use its properties, simply apply the following:

browser.get('/');

So, everywhere that there is () following browser, drop them parenthesis!

Additionally, on one of your last lines, you have

linkClass = activeListItem.findElement(by.tagName('a')).getCss();

If the element that you are trying to find is a subelement of activeListItem, then you probably want

linkClass = activeListItem.element(by.tagName('a')).getCss();

(There's a second spot in your code where the mysterious findElement is used

[juliemr]

Thanks @mhentgesarrow for the initial pointers - @dtwen I'd recommend taking a look at https://github.com/angular/protractor/blob/master/docs/locators.md to learn more about the syntax for the element function.

Karma and Protractor are completely different systems - some of the syntax from ng-scenario is similar, but tests do require migration. I'm not sure how you're using both a karma configuration and a protractor configuration, but they will most certainly conflict. The tutorial is also a good place to start: https://github.com/angular/protractor/blob/master/docs/tutorial.md

[dtwen]

Thanks @mhentgesarrow .

@juliemr Therein lies the confusion between Karma and Protrator. I will go over the tutorial and docs and post my updated code afterwards. Just watched your awesome youtube video from ng-conf 2014.

[dtwen]

@juliemr I followed this SO answer to integrate Karma and Protractor with grunt.

http://stackoverflow.com/a/20414770/577977

To clarify, would you recommend completely removing karma-ng-scenario (Angular Scenario Runner) for e2e tests from grunt since Protractor replaces it?

[dtwen]

Thanks again @mhentgesarrow and @juliemr .

I added protractor to grunt and removed karma for e2e tests. Here's the successful test refactored.

navmenu_spec.js (UPDATED):

'use strict';

describe("E2E: Testing Nav Menu Directive", function() {

  beforeEach(function() {
   browser.get('http://localhost:9000/#/');
  });

it('should have a working nav menu directive apply it\'s logic to the page', function() {
   expect(browser.getCurrentUrl()).toEqual('http://localhost:9000/#/');
   expect(element(by.cssContainingText('.page1-container', 'Home')));
 });

it('should have a working nav menu that goes to the right page when clicked', function() {
     element(by.css('ul li a.page1')).click();
     expect(browser.getCurrentUrl()).toEqual('http://localhost:9000/#/page1');
     element(by.css('ul li a.page2')).click();
     expect(browser.getCurrentUrl()).toEqual('http://localhost:9000/#/page2');
 });
 it('changes active link and applies .active class depending on route', function() {
     var activeListItem = element(by.css('.active'));
     var linkClass = activeListItem.findElement(by.css('ul.navbar li a'));
     expect(linkClass.getAttribute('class').toEqual('.page1');

     var infoLink = element(by.css('.page2'));
     infoLink.click();
     expect(linkClass.getAttribute('class').toEqual('.page2');
  })
});

[mitchhentges]

Awesome, I'm glad that you got it worked out :)

[99]

I'm getting this error even with :
var username = element(by.id('username'));

test/e2e/Page.spec.js
line 15 col 22 'element' is not defined. line 15 col 30 'by' is not defined.

can someone please help