1

I am new to Protractor+Cucumber+Typescript and created a sample framework using Page Object Design and small script to perform some click actions. URL: http://www.way2automation.com/angularjs-protractor/banking/#/login

I am trying to click on "Customer Login" button but it does not interact with the element and cucumber still shows test passed.

I tried with async/await to handle promises but no luck. Protractor Version: 5.4.2 TypeScript Version: 3.3.4000 Node Version: v10.15.3 NPM version: 6.4.1

Feature File:
Feature: To login into XYZ bank

@OutlineScenario
Scenario: Login as Customer

Given I am on XYZ Bank home page
Then I click Customer Login
Then I select Name of Customer
Then I click Login

Page Object:

    import { element, by } from "protractor";
    import { Select } from "../utilities/selectClass";
  export class loginPage {

        //elements

        customerLoginButton = element(by.cssContainingText('.btn btn-primary btn-lg', 'Customer Login'));
        loginButton = element(by.className('btn btn-default'));
        yourNameDropDown = element(by.model('custId'));
        bankManagerLoginButton = element(by.xpath("//button[contains(text(),'Bank Manager Login')]"));
        homeButton = element(by.className('btn home'));

        //function to click on Customer Login
        customerLogin() {
            this.customerLoginButton.click();
        }

        //function to select on Name from Dropdown
        selectName() {
            const select: Select = new Select(this.yourNameDropDown);
            select.selectByVisibleText("Harry Potter");
        }

        //function to click on Login
        clickLogin() {
            this.loginButton.click();
        }

        //function to click on Bank Manager Login
        bankManagerLogin() {
            this.bankManagerLoginButton.click();
        }

        clickHome() {
            this.homeButton.click();
        }
    }

StepDefinition:

import {loginPage} from "../pages/loginPage";
import {addCustomer} from "../pages/addCustomer";
import { browser } from "protractor";
import { Then, Given } from "cucumber";
const chai = require("chai").use(require("chai-as-promised"));
const expect = chai.expect;
const login: loginPage = new loginPage();
const addcustomer: addCustomer = new addCustomer();

Given('I am on XYZ Bank home page', function() {
    expect(browser.getTitle()).to.eventually.equal("Protractor practice website - Banking App");
   });

Then(/^I click Customer Login$/, function() {
   login.customerLogin();
  });

  Then('I select Name of Customer', function() {
   login.selectName();
 });

 Then('I click Login', function () {
   login.clickLogin();
 });

config.ts

import { browser, Config } from "protractor";
import { Reporter } from "../utilities/reporter";
const jsonReports = process.cwd() + "/reports/json";

export const config: Config = {
    seleniumAddress: "http://127.0.0.1:4444/wd/hub",

    SELENIUM_PROMISE_MANAGER: false,

    baseUrl: "http://www.way2automation.com/angularjs-protractor/banking/#/login",

    capabilities: {
        browserName: "chrome",
    },

    framework: "custom",
    frameworkPath: require.resolve("protractor-cucumber-framework"),

    specs: [
        "../../features/*.feature",
    ],

    onPrepare: () => {
        browser.ignoreSynchronization = true;
        browser.manage().window().maximize();
        Reporter.createDirectory(jsonReports);
    },

    cucumberOpts: {
        compiler: "ts:ts-node/register",
        format: "json:./reports/json/cucumber_report.json",
        require: ["../../typeScript/stepdefinitions/*.js", "../../typeScript/utilities/*.js"],
        strict: true,
        tags: "@CucumberScenario or @ProtractorScenario or @TypeScriptScenario or @OutlineScenario",
    },

    onComplete: () => {
        Reporter.createHTMLReport();
    },
}
3
  • Please share your protractor conf.js
    – yong
    Apr 19, 2019 at 23:50
  • added config.ts file Apr 20, 2019 at 4:49
  • you turn off Control Flow in conf.js via SELENIUM_PROMISE_MANAGER: false,, please read this page: github.com/angular/protractor/blob/master/docs/async-await.md , then decide to use Control Flow or async/await. No matter you choose which one, each function in StepDefinition should return a promise-like object, thus you should add return for each function in StepDefinition.
    – yong
    Apr 20, 2019 at 11:53

2 Answers 2

0

If you're using webdriver's Control Flow (i.e. NOT async/await), you have to return the last line of every step, including expects that use eventually. For example, login.customerLogin() is returning a promise that never gets resolved, you have to use return login.customerLogin() so Cucumber can resolve it for you.

FWIW, we've found that switching to async/await instead of control flow has taken a lot of the pain out of writing tests in protractor. I can't count how many times we've forgot to return a single step or a single assertion and has false positives or weird errors.

1
  • could you please elaborate with some examples, how to use with/without async/wait. Apr 20, 2019 at 5:00
0

Protractor runs its functions asynchronously, so you have to wait until the promises are resolved. You can do it by using the then function, here's a guide on promises.

There is another way of handling promises by using async/await which I would recomment because your code is much more readable. You have to make all your step definition functions async and call the protractor functions with await, which will stop execution of the following code until the promise is resolved. Your customer login function and step should then look like this:

async customerLogin() {
    await this.customerLoginButton.click();
}

Then(/^I click Customer Login$/, async function() {
    await login.customerLogin();
}

If you are using asnyc/await you don't need to use chai-as-promised, because using await on an async function returns the value just like chai's eventually which waits for a promise to resolve. So you have to replace your current I am on XYZ Bank home page step with the following:

expect(await browser.getTitle()).to.equal("Title");

Here are some great sources:

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.