Search code examples
protractorcucumberangularjs-e2ecucumberjswebdriver-manager

Protractor- Non angular OAuth Login redirecting to angular site


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('[email protected]');
    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'
}
};
  1. After clicking Sign in button browser closing immediately before loading the application page.
  2. 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.

      [email protected] 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.
    

Solution

  • 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('[email protected]');
            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.