samvloeberghs/protractor-gherkin-cucumberjs-angular

An example project to setup E2E or unit tests with Jasmine or CucumberJS with Gherkin scenarios in Protractor & Angular

CucumberJS with Gherkin scenarios in Protractor & Angular2

An example project to setup CucumberJS with Gherkin scenarios in Protractor & Angular2 As a base for the project I've used the amazing starting pack: https://github.com/AngularClass/angular2-webpack-starter

Get started

# clone the repo 
git clone https://github.com/samvloeberghs/protractor-gherkin-cucumberjs-angular2.git
 
# change directory to our repo 
cd protractor-gherkin-cucumberjs-angular2
 
# install the repo with npm 
npm install
 
# start the server 
npm start 

# run the tests ( this will both run the E2E & unit tests ) 
npm run e2e

CucumberJS

Cucumber.js is a Cucumber implementation written in pure JavaScript. It runs on Node.js, IO.js, browsers and any other JavaScript platform.

More info:

• https://cucumber.io/docs/reference/javascript
• https://github.com/cucumber/cucumber-js

Gherkin scenarios

Gherkin is the language that Cucumber understands. It is a Business Readable, Domain Specific Language that lets you describe software’s behaviour without detailing how that behaviour is implemented.

Gherkin serves two purposes — documentation and automated tests. The third is a bonus feature — when it yells in red it’s talking to you, telling you what code you should write.

More info:

• https://github.com/cucumber/cucumber/wiki/Gherkin

protractor-gherkin-cucumberjs-angular's Issues

upgrade to angular final

First implement #16

update to webpack 2.2.x

Updating to webpack 2.2.x requires quite a lot of work in the webpack configs ..

update style to styleguide ng2

• remove explicit public modifiers in classes ( tests + app )
• make conform ng2 styleguide
• removed implicit voids
• removed the use of underscores for privates
• setup/update codelyzer

Unable to compile typescript

I'm getting the below error while running cucumber 'npm run e2e:cucumber'. I replicated the same setup as in your project but My application launched successfully after logged in but crashes after it start executing the first scenario step 'home.step.ts'.

[10:25:05] I/direct - Using ChromeDriver directly...
[10:25:05] I/launcher - Running 1 instances of WebDriver
[10:25:10] E/launcher - Error: TSError: ⨯ Unable to compile TypeScript
e2e/home/home.steps.ts (11,7): Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning. (12
19)
e2e/home/home.steps.ts (16,13): Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning. (1
219)
e2e/home/home.steps.ts (22,13): Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning. (1
219)
e2e/home/home.steps.ts (28,13): Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning. (1
219)
at getOutput (/node_modules/ts-node/src/index.ts:258:17)
at /node_modules/ts-node/src/index.ts:267:16
at Object.compile (/node_modules/ts-node/src/index.ts:403:17)
at loader (/node_modules/ts-node/src/index.ts:289:33)
at Object.require.extensions.(anonymous function) [as .ts] (/node_modules/ts-node/src/index.ts:306:14)
at Module.load (module.js:473:32)
at tryModuleLoad (module.js:432:12)
at Function.Module._load (module.js:424:3)
at Module.require (module.js:483:17)
at require (internal/module.js:20:19)
[10:25:10] E/launcher - Process exited with error code 100

Error with npm test: "Use of reserved word 'import'"

I cloned repo for learning purposes and after npm install I run npm test. I received the messages:

> [email protected] test C:\Temp\protractor-gherkin-cucumberjs-angular2
> node --max-old-space-size=4096 node_modules/karma/bin/karma start

root directory: C:\Temp\protractor-gherkin-cucumberjs-angular2

START:
14 02 2017 16:05:57.092:INFO [karma]: Karma v0.13.22 server started at http://localhost:9876/
14 02 2017 16:05:57.098:INFO [launcher]: Starting browser PhantomJS
14 02 2017 16:05:58.673:INFO [PhantomJS 2.1.1 (Windows 8 0.0.0)]: Connected on socket HyYyZoNiEkRQV0x3AAAA with id 85623536
PhantomJS 2.1.1 (Windows 8 0.0.0) ERROR
  SyntaxError: Use of reserved word 'import'
  at C:/Temp/protractor-gherkin-cucumberjs-angular2/config/spec-bundle.js:24592

