Protractor- Non angular OAuth Login redirecting to angular site - protractor

Question

We are using Protractor+Cucumber+Typescript combination.
Using protractor we are trying to login (Non angular OAuth) which redirects to application page (angular site). Following is our setup
feature file:
docsLogin.feature
Feature: Login to Docs
#TendukeLoginScenario
Scenario: Login to Docs application
Given I am on Tenduke login page
When Enter username and password
Then I click on Sign in button
Then I create a new folder
docsLoginPage.ts
import { $, element,by } from 'protractor';
export class TendukeLoginPageObject {
public usernameTextBox: any;
public passwordTextBox: any;
public signInButton: any;
public search: any;
public searchBox: any;
constructor() {
this.usernameTextBox = $("input[name='userName']");
this.passwordTextBox = $("input[name='password']");
this.signInButton = $("button[class='btn btn-primary']");
this.search = $("span[class='fa fa-search']");
this.searchBox = element(by.model('searchString'));
}
}
tenDukeLogin.ts
import { browser,element, by, } from 'protractor';
import { TendukeLoginPageObject } from '../pages/docsLoginPage';
import { defineSupportCode } from 'cucumber';
let chai = require('chai').use(require('chai-as-promised'));
let expect = chai.expect;
defineSupportCode(function ({ Given, When, Then }) {
let login: TendukeLoginPageObject = new TendukeLoginPageObject();
Given(/^I am on Tenduke login page$/, async () => {
browser.waitForAngularEnabled(false);
await expect(browser.getTitle()).to.eventually.equal('Sign in');
});
When(/^Enter username and password$/, async () => {
await login.usernameTextBox.sendKeys('abc#abc.com');
await login.passwordTextBox.sendKeys('12345');
});
Then(/^I click on Sign in button$/, async () => {
await (login.signInButton.click()).then(function(){
//browser.driver.wait((docs.plusIcon), 15000);
browser.wait((login.search).isPresent);
});
//await expect(browser.getTitle()).to.eventually.equal('Docs');
});
Then(/^I create a new folder$/, async () => {
//await browser.sleep(40000);
browser.waitForAngularEnabled();
await (login.search.click()).then(function(){
browser.wait((login.searchBox).isPresent);
});
});
})
Config.ts
import { browser, Config } from 'protractor';
export let config: Config = {
seleniumAddress: 'http://127.0.0.1:4444/wd/hub',
SELENIUM_PROMISE_MANAGER: false,
baseUrl: 'http://abc/content',
capabilities: {
browserName: 'chrome'
},
framework: 'custom',
frameworkPath: require.resolve('protractor-cucumber-framework'),
specs: [
'../../features/docsLogin.feature'
],
onPrepare: () => {
browser.ignoreSynchronization = true;
browser.manage().window().maximize();
},
cucumberOpts: {
compiler: "ts:ts-node/register",
strict: true,
format: ['pretty'],
require: ['../../stepdefinitions/*.ts', '../../support/*.ts'],
tags: '#TypeScriptScenario or #CucumberScenario or
#TendukeLoginScenario'
}
};
After clicking Sign in button browser closing immediately before
loading the application page.
We tried even adding some wait statement after Sign in but after timeout browser is closing. Not able to perform any action on Angular page after login.
protractor-typescript-cucumber#2.0.0 test E:\ProtractorTest\protractor-
cucumber-typescript
protractor typeScript/config/config.js
[18:10:52] I/launcher - Running 1 instances of WebDriver
[18:10:52] I/hosted - Using the selenium server at
http://127.0.0.1:4444/wd/hub
Feature: Login to Docs
#TendukeLoginScenario
Scenario: Login to Docs application
√ Given I am on Tenduke login page
√ When Enter username and password
(node:9096) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 3): TypeError: Cannot read property 'parentElementArrayFinder' of undefined
√ Then I click on Sign in button
x Then I create a new folder
Failures:
1) Scenario: Login to Docs application - features\docsLogin.feature:4
Step: Then I create a new folder - features\docsLogin.feature:8
Step Definition: stepdefinitions\tenDukeLogin.ts:29
Message:
NoSuchElementError: No element found using locator: By(css selector,
span[class='fa fa-search'])
at WebDriverError (E:\ProtractorTest\protractor-cucumber-
typescript\node_modules\selenium-webdriver\lib\error.js:27:5)
at NoSuchElementError (E:\ProtractorTest\protractor-cucumber-
typescript\node_modules\selenium-webdriver\lib\error.js:168:5)
at elementArrayFinder.getWebElements.then
(E:\ProtractorTest\protractor-cucumber-
typescript\node_modules\protractor\lib\element.ts:851:17)
at process._tickCallback (internal/process/next_tick.js:109:7)Error
at ElementArrayFinder.applyAction_ (E:\ProtractorTest\protractor-
cucumber-typescript\node_modules\protractor\lib\element.ts:482:23)
at ElementArrayFinder.(anonymous function) [as click]
(E:\ProtractorTest\protractor-cucumber-
typescript\node_modules\protractor\lib\element.ts:96:21)
at ElementFinder.(anonymous function) [as click]
(E:\ProtractorTest\protractor-cucumber-
typescript\node_modules\protractor\lib\element.ts:873:14)
at E:\ProtractorTest\protractor-cucumber-
typescript\stepdefinitions\tenDukeLogin.ts:32:29
at next (native)
at E:\ProtractorTest\protractor-cucumber-
typescript\stepdefinitions\tenDukeLogin.ts:7:71
at __awaiter (E:\ProtractorTest\protractor-cucumber-typescript\stepdefinitions\tenDukeLogin.ts:3:12)
at World.Then (E:\ProtractorTest\protractor-cucumber-typescript\stepdefinitions\tenDukeLogin.ts:29:37)
1 scenario (1 failed)
4 steps (1 failed, 3 passed)
0m04.194s
Cucumber HTML report E:\ProtractorTest\protractor-cucumber-
typescript/reports/html/cucumber_reporter.html generated successfully.
[18:11:03] I/launcher - 0 instance(s) of WebDriver still running
[18:11:03] I/launcher - chrome #01 failed 1 test(s)
[18:11:03] I/launcher - overall: 1 failed spec(s)
[18:11:03] E/launcher - Process exited with error code 1
npm ERR! Test failed. See above for more details.

Answer 1

Could you explain me why do you use async over there?
Do you have any other steps with asycn which works?
Try to replace tenDukeLogin.ts with:
import {defineSupportCode} from 'cucumber';
import {browser, ExpectedConditions} from 'protractor';
import {TendukeLoginPageObject} from '../pages/docsLoginPage';
const chai = require('chai').use(require('chai-as-promised'));
const expect = chai.expect;
defineSupportCode(({ Given, When, Then }) => {
const login: TendukeLoginPageObject = new TendukeLoginPageObject();
Given(/^I am on Tenduke login page$/, () => {
browser.waitForAngularEnabled(false);
return expect(browser.getTitle()).to.eventually.equal('Sign in');
});
When(/^Enter username and password$/, () => {
login.usernameTextBox.sendKeys('abc#abc.com');
return login.passwordTextBox.sendKeys('12345');
});
Then(/^I click on Sign in button$/, () => {
return (login.signInButton.click()).then(() => {
return browser.wait(ExpectedConditions.visibilityOf(login.search), 5000);
});
});
Then(/^I create a new folder$/, () => {
browser.waitForAngularEnabled();
return (login.search.click()).then(() => {
return browser.wait(ExpectedConditions.visibilityOf(login.searchBox), 5000);
});
});
});
Drop me a line does it fix your issue.