After input for an email address I need the driver to push tab twice

Question

I have a modal to add a user to a website. First an email address needs to be added which then checks the server to see if email already in the list of users. Next the first names, last etc needed to be added. Problem is the email is not checked against the server until i click outside the input box, or hit tab twice. Until this check is done the first name, last name, etc are read-only and elements are not visible so I cannot fill out the form any further.

Here is the code I have tried:

element.all(by.css("input[type$='text']")).first().sendKeys(protractor.Key.TAB);
browser.driver.sleep(3000);
//below is the first name element
element(by.xpath("(//input[@type='text'])[2]")).sendKeys("a First Name");

 element.all(by.css("input[type$='text']")).first().sendKeys('anemailaddy@newmarketinc.com', protractor.Key.TAB); //.browser.actions().sendKeys(protractor.Key.TAB).perform();

The above commented out lines are attempts at different ways. I also tried this:

And one last question the email address is the element you see above, first name, last name, etc are in an array. to access first name bar would it be input[type$='text']:nth-of-type(2) as its second on the list?

The Page HTML:

<div class="dialog-overlay" ng-class="{visible: usersCtrl.editPermissionsVisible}">
  <div class="edit-user-dialog">
    <div class="dialog-header">
      <div class="dg-title-text">Edit a User&#39;s Permissions</div>
      <span class="icon icon-close" ng-click="usersCtrl.hideEditPermissions()"></span>
    </div>
    <div class="dialog-content">
      <div class="dg-row">
        <div>
          <span class="dg-field-label">Email:</span>
          <span class="dg-field-error " ng-bind="text = usersCtrl.invalidEmailMessage"></span>
        </div>

        <input type="text" class="dg-field-input" ng-model="usersCtrl.user.email" ng-blur="usersCtrl.onChangeEmail()" ng-disabled="!usersCtrl.addUserVisible" />
      </div>
      <div class="dg-row">
        <div class="dg-cell col-2">
          <span class="dg-field-label">First Name:</span>
          <input type="text" class="dg-field-input" ng-model="usersCtrl.user.firstName" ng-disabled="usersCtrl.editPermissionsVisible || usersCtrl.searchNotStartOrSuccess" />
        </div>
        <div class="dg-cell col-2">
          <span class="dg-field-label">Last Name:</span>
          <input type="text" class="dg-field-input" ng-model="usersCtrl.user.lastName" ng-disabled="usersCtrl.editPermissionsVisible || usersCtrl.searchNotStartOrSuccess" />
        </div>
      </div>
      <div class="dg-row">
        <span class="dg-field-label">Title:</span>
        <input type="text" class="dg-field-input" ng-model="usersCtrl.user.title" ng-disabled="usersCtrl.editPermissionsVisible || usersCtrl.searchNotStartOrSuccess" />
      </div>
      <div class="dg-row">
        <div class="checkbox-control" ng-click="usersCtrl.permissions.toggleContentManagement()">
          <span class="checkbox-mark svg-icon" ng-class="{'icon-check-on': usersCtrl.permissions.allowContentManagement}"></span>
          <span class="checkbox-text bold">Allow Access to iPlan Content Management System</span>
        </div>
      </div>
      <div class="dg-row content-management">
        <div class="checkbox-column" ng-repeat="permission in usersCtrl.permissions.contentManagement" ng-if="permission.canIssue">
          <div class="checkbox-control" ng-click="!usersCtrl.isDisabledPermission(permission) && usersCtrl.togglePermission(permission)" ng-class="{disabled: usersCtrl.isDisabledPermission(permission)}">
            <span class="checkbox-mark svg-icon" ng-class="{'icon-check-on': permission.value}"></span>
            <span class="checkbox-text">{{permission.displayName}}</span>
          </div>
        </div>
        <div class="clearfix"></div>
      </div>
      <div class="dg-row ">
        <div class="checkbox-control" ng-click="usersCtrl.togglePermission(usersCtrl.permissions.manageUsers)">
          <span class="checkbox-mark svg-icon" ng-class="{'icon-check-on': usersCtrl.permissions.manageUsers.value}"></span>
          <span class="checkbox-text bold">{{usersCtrl.permissions.manageUsers.displayName}}</span>
        </div>
      </div>

Answer 1

The reason the "TAB" approach is not working for you is that you may experience the Chrome version 44 has some issue with selenium test issue. In this case, you need to try with the most latest Chrome or Firefox.

And one last question the email address is the element you see above, first name, last name, etc are in an array. to access first name bar would it be input[type$='text']:nth-of-type(2) as its second on the list?

Define the list of inputs once and use first(), get() or last():

var inputs = element.all(by.css("input[type$='text']"));
var email = inputs.first();

email.sendKeys("anemailaddy@newmarketinc.com", protractor.Key.TAB, protractor.Key.TAB);

inputs.get(1).sendKeys("a First Name");

---

You may also try clicking outside of the modal, for instance:

browser.actions().mouseMove({x: 5, y: 5}).click().perform();