Finished in 0.08 secs / 0 secs @ 16:05:58 GMT+0100 (Środkowoeuropejski czas stand.)

SUMMARY:
√ 0 tests completed
npm ERR! Test failed.  See above for more details.

npm version tells me this:

{ 'protractor-gherkin-cucumberjs-angular2': '1.0.0',
  npm: '3.10.10',
  ares: '1.10.1-DEV',
  http_parser: '2.7.0',
  icu: '57.1',
  modules: '48',
  node: '6.9.5',
  openssl: '1.0.2k',
  uv: '1.9.1',
  v8: '5.1.281.89',
  zlib: '1.2.8' }

I am newbie so I need help. I don't understand why those errors happen.

Update to router, remove router deprecated

Update to use ng-cli

To keep this project available for the community I decided to go trough with updating this project to use the CLI. This has the following consequences:

• the example application needs to get updated to work with the cli
• the following tasks need to be completed: #55 #48
• the configuration to have it work with saucelabs and electron needs to keep on working

@DennisJaamann @Fiontan

Update the readme to have more detailed information

Document and implement a basic way to set the timeout

see: http://stackoverflow.com/questions/34409724/cucumberjs-error-step-timed-out-after-5000-milliseconds-at-timer-listontimeou

Typings install fails

Performing an 'npm install' on a fresh copy of the project I get the following error:

typings ERR! message Unable to read typings for "jasmine". You should check the path is correct
typings ERR! caused by https://raw.githubusercontent.com/angular/DefinitelyTyped/4b36b94d5910aa8a4d20bdcd5bd1f9ae6ad18d3c/jasmine/jasmine.d.ts responded with 404, expected it to equal 200

Implement coverage for typescript files

Coverage for typescript files needs to be implemented

npm run e2e fails

I followed your instructions from Readme.md.

However, npm run e2e failed complaining about duplicate definitions of Promise in the "es6-promise" type definitions. After I had removed this entry from the tsconfig everything worked like a charm.

implement a real auth mechanism

• use jwt for authentication
• use a guard to protect some routes
• ..

Implement lifecycle interfaces everywhere (onInit, onDestroy,...)

Add unit tests for the components

The following services / validators / components / ... need to get unit tested:

First implement coverage, see :
#31

• authentication service
• email.validator
• forgotPassword.component
• login.component
• register.component
• setNewPassword.component
• app.component
• speakerRegistrationStepOne.component
• speakerRegistrationStepTwo.component
• speakerRegistrationStepThree.component

update to angular 2.4

How will it work with continious integration?

Based on in the instuctions, the app needs to be started with npm start before we can run the tests with npm run e2e. What would be the best way to get this 2 step process to work with continuous integration?

update protractor

see PatrickJS/PatrickJS-starter#1113

update to latest cucumber

Missing TypeScript type definitions for 'source-map' & 'uglify-js'

I was able to run the application with npm start but unable to complete the end-to-end tests with npm run e2e, as protractor failed with:

E/launcher - Error: TSError: ⨯ Unable to compile TypeScript
Cannot find type definition file for 'source-map'. (2688)
Cannot find type definition file for 'uglify-js'. (2688)

I was able to correct the issue with the following additions to package.json and re-rerunning npm install:

  "devDependencies": {
    "@types/source-map": "0.5.0",
    "@types/uglify-js": "2.6.28",
}

Thanks for putting this sample project out!

add the usage of yarn as alternative

consider switching definitely

update protractor to 4.0

npm install error

Hi, first of all many thanks for the demo project.

On a 'npm install' I get following error:
npm ERR! peerinvalid The package [email protected] does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants [email protected]
npm ERR! peerinvalid Peer @angular/[email protected] wants [email protected]

Debugging / SourceMap Support

Hi,

I would like to debug the steps in VS Code Chrome Debug Plugin. This doesn't work now as there is no sourcemap support in the project at this time. Would you be able to advise what needs to be changed/added to allow debugging with breakpoints within the original typescript code.

Many Thanks

Update to latest angular 4

We should update our code to angular 4

update to typescript 2

