1
votes

I am trying to set up a sample application in Angular 2 , right now I am trying to test the e2e testing part. I have little knowledege on the Jasmine framework or the Protractor library that Angular 2 uses.

So I am not sure why I my getting this error when I run ng e2e (I am using Angular CLI)

The error I get:

[09:41:10] I/direct - Using ChromeDriver directly...
[09:41:10] I/launcher - Running 1 instances of WebDriver
[09:41:12] E/launcher - Error: TSError: ? Unable to compile TypeScript
e2e\app.e2e-spec.ts (16,4): Cannot find name 'browser'. (2304)
e2e\app.e2e-spec.ts (17,19): Cannot find name 'element'. (2304)
e2e\app.e2e-spec.ts (17,27): Cannot find name 'by'. (2304)
e2e\app.e2e-spec.ts (18,5): Supplied parameters do not match any signature of ca
ll target. (2346)

My test case (app.e2e-spec.ts)

import { WebPage } from './app.po';

describe('web App', function() {
  let page: WebPage;

  beforeEach(() => {
    page = new WebPage();
  });

  it('should display message saying app works', () => {
    page.navigateTo();
    expect(page.getParagraphText()).toEqual('Hello World');
  });

  it('Has a greeting', function () {
    browser.get('/index.html');
    var greeting = element(by.id('h2Id'));
    expect().getText(greeting).toEqual('Hello, World!');
  });


});

Protrator.config.js

// Protractor configuration file, see link for more information
// https://github.com/angular/protractor/blob/master/docs/referenceConf.js

/*global jasmine */
var SpecReporter = require('jasmine-spec-reporter');

exports.config = {
  allScriptsTimeout: 11000,
  specs: [
    './e2e/**/*.e2e-spec.ts'
  ],
  capabilities: {
    'browserName': 'chrome'
  },
  directConnect: true,
  baseUrl: 'http://localhost:4200/',
  framework: 'jasmine',
  jasmineNodeOpts: {
    showColors: true,
    defaultTimeoutInterval: 30000,
    print: function() {}
  },
  useAllAngular2AppRoots: true,
  beforeLaunch: function() {
    require('ts-node').register({
      project: 'e2e'
    });
  },
  onPrepare: function() {
    jasmine.getEnv().addReporter(new SpecReporter());
  }
};
1
import { browser, element, by } from 'protractor'; Note that usually you would have these in a page object (see e.g. app.po.ts), which abstracts the business of actually interacting with the DOM from the test and exposing a more user-friendly API making your tests more readable (e.g. app.e2e-spec.ts) - the difference between page.getGreetingText() and element(by.id('h2Id')).getText(), in your example. That's how the CLI does it. - jonrsharpe
I see ,it does seem to be working ,I assumed CLI implicitly imported the library ,thanks for your response - Snedden27
The CLI includes those imports in the auto-generated .po file, where you're expected to be interacting with the browser and specific elements, not in the .e2e-spec file where you aren't. - jonrsharpe
ok, thanks for your feed back, I maybe going off topic, but if you don't mind do you know if the default spec report on the e2e test in the cli prepares any html reports? or its just preprares the reports printed in the terminal - Snedden27
Not off the top of my head, check its docs. - jonrsharpe

1 Answers

0
votes

app.e2e-spec.ts:

expect().getText(greeting).toEqual('Hello, World!');

=>  expect(greeting.getText()).toEqual('Hello, World!');