Protractor testing: How to set the value of text elements in a login form?
JavascriptAngularjsProtractorJavascript Problem Overview
I am writing tests in Protractor for an Angular app. I want to fill out a login form and submit it.
How can I do this? I have got this far, but I don't know how to set the value of the email and password fields.
describe('The dashboard', function() {
ptor = protractor.getInstance();
beforeEach(function() {
ptor.get('#/dashboard');
var email = ptor.findElement(protractor.By.model('email'));
var password = ptor.findElement(protractor.By.model('password'));
var submit = ptor.findElement(protractor.By.tagName('button'));
// Fill out the form?
submit.click();
});
it('has a heading', function() {
heading = ptor.findElement(protractor.By.tagName('h1'));
expect(heading.getText()).toEqual('My Dashboard');
});
});
Javascript Solutions
Solution 1 - Javascript
Just for the benefit of anyone who found this via Google, the answer is:
email.sendKeys('[email protected]');
password.sendKeys('mypassword');
Solution 2 - Javascript
you can use
email.clear().sendKeys('[email protected]');
password.clear().sendKeys('mypassword');
Solution 3 - Javascript
In addition to shruti and Richard,
To ensure the input is empty or cleared, use the clear method which returns a Promise. Resolve the promise with sendKeys method on your input. This is helpful if you have pre-populated your input with default values.
Async/Await:
async fillInEmail() {
await email.clear();
email.sendKeys('[email protected]');
}
async fillInPassword() {
await password.clear();
password.sendKeys('mypassword');
}
ES6:
email.clear().then(() => {
email.sendKeys('[email protected]');
});
password.clear().then(() => {
password.sendKeys('mypassword');
});
Before ES6:
email.clear().then(function() {
email.sendKeys('[email protected]');
});
password.clear().then(function() {
password.sendKeys('mypassword');
});
Solution 4 - Javascript
As per above answers , you can use sendkeys in most cases . If that doesn't work, you can inject the text to the element using Javascript.
var locatorid='datepicker1';
var val= '12/31/2019';
//without parameterized
browser.executeScript("document.getElementById('datepicker1').value='10/21/2019'");
//After parameterized
browser.executeScript("document.getElementById('"+locatorid+"').value='"+val+"'");
browser.sleep(3000);
Solution 5 - Javascript
How about xpath?
I create a button like bellow:
<ion-input [(ngModel)]="model.password" name="password" type="text" #passcode="ngModel" required>
</ion-input>
And set the value using
element(by.xpath('//*[@name="password"]/input')).sendKeys('PASSWORD')
Solution 6 - Javascript
var searchComment = element(by.name("customTextField"));
searchComment.sendKeys("france").then(function() {
next()
});