Unable to compile TypeScript

I have downloaded this project and tried to replicate the same behavior in my project which has a simple feature to open the page and input three fields. I thought to copy the stuff from this project but i am failing to run protractor stuff. its throwing me below error.

$ protractor protractor.conf.js
[13:40:55] I/hosted - Using the selenium server at http://localhost:4444/wd/hub

[13:40:55] I/launcher - Running 1 instances of WebDriver

⨯ Unable to compile TypeScript

..\e2e\features\step_definitions\factory\factory-form.page.ts (1,30): Cannot find namespace 'protractor'. (2503)
..\e2e\features\step_definitions\factory\factory-form.page.ts (2,18): Cannot find namespace 'webdriver'. (2503)
..\e2e\features\step_definitions\factory\factory-form.page.ts (14,21): Cannot find name 'element'. (2304)
..\e2e\features\step_definitions\factory\factory-form.page.ts (14,29): Cannot find name 'by'. (2304)
..\e2e\features\step_definitions\factory\factory-form.page.ts (15,44): Cannot find name 'by'. (2304)
..\e2e\features\step_definitions\factory\factory-form.page.ts (16,48): Cannot find name 'by'. (2304)
..\e2e\features\step_definitions\factory\factory-form.page.ts (17,50): Cannot find name 'by'. (2304)
..\e2e\features\step_definitions\factory\factory-form.page.ts (18,47): Cannot find name 'by'. (2304)
..\e2e\features\step_definitions\factory\factory-form.page.ts (19,32): Cannot find name 'element'. (2304)
..\e2e\features\step_definitions\factory\factory-form.page.ts (19,40): Cannot find name 'by'. (2304)
..\e2e\features\step_definitions\factory\factory-form.page.ts (36,29): Cannot find name 'by'. (2304)
..\e2e\features\step_definitions\factory\factory-form.steps.ts (1,13): Cannot find name 'require'. (2304)
..\e2e\features\step_definitions\factory\factory-form.steps.ts (1,33): Cannot find name 'require'. (2304)
..\e2e\features\step_definitions\factory\factory-form.steps.ts (4,42): Cannot find module 'cucumber-tsflow'. (2307)
..\e2e\features\step_definitions\factory\factory-form.steps.ts (5,19): Cannot find namespace 'cucumber'. (2503)
..\e2e\features\step_definitions\factory\factory-form.steps.ts (10,7): Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning. (1219)
..\e2e\features\step_definitions\factory\factory-form.steps.ts (14,13): Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning. (1219)
..\e2e\features\step_definitions\factory\factory-form.steps.ts (15,9): Cannot find name 'browser'. (2304)
..\e2e\features\step_definitions\factory\factory-form.steps.ts (15,21): Cannot find name 'browser'. (2304)
..\e2e\features\step_definitions\factory\factory-form.steps.ts (16,27): Cannot find name 'element'. (2304)
..\e2e\features\step_definitions\factory\factory-form.steps.ts (16,35): Cannot find name 'by'. (2304)
..\e2e\features\step_definitions\factory\factory-form.steps.ts (21,13): Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning. (1219)
..\e2e\features\step_definitions\factory\factory-form.steps.ts (26,13): Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning. (1219)

..\e2e\features\step_definitions\factory\factory-form.steps.ts (31,13): Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning. (1219)

[13:40:58] E/launcher - Process exited with error code 1

protractor.conf.js

require('ts-node/register');

exports.config = {
    useAllAngular2AppRoots: true,

    exclude: [],

    allScriptsTimeout: 110000,

    seleniumAddress: 'http://localhost:4444/wd/hub',
    baseUrl: "http://localhost:5001/",

    framework: 'custom',
    frameworkPath: require.resolve('protractor-cucumber-framework'),
    capabilities: {
        'browserName': 'chrome'
    },
    cucumberOpts: {
        require: ["../e2e/features/step_definitions/factory/*.steps.ts"],
        format: "pretty"
    },

    specs: ['../e2e/features/createfactory.feature'],

    onPrepare: function () {
        browser.ignoreSynchronization = true;
    }
};

factory-form.steps.ts

let chai = require('chai').use(require('chai-as-promised'));
let expect = chai.expect;

