Protractor : not able to find element in login page - protractor

Question

I am novice user of protractor and trying to use it for angularjs application,
Config file snippet :
exports.config = {
directConnect: true,
capabilities: {
'browserName': 'chrome'
},
framework: 'jasmine',
specs: ['plugins/./test_spec.js'],
allScriptsTimeout: 60000,
getPageTimeout: 30000,
jasmineNodeOpts: {
defaultTimeoutInterval: 1240000
}
};
Working test case (spec file):
describe('Login', function () {
it('Login Page', function () {
browser.get('http://localhost:9000/apps/admin/');
element(by.model('ctrl.user.name'))
element(by.model('ctrl.user.password'))
expect(true).toBe(true)
});
});
Failing test case (spec file):
describe('Login', function () {
it('Login Page', function () {
browser.get('http://localhost:9000/apps/admin/');
element(by.model('ctrl.user.name')).sendKeys("test1");
element(by.model('ctrl.user.password')).sendKeys("test1");
element(by.css('[type="submit"]')).click();
expect(true).toBe(true)
});
});
Trying to use sendKeys for login page is failing but without sendkeys test case passes, I am getting following error:
Failed: script timeout: result was not received in 60 seconds
(Session info: chrome = 72.0.3626.109)
(Driver info: chromedriver = 2.46.628402(536cd7adbad73a3783fdc2cab92ab2ba7ec361e1), platform = Windows NT 10.0.17134 x86_64)
I suspect element not being found.
Please guide me through this.
Thanks in Advance

Answer 1

I highly recommended to add SELENIUM_PROMISE_MANAGER: false, to your protractor.config file due to this thread, if tells it shortly - better to don't use Control Flow. So how will look your config file:
exports.config = {
directConnect: true,
capabilities: {
'browserName': 'chrome'
},
framework: 'jasmine',
specs: ['plugins/./test_spec.js'],
allScriptsTimeout: 60000,
getPageTimeout: 30000,
jasmineNodeOpts: {
defaultTimeoutInterval: 1240000
},
SELENIUM_PROMISE_MANAGER: false,
};
After it you should update your tests (all actions that returns promise should resolve it, I prefer async ... await style). Also, your expect true is useless, let get rid off it, and add some explicit waiters.
describe('Login', () => {
it('Login Page' async () => {
await browser.get('http://localhost:9000/apps/admin/');
const name = element(by.model('ctrl.user.name'));
await browser.wait(ExpectedConditions.elementToBeClickable(name), 10000);
await name.sendKeys("test1");
const password = element(by.model('ctrl.user.password'));
await browser.wait(ExpectedConditions.elementToBeClickable(password), 10000);
await password.sendKeys("test1");
element(by.css('[type="submit"]')).click();
expect(true).toBe(true)
});
});
Also, It would be better to find locators using CSS. Update your question with what error this test will fail.

Answer 2

Protractor is wrapper on selenium, thus when you are plainning to use await/async methods just disable the SELENIUM_PROMISE_MANAGER by setting it as false, so that the protractor promises work well with async/await methods.
I also suggest using pagemodel design pattern which will make the code much readable.
enter code here
export class loginPageObject{
public emailTextBox: ElementFinder;
public passwordTextBox: ElementFinder;
public signInButton: ElementFinder;
public errorMessage: ElementFinder;
constructor(){ //this.emailTextBox = $("input[type='email']");
//this.emailTextBox = element(by.css("body > app-root > div > app-login > div > div > form > div > input"));
this.emailTextBox = $("input[type='email']");
this.passwordTextBox = $("input[type='password']");
this.signInButton = $("button[type='submit']");
this.errorMessage = $("span");
}
}
above is one such sample .. later on you can use it like following way