How to validate if its a login page using webdriverio

Question

I am using Javascript, webdriverio (v2.1.2) to perform some data extraction from an internal site. The internal site is SSO enabled, so if I have been authenticated on another application, I need not login for this application (common in enterprise intranet applications). I plan to achieve the below,

Create a client with required capabilities
Pass the required URL
For fun : Print the title of the page

Check if an element exist on the page. If yes, then it's a login page. If not, then it's not login page

login = function (username, password) {
if (!browserClientUtil) {
    throw "Unable to load browserClientUtil.js";
}
browserClientUtil
  .createClient()
  .url(_Url)
  .title(function (err, res) {
        console.log('Title is: ' + res.value);
  }) .isExisting('input#login_button.login_button', function (err, isExisting) {
    browserClientUtil.getCurrentClient()
        .setValue('input#USER.input', username)
      .setValue('input#PASSWORD.input', password)
      //.saveScreenshot('ultimatixLoginDetails.png')
      .click('input#login_button.login_button')
      .pause(100);
      handlePostLogin();
});

};

Is this the best way to do? I tried to separate the code for verifying login page in a separate function, it didn't work as everything in webdriver happens as part of callback and I am not sure if I am doing it in a right way. How do I return from a callback, that will in-turn be the final value returned by that function?

    login = function (username, password) {
    if (!browserClientUtil) {
        throw "Unable to load browserClientUtil.js";
    }
    browserClientUtil
      .createClient()
      .url(_Url)
      .title(function (err, res) {
            console.log('Title is: ' + res.value);
      });
      if(isThisLoginPage()){
            browserClientUtil.getCurrentClient()
            .setValue('input#USER.input', username)
          .setValue('input#PASSWORD.input', password)
          //.saveScreenshot('ultimatixLoginDetails.png')
          .click('input#login_button.login_button')
          .pause(100);
          handlePostLogin();
        }
};

    isThisLoginPage = function() {
    var client = browserClientUtil.getCurrentClient();
    if(!client) {
        throw "Unable to get reference for current client, hence cannot validate if this is login page.";
    }

    client.isExisting('input#login_button.login_button', function (err, isExisting) {
        if(isExisting) {
            return true;
        }
    });
    return false;
};

I know that, if an inner function call is asynchronous, then all the functions 'wrapping' this call must also be asynchronous in order to 'return' a response. So, my final question would be - was my first method the best way or may be I should look into deferred and promises to make the code modular and readable? [link](http://stackoverflow.com/questions/6847697/how-to-return-value-from-an-asynchronous-callback-function) — rohitmohta, Aug 27 '14 at 10:13

score 6 · Accepted Answer · answered Aug 29 '14 at 22:38

You can create your own workflow by creating own commands that wrap other ones. For example you can make an own command to login:

browserClientUtil.addCommand("login", function(url, user, pw, cb) {
    this.url(url)
        .setValue('#username', user)
        .setValue('#password', pw)
        .submitForm('#loginForm')
        .call(cb);
});

This allows you to hide "complex" asynchronous webdriver actions behind a simple function. It is easy to create an powerful toolchain. At the end your test script looks like:

browserClientUtil
    .login("http://example.com/login", "john.doe", "testpass")
    .getTitle(function(err, title) {
        console.log(title);
    })
    // ...

Cheers

How to validate if its a login page using webdriverio

1 Answers1