4.4.5
3.3.0
chrome
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?
cucumber-ts-starterStarter project to write and debug cucumber-js v6 features in TypeScript language.
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With