I have an application with two main pages. The first page serves as the landing page and features a login button. When users click on this button, they are redirected to login.html, where they are prompted to enter their username and password.
The code snippet for the process is as follows:
index.html
<a ui-sref="login" class="fa fa-sign-in" href="/login"> Login</a>
and
login.html
<input type="text" id="username" name="username" placeholder="Username" ng-model="user.username" required="" autocomplete="off" class="ng-pristine ng-invalid ng-invalid-required">
<input type="password" name="password" placeholder="Password" ng-model="user.password" required="" autocomplete="off" class="ng-pristine ng-invalid ng-invalid-required">
During testing, after successfully clicking the login button and verifying the redirection, I encountered an error when trying to input data into the username and password fields. It seemed as if the input boxes were not being recognized. I attempted to introduce a browser sleep, but it did not resolve the issue.
// in test/e2e/main.spec.js
describe('E2E: main page', function(){
'use strict';
var ptor;
// initialize the protractor instance
beforeEach(function(){
browser.get('http://127.0.0.1:9000/');
ptor = protractor.getInstance();
});
it('it should navigate to the login page upon clicking the login button', function(){
var link = element(by.css('.fa.fa-sign-in'))
link.click();
browser.sleep(4000);
expect(ptor.getCurrentUrl()).toMatch(/\/login/);
element(by.model('user.username')).sendKeys('test');
element(by.model('user.password')).sendKeys('test');
});
});
Any suggestions or insights on how to resolve this issue?
UPDATE:
Switching from by.input to by.model resolved the input box recognition issue, even though the initial method should have worked according to the resource I was following. Quite peculiar.