Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

protractor + cucumber + Typescript failing

  • Node Version: 4.4.5
  • Protractor Version: 3.3.0
  • Browser(s): chrome
  • Operating System and Version Win 7

I am trying to write protractor + cucumber combination in typescript. My project has a simple feature to open the page and input three fields. I am failing to run protractor. 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) and I tried to follow https://github.com/samvloeberghs/protractor-gherkin-cucumberjs-angular2.

do i need to do some extra step that protractor will compile the typescript files first? or is there anything i am missing?

like image 742
Kamran Pervaiz Avatar asked Jul 23 '16 14:07

Kamran Pervaiz


People also ask

Does cucumber support TypeScript?

cucumber-ts-starterStarter project to write and debug cucumber-js v6 features in TypeScript language.

Can we use cucumber with protractor?

Cucumber is another BDD framework that focuses more on features or stories. It mimics the format of user stories and utilizes Gherkin. Cucumber provides your team with living documentation, built right into your tests, so it is a great option for incorporating with your Protractor tests.

What is cucumber in protractor?

Cucumber enables us to write automated tests in a behavior-driven development (BDD) style. Its available vis-a-vis with Jasmine or Mocha as a test framework over Protractor API. Protractor is a wrapper over WebDriver Js to write e2e tests to interact with browser.


1 Answers

The main problem is this:

Cannot find namespace 'protractor'

You need to fix that. You either need to define protractor typings globally or

import {protractor} from 'protractor'

I don't know your tsconfig.js or system.config.js but you essentially have to enable the above to have tsc resolve protractor module.

like image 112
bhantol Avatar answered Sep 18 '22 16:09

bhantol