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

Question

I am trying very basic protractor cucumber script here.

The step definition file has below code.

var {setDefaultTimeout} = require('cucumber');
var {defineSupportCode} = require('cucumber');
setDefaultTimeout(60 * 1000);
var LoginPage = require('../../PageObjects/loginPage.js');
var chai = require('chai');
var chaiAsPromised = require('chai-as-promised');

chai.use(chaiAsPromised);
var expect = chai.expect;

defineSupportCode(function ({And, But, Given, Then, When}) {

    When(/^I enter "([^"]*)" as user name$/, async (username) => {
        await LoginPage.setUserName(username);
       // callback.pending();
    });
    When(/^I enter "([^"]*)" as password$/, async (password) => {
      await LoginPage.setPassword(password);
       // callback.pending();
    });
    When(/^I click login button$/, async () => {
        await LoginPage.login();
       // callback.pending();

    });

    Given(/^I login into tutorialpoint"$/, async () => {
        await LoginPage.loadpage('https://www.tutorialspoint.com/angularjs/angularjs_login_application.htm');

    });

});

LoginPage.Js has below code.

var LoginPage = function() {
    var username = element(By.id('username'));
    var password = element(By.id('password'));
    var loginform = element(By.id('form'));


    this.loadpage = function(site) {
        browser.ignoreSynchronization = true;

        browser.get(site);
    };

    this.setUserName = function(name) {
        username.sendKeys(name);
    };

    this.setPassword = function(pwd) {
        password.sendKeys(pwd);
    };

    this.login = function() {
      loginform.submit();
    };
};
module.exports = new LoginPage();

Even though, elements are present in the demo login site, I always get below error.

[16:42:12] E/launcher - No element found using locator: By(css selector, *[id="username"]) [16:42:12] E/launcher - NoSuchElementError: No element found using locator: By(css selector, *[id="username"])

Is this just because of issues in the code?

try with async - github.com/angular/protractor/blob/master/docs/page-objects.md — Infern0

yong yong · Accepted Answer · 2018-10-09T14:13:58

You should change to return value for functions in LoginPage.js as following:

this.loadpage = function(site) {
    browser.ignoreSynchronization = true;

    browser.get(site);

    // sleep 10 seconds to wait page loading
    // change to browser.wait() for production script.
    return browser.sleep(10*1000) 
};

this.setUserName = function(name) {
    return username.sendKeys(name);
};

this.setPassword = function(pwd) {
    return password.sendKeys(pwd);
};

this.login = function() {
  return loginform.submit();
};

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

1 Answers