Recently, I delved into the realm of Protractor+Cucumber+Typescript and devised a sample framework utilizing Page Object Design along with a small script to execute some click actions. URL:
My endeavor to click on the "Customer Login" button seems futile as it fails to interact with the element while Cucumber still displays the test as passed.
I attempted to leverage async/await for promise handling but unfortunately without success. Protractor Version: 5.4.2 TypeScript Version: 3.3.4000 Node Version: v10.15.3 NPM version: 6.4.1
Feature File:
Feature: Authentication at XYZ bank
@OutlineScenario
Scenario: Customer Access
Given I navigate to XYZ Bank's homepage
Then I initiate the Customer Login process
Then I specify the Customer Name
Then I proceed with the login action
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 trigger Customer Login
customerLogin() {
this.customerLoginButton.click();
}
//function to choose a Name from the Dropdown
selectName() {
const select: Select = new Select(this.yourNameDropDown);
select.selectByVisibleText("Harry Potter");
}
//function to execute the Login action
clickLogin() {
this.loginButton.click();
}
//function to activate 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 navigate to XYZ Bank\'s homepage', function() {
expect(browser.getTitle()).to.eventually.equal("Protractor practice website - Banking App");
});
Then(/^I initiate the Customer Login process$/, function() {
login.customerLogin();
});
Then('I specify the Customer Name', function() {
login.selectName();
});
Then('I proceed with the login action', 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();
},
}