Setting up CucumberJs, Protractor, and TypeScript for Ionic2/Angular2 Projects

Question

Setting up CucumberJs, Protractor, and TypeScript for Ionic2/Angular2 Projects

Having limited knowledge in TypeScript and Angular2, I've been attempting to run cucumber's features using steps written in TypeScript. However, when executing the steps.ts files, I encounter the following error message:

[launcher] Running 1 instances of WebDriver
[launcher] Error: TypeError: step.Given is not a function
    at Object.module.exports (/Users/roalcantara/Documents/Tango/tango/test/features/step_definitions/signIn.steps.ts:13:8)
    ...

It appears that the cucumber definitions were not properly compiled.

Here are my relevant configurations:

My directory structure looks like this:

/test/
|-/features/
|-xpto.feature
|--/step_definitions
|---xpto.step.ts

/package.json

{
  "name": "Tango",
  "version": "0.0.1",
  ...

/typings.json

{
  "dependencies": {},
  ...

/protractor.conf.js:

// @AngularClass
require('ts-node/register');
var helpers = require('./helpers');
...

One example of a step_definition file is:

/test/features/step_definitions/signUp.steps.ts

import cucumber = require('cucumber')
import {SignUpPage} from '../pages/signUp.page';
import {SignInPage} from '../pages/signIn.page';
...

Is there anything crucial that I might have overlooked?

typescript angular protractor ionic2 cucumberjs

Answer 1

Answer №1

The key to success was correcting the export declaration like so:

import {StepDefinition} from 'cucumber';
import {LoginPage} from '../pages/login.page';
import {HomePage} from '../pages/home.page';

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

export = function() {

  let loginPage = new LoginPage();
  let homePage = new HomePage();

  this.When(/^I navigate to login page$/, (callback:StepDefinition) => {
    loginPage.goToLoginPage();
    callback();
  });

  this.When(/^I enter 'username' as '([^"]*)'$/, (username:string, callback:StepDefinition) => {
    loginPage.enterUsername(username);
    callback();
  });

  this.When(/^I enter 'password' as '([^"]*)'$/, (password:string, callback:StepDefinition) => {
    loginPage.enterPassword(password);
    callback();
  });

  this.When(/^I click on 'Login' button$/, (callback:StepDefinition) => {
    loginPage.clickLoginButton();
    callback();
  });

  this.Then(/^I should see 'welcome message' '(.*)'$/, (message:string, callback:StepDefinition) => {
    let isDisplayed = (message === 'visible');
    expect(homePage.verifyWelcomeMessage()).to.become(isDisplayed).and.notify(callback);
  });
};

Following that adjustment, the cucumber tests executed smoothly.

Answer 2

The key to success was correcting the export declaration like so:

import {StepDefinition} from 'cucumber';
import {LoginPage} from '../pages/login.page';
import {HomePage} from '../pages/home.page';

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

export = function() {

  let loginPage = new LoginPage();
  let homePage = new HomePage();

  this.When(/^I navigate to login page$/, (callback:StepDefinition) => {
    loginPage.goToLoginPage();
    callback();
  });

  this.When(/^I enter 'username' as '([^"]*)'$/, (username:string, callback:StepDefinition) => {
    loginPage.enterUsername(username);
    callback();
  });

  this.When(/^I enter 'password' as '([^"]*)'$/, (password:string, callback:StepDefinition) => {
    loginPage.enterPassword(password);
    callback();
  });

  this.When(/^I click on 'Login' button$/, (callback:StepDefinition) => {
    loginPage.clickLoginButton();
    callback();
  });

  this.Then(/^I should see 'welcome message' '(.*)'$/, (message:string, callback:StepDefinition) => {
    let isDisplayed = (message === 'visible');
    expect(homePage.verifyWelcomeMessage()).to.become(isDisplayed).and.notify(callback);
  });
};

Following that adjustment, the cucumber tests executed smoothly.

Answer 3

Answer №2

To enhance your protractor.conf.js, consider removing the compiler option from cucumberOpts.

  cucumberOpts: {
    format: 'pretty',
    require: [
      'test/features/step_definitions/**/*.steps.ts'
    ],
    //compiler: 'ts:ts-node/register' can be removed
  },

Next, ensure your signUp.steps.ts aligns with this structure:

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

import {SignUpPage} from '../pages/signUp.page';
import {SignInPage} from '../pages/signIn.page';

import Callback = cucumber.CallbackStepDefinition;

//Start by creating a class
class SignupSteps{

  private index:SignInPage = new SignInPage();
  private page:SignUpPage = new SignUpPage();

  this.Given(/^I am not authenticated$/, (callback:Callback) => {
    index.openApp();
    callback();
  });

  this.When(/^I go to register$/, (callback:Callback) => {
    index.signUp();
    callback();
  });

  //Include steps for filling in form fields, submitting, and validating

}

//Expose the class by exporting it
export = SignupSteps;

For cleaner step definitions, you may explore https://github.com/timjroberts/cucumber-js-tsflow.

Discover a complete implementation at https://github.com/samvloeberghs/protractor-gherkin-cucumberjs-angular2.

Cheers

Answer 4

To enhance your protractor.conf.js, consider removing the compiler option from cucumberOpts.

  cucumberOpts: {
    format: 'pretty',
    require: [
      'test/features/step_definitions/**/*.steps.ts'
    ],
    //compiler: 'ts:ts-node/register' can be removed
  },

Next, ensure your signUp.steps.ts aligns with this structure:

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

import {SignUpPage} from '../pages/signUp.page';
import {SignInPage} from '../pages/signIn.page';

import Callback = cucumber.CallbackStepDefinition;

//Start by creating a class
class SignupSteps{

  private index:SignInPage = new SignInPage();
  private page:SignUpPage = new SignUpPage();

  this.Given(/^I am not authenticated$/, (callback:Callback) => {
    index.openApp();
    callback();
  });

  this.When(/^I go to register$/, (callback:Callback) => {
    index.signUp();
    callback();
  });

  //Include steps for filling in form fields, submitting, and validating

}

//Expose the class by exporting it
export = SignupSteps;

For cleaner step definitions, you may explore https://github.com/timjroberts/cucumber-js-tsflow.

Discover a complete implementation at https://github.com/samvloeberghs/protractor-gherkin-cucumberjs-angular2.

Cheers

Setting up CucumberJs, Protractor, and TypeScript for Ionic2/Angular2 Projects

Answer №1

Answer №2

Similar questions

What is the significance of utilizing an empty value `[]` for a typed array interface instead of using an empty `{}` for a typed object interface?

Exploring the power of Typescript functions within a traditional VueJS project

Concealing specific menu options for individual users within Angular 2

Why aren't the child elements in my React / Framer Motion animation staggered as expected?

When using the router to send state, it returns as undefined

Adding attributes dynamically to input elements in a React render function

Issues with toggling the menu on Angular 14 using Bootstrap 4.6

Evaluating an AngularJS application using Selenium

Checking the types for object literals returned from Array.map functions

The type 'Document<any>' cannot be assigned to type 'Pick<Pick<_LeanDocument<TicketDoc>>'

What is the method for creating pipes that filter multiple columns?

Retrieve items from the <ng-content></ng-content> within the corresponding component in the TypeScript file

What could be causing the conditional div to malfunction in Angular?

Activation of Angular SwUpdate deprecation

Access the child component within an @ChildComponent directive in Angular

How to deactivate Kendo Dropdownlist in Angular 2

Here is a guide on showcasing information obtained from ASP.NET API in Angular version 13

Using Moneris with Google Pay in Angular

Is it possible to enforce strict typing for a property within an object that is declared as type 'any'?

Is it possible for me to create an interface that is derived from a specific type?