import {binding, given, when, then} from "cucumber-tsflow";
import Callback = cucumber.CallbackStepDefinition;

import {FactoryFormPageObject} from './factory-form.page';

@binding
class FactoryFormSteps {
    private factoryFormPageObject: FactoryFormPageObject = new FactoryFormPageObject();

    @given(/^I navigate to factory page$/)
    private givenUserClicksFactoryLink(callback: Callback) {
        browser.get(browser.baseUrl);
        var factoryMenu = element(by.id("factory"));
        factoryMenu.click().then(callback);
    };

    @given(/^I input mandatory fields$/)
    private givenUserInputsMandatoryFields(callback: Callback) {
        callback(null, 'pending');
    };

    @when(/^I click save button$/)
    private whenUserClicksSaveButton(callback: Callback) {
        callback(null, 'pending');
    };

    @then(/^a new factory should be created with the mandatory fields$/)
    private thenFactoryisSaved(callback: Callback) {
        callback(null, 'pending');
    };
}

factory-form.page.ts

import ElementArrayFinder = protractor.ElementArrayFinder;
import Promise = webdriver.promise.Promise;

export class FactoryFormPageObject {
    private form;
    private nameInput;
    private address1Input;
    private countryDropdown;
    private submitButton;
    private goToFactoryLink;

    constructor() {

        this.form = element(by.name('factoryForm'));
        this.nameInput = this.form.element(by.name('factoryName'));
        this.address1Input = this.form.element(by.name('address1'));
        this.countryDropdown = this.form.element(by.name('country'));
        this.submitButton = this.form.element(by.name('save'));
        this.goToFactoryLink = element(by.id('factory'));

    }

    setName(value: string): Promise<void> {
        return this.nameInput.clear().sendKeys(value);
    }

    setAddress1(value: string): Promise<void> {
        return this.address1Input.clear().sendKeys(value);
    }

    setCountry(value: string): Promise<void> {
        return this.selectDropdownbyNum(this.countryDropdown, 1);
    }

    selectDropdownbyNum(element, optionNum): Promise<void> {
        return  element.all(by.tagName('option')).get(optionNum).click();
    };

}

package.json

{
  "name": "ethos-client",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "start": "ng serve",
    "postinstall": "typings install",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "2.0.0-rc.4",
    "@angular/compiler": "2.0.0-rc.4",
    "@angular/core": "2.0.0-rc.4",
    "@angular/forms": "0.2.0",
    "@angular/http": "2.0.0-rc.4",
    "@angular/platform-browser": "2.0.0-rc.4",
    "@angular/platform-browser-dynamic": "2.0.0-rc.4",
    "@angular/router": "3.0.0-beta.1",
    "@angular/router-deprecated": "2.0.0-rc.2",
    "@angular/upgrade": "2.0.0-rc.4",
    "angular2-in-memory-web-api": "0.0.14",
    "systemjs": "0.19.27",
    "core-js": "^2.4.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",
    "bootstrap": "^3.3.6",
    "es6-shim": "0.35.1",
    "ng2-bootstrap": "^1.0.17"
  },
  "devDependencies": {
    "angular-cli": "1.0.0-beta.6",
    "chai": "^3.5.0",
    "chai-as-promised": "^5.3.0",
    "codelyzer": "0.0.20",
    "cucumber": "^1.2.1",
    "ember-cli-inject-live-reload": "1.4.0",
    "jasmine-core": "2.4.1",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "0.13.22",
    "karma-chrome-launcher": "0.2.3",
    "karma-jasmine": "0.3.8",
    "protractor": "3.3.0",
    "protractor-cucumber-framework": "^0.6.0",
    "ts-node": "0.5.5",
    "tslint": "3.11.0",
    "typescript": "^1.8.10",
    "typings": "^1.0.5"
  }
}

I have made my project using Angular-cli (https://github.com/angular/angular-cli).

do i need to do some extra step that protracor will compile the typescript files first?

cleanup project

There are some things to cleanup:

• angular2 material is not being used
• ..

example of custom locator

update to latest typescript

Update the password match validator

The password match validator should be put on the group. See talk Keri on Angular Connect

update to ng2 - rc6 when released