CODEWITHSUNDEEP
testingtextboxautomationprotractorgetelementbyid
Web Tech
Web Tech

Reputation: 203

Using input box with element by.id Protractor Testing error

I'm trying to use ids with my input box's within my login page but I get the following error with Protractor:

Failed: No element found using locator: By css selector, *[id="signin--username"])

Here is my log-in.js

var logIn = function() {
    this.navigate = function() {
        browser.get(browser.params.server);
    };
    this.usernameInputBox = element(by.id('signin--username'));
    this.passwordInputBox = element(by.id('signin--password'));
    this.dontHaveAnAccountButton = element(by.id('signin--no-account-question'));

    this.logInButton = element(by.id('signin--log-in'));
    this.Modal = element(by.css('.modal-dialog'));
    this.ModalButton = element(by.xpath('//*[@id="app"]/div[3]/div/div/form/div[3]/button'));
};

module.exports = new logIn();

Snippet from log-in.html

<div class="form-group">
  <div class="input-group input-group-lg">
    <span class="input-group-addon">
       <span class="glyphicon glyphicon-user"></span>
        </span>
          <input type="text"
           id="signin--username" 
           class="form-control"
           placeholder="{{'username' | translate}}" 
           ng-model="username"
           name="username" 
           required
           autofocus data-autofill
           >
   </div>
</div>

Protractor Test Javascript File:

module.exports = function() {
describe('Login Page', function() {

    var loginPage = require('../pages/log-in.js');
    var saveScreenshot = require('../screenshot.js');

    beforeEach(function() {
        loginPage.navigate();
    })

    it('should log in (with correct credentials)', function() {
        browser.waitForAngular();
        loginPage.usernameInputBox.sendKeys('service');
        loginPage.passwordInputBox.sendKeys('s5rv1c5');
        loginPage.logInButton.click();
        browser.waitForAngular();
        expect(browser.getCurrentUrl()).toContain(browser.params.server + '#/jobs/my_jobs');
    })

  });
};

Any help much appreciated! Thanks.

Upvotes: 2

Views: 2571

Answers (2)

alecxe
alecxe

Reputation: 474151

Looks like a timing issue. Improve navigate page object method to also wait for the page to load - wait for the username field to become present:

var logIn = function() {
    this.usernameInputBox = element(by.id('signin--username'));
    this.passwordInputBox = element(by.id('signin--password'));
    this.dontHaveAnAccountButton = element(by.id('signin--no-account-question'));

    // ...

    this.navigate = function() {
        browser.get(browser.params.server);

        var EC = protractor.ExpectedConditions;
        browser.wait(EC.presenceOf(this.usernameInputBox), 5000, "Username field is still not present");
    };
};

Upvotes: 1

TesterABC
TesterABC

Reputation: 1226

You are not giving the unique selector correctly. That is why this error occurs.

Use element(by.model('username')).sendKeys('your user name');

I assume that you gave the html of login text box.

Hope this helps. :)

Upvotes: 0

Related Questions