2

I have an app I'm trying to do e2e tests with. The app uses a non-Angular login page (Microsoft AD account). So, I fill in the user and password then click the "sign in" button with the following code:

var user = asAdmin ? config.adminUser : config.user;
browser.driver.findElement(by.id('cred_userid_inputtext')).sendKeys(user);
browser.driver.findElement(by.id('cred_password_inputtext')).sendKeys(config.pass);
browser.driver.findElement(by.id('cred_sign_in_button')).click();

The user and password get filled in and the "sign in" button (which is a <span>) looks like it was clicked (changes color), but nothing happens.

I wait for quite a while (minutes) and it just doesn't work. However, if I just use the mouse, it does work. I have also tried tacking on a "\n" to the end of the password string to simulate the enter key. This is ignored.

The html for the pertinent parts of the login look like this:

<form id="credentials" method="post" action="https://login.microsoftonline.com/...">
    <div id="cred_userid_container" class="login_textfield textfield">
        <span class="input_field textfield">
            <label for="cred_userid_inputtext" class="no_display" aria-hidden="true">User account</label>
            <div class="input_border">
                <input tabindex="1" id="cred_userid_inputtext" class="login_textfield textfield required email field normaltext" placeholder="someone@example.com " type="email" name="login" spellcheck="false" alt="someone@example.com " aria-label="User account" value="" autocomplete="off">
            </div>
        </span>
    </div>
    ...
    <div id="cred_password_container" class="login_textfield textfield" style="opacity: 1;">
        <span class="input_field textfield">
            <label for="cred_password_inputtext" class="no_display" aria-hidden="true">Password</label>
            <div class="input_border">
                <input tabindex="2" id="cred_password_inputtext" class="login_textfield textfield required field normaltext" placeholder="Password" spellcheck="false" aria-label="Password" alt="Password" type="password" name="passwd" value="">
            </div>
        </span>
    </div>
    ...
     <li class="login_cred_options_container">
        <div id="cred_kmsi_container" class="subtext normaltext">
          <span class="input_field ">
            <input tabindex="10" id="cred_keep_me_signed_in_checkbox" type="checkbox" value="0" name="persist">
            <label id="keep_me_signed_in_label_text" for="cred_keep_me_signed_in_checkbox" class="persist_text">Keep me signed in</label>
          </span>
        </div>
      <span id="cred_sign_in_button" tabindex="11" onclick="Post.SubmitCreds();return false;" class="button normaltext cred_sign_in_button refresh_domain_state disabled_button" role="button" style="opacity: 1;">Sign in</span>
                    <div id="recover_container" class="subtext smalltext" style="opacity: 1;">
          <span>
             <a id="cred_forgot_password_link" tabindex="12" href="https://login.microsoftonline.com/resetpw.srf?lc=1033&amp;id=501148">Can’t access your account?</a>
          </span>
        </div>

      </li>
    ...
</form>

I can't, for the life of me figure out what's going on here.

Any help is greatly appreciated.

UPDATED: added the missing "button" span

UPDATE 2: also tested with Firefox, same problem. The click on the span just doesn't seem to work..

UPDATE 3: For some strange reason, the following code works:

browser.actions()
  .mouseMove(browser.driver.findElement(by.id('cred_sign_in_button')))
  .click()
  .perform();

browser.sleep(500);

browser.driver.findElement(by.id('cred_sign_in_button')).click();

If I take either the mouseMove/click or the last click out, it stops working. If I take out the sleep, it is intermittent.

I have no idea why that's working.

Tom McKearney
  • 315
  • 2
  • 11

1 Answers1

1

Testing non-angular pages with Protractor can be tricky regarding waiting for stuff.

I suggest you upgrade Protractor to latest (1.3.1 as of now), use a custom function waitReady() that browser.wait for elements ready and rewrite your test like this:

var user = asAdmin ? config.adminUser : config.user;

// TODO: use page objects
var userIdInputElm = $('#cred_userid_inputtext');
var passwordInputElm = $('#cred_password_inputtext');
var signinButtonElm = $('#cred_sign_in_button');

it('waits for the elements present and visible (non-angular)', function() {
    expect(userIdInputElm.waitReady()).toBeTruthy();
    expect(passwordInputElm.waitReady()).toBeTruthy();
    expect(signinButtonElm.waitReady()).toBeTruthy();
});

it('fills user and password', function() {
    userIdInputElm.sendKeys(user);
    passwordInputElm.sendKeys(config.pass);
});

it('clicks sign in button', function() {
    signinButtonElm.click();
});

More details of why waitReady here.

Community
  • 1
  • 1
Leo Gallucci
  • 16,355
  • 12
  • 77
  • 110
  • Well, I am watching the Chrome Window launch and the button is actually there and visible. The text is populating in the user/pass. So, would this make a difference? – Tom McKearney Oct 08 '14 at 22:15
  • I just added some hacked up code that works for some strange reason, in case it helps. – Tom McKearney Oct 08 '14 at 22:28
  • My suggestion is precisely to avoid filling up with `browser.sleep()` all around. But suit yourself ;) – Leo Gallucci Oct 08 '14 at 23:49
  • I totally don't want to use the sleep(), but I don't see how your solution affects things. It seems like it's just waiting for the elements' presence. They are all present when this code executes, I can see them on the screen. Am I missing something? – Tom McKearney Oct 09 '14 at 17:30
  • The fact that you can see them doesn't mean they are present and visible by the time selenium is trying to interact with them. Protractor takes care of that for you when testing an angular page, but when non-angular page you're basically on your own. – Leo Gallucci Oct 09 '14 at 17:55
  • But I'm watching the text populating into the text boxes before it tries to click. They're there. – Tom McKearney Oct 09 '14 at 19:27