title: Element Class test showing ng-untouched and failing with proper input
body: <p>I'm trying to test a little angular app I have made.<a href="https://i.stack.imgur.com/3wYba.png" rel="nofollow noreferrer">My app</a> is just a simple table of users(you can add and edit users). Name and email input are validated. </p>
  
  <p>I want to test validation on name input, the validation is quite simple - your name must be at least than 3 characters long. If your name passes the validation <a href="https://i.stack.imgur.com/MJWKS.png" rel="nofollow noreferrer">the name input will be in green color</a> and class of the input will be </p>
  
  <blockquote>
    <p>username form-control input-sm ng-dirty ng-valid-parse ng-touched ng-valid-required ng-valid ng-valid-minlength</p>
  </blockquote>
  
  <p>if your name doesn't pass the validation <a href="https://i.stack.imgur.com/w7Feu.png" rel="nofollow noreferrer">the name input will be in yellow color</a> and class of the input will be</p>
  
  <blockquote>
    <p>username form-control input-sm ng-invalid ng-dirty ng-valid-parse ng-valid-required ng-invalid-minlength ng-touched</p>
  </blockquote>
  
  <p>conf.js</p>
  
  <pre><code>exports.config = {
  seleniumAddress: 'http://localhost:4444/wd/hub',
  onPrepare : function() {
      // browser.manage().window().setSize(1600, 1000);
      browser.manage().window().maximize();
  },
  capabilities: {
      'browserName': 'chrome'
  },
  specs: ['specs/main-spec.js'],
  jasmineNodeOpts: {
      showColors: true,
      defaultTimeoutInterval: 3000000,
  },
  };
  </code></pre>
  
  <p>main-spec.js</p>
  
  <pre><code>const userFormPage = require('../pages/user-form-page');
  describe('test app', function () {
      it('should get to the main page of the app', function () {
          browser.get('http://localhost:8080/TestAppExample/index');
          expect(browser.getCurrentUrl()).toEqual('http://localhost:8080/TestAppExample/index');
      });
      it('should write wrong input in the name input',function () {
          userFormPage.sendKeysNameInput('na');
          expect(userFormPage.getNameInput().getAttribute('value')).toEqual('na');
          // browser.wait(function () {
          //     return nameInput.getAttribute('class').then((attr) =&gt; {
          //         return attr == 'username form-control input-sm ng-invalid ng-dirty ng-valid-parse ng-valid-required ng-invalid-minlength ng-touched';
          //     })
          // },10000);
          expect(userFormPage.getNameInput().getAttribute('class')).toEqual('username form-control input-sm ng-invalid ng-dirty ng-valid-parse ng-valid-required ng-invalid-minlength ng-touched');
      });
  });
  </code></pre>
  
  <p>user-form-page.js</p>
  
  <pre><code>var userFormPage= function () {
      var nameInput = element(by.id('uname'));
  
      this.getNameInput = function () {
          return nameInput;
      };
  
      this.sendKeysNameInput = function (keys) {
          nameInput.clear().sendKeys(keys)
      }
  };
  
  module.exports = new userFormPage();
  </code></pre>
  
  <p>index.html</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Test App&lt;/title&gt;
          &lt;link href="/TestAppExample/static/css/bootstrap.css" rel="stylesheet"&gt;
          &lt;link href="/TestAppExample/static/css/app.css" rel="stylesheet"&gt;
      &lt;/head&gt;
      &lt;body data-ng-app="myApp" class="ng-cloak"&gt;
          &lt;div class="generic-container" data-ng-controller="UserController as controller"&gt;
              &lt;div class="panel panel-default"&gt;
                  &lt;div class="panel-heading"&gt;&lt;span class="lead"&gt;User Registration Form &lt;/span&gt;&lt;/div&gt;
                  &lt;div class="formcontainer"&gt;
                      &lt;form data-ng-submit="controller.submit()" name="myForm" class="form-horizontal"&gt;
                          &lt;input type="hidden" data-ng-model="controller.user.id" /&gt;
                          &lt;div class="row"&gt;
                              &lt;div class="form-group col-md-12"&gt;
                                  &lt;label class="col-md-2 control-lable" for="uname"&gt;Name&lt;/label&gt;
                                  &lt;div class="col-md-7"&gt;
                                      &lt;input type="text" data-ng-model="controller.user.userName" id="uname" class="username form-control input-sm"
                                          placeholder="Enter your name" required data-ng-minlength="3"/&gt;
                                      &lt;div class="has-error" data-ng-show="myForm.$dirty"&gt;
                                          &lt;span data-ng-show="myForm.uname.$error.required"&gt;This is a required field&lt;/span&gt;
                                          &lt;span data-ng-show="myForm.uname.$error.minlength"&gt;Minimum length required is 3&lt;/span&gt;
                                          &lt;span data-ng-show="myForm.uname.$invalid"&gt;This field is invalid &lt;/span&gt;
                                       &lt;/div&gt;
                                  &lt;/div&gt;
  
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                          &lt;div class="row"&gt;
                              &lt;div class="form-group col-md-12"&gt;
                                  &lt;label class="col-md-2 control-lable" for="address"&gt;Address&lt;/label&gt;
                                  &lt;div class="col-md-7"&gt;
                                      &lt;input type="text" data-ng-model="controller.user.address" id="address" class="form-control input-sm"
                                          placeholder="Enter your Address. [This field is validation free]"/&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                          &lt;div class="row"&gt;
                              &lt;div class="form-group col-md-12"&gt;
                                  &lt;label class="col-md-2 control-lable" for="email"&gt;Email&lt;/label&gt;
                                  &lt;div class="col-md-7"&gt;
                                      &lt;input type="email" data-ng-model="controller.user.email" id="email" class="email form-control input-sm"
                                          placeholder="Enter your Email" required/&gt;
                                      &lt;div class="has-error" data-ng-show="myForm.$dirty"&gt;
                                          &lt;span data-ng-show="myForm.email.$error.required"&gt;This is a required field&lt;/span&gt;
                                          &lt;span data-ng-show="myForm.email.$invalid"&gt;This field is invalid &lt;/span&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
  
                          &lt;div class="row"&gt;
                              &lt;div class="form-actions floatRight"&gt;
                                  &lt;input type="submit" id="submit" value="{{!controller.user.id ? 'Add' : 'Update'}}"
                                      class="btn btn-primary btn-sm" data-ng-disabled="myForm.$invalid"&gt;
                                  &lt;button type="button" id="reset" data-ng-click="controller.reset()" class="btn btn-warning btn-sm"
                                      data-ng-disabled="myForm.$pristine"&gt;Reset Form&lt;/button&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/form&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="panel panel-default"&gt;
                  &lt;div class="panel-heading"&gt;&lt;span class="lead"&gt;List of Users &lt;/span&gt;&lt;/div&gt;
                  &lt;div class="tablecontainer"&gt;
                      &lt;table class="table table-hover"&gt;
                          &lt;thead&gt;
                              &lt;tr&gt;
                                  &lt;th&gt;Name&lt;/th&gt;
                                  &lt;th&gt;Address&lt;/th&gt;
                                  &lt;th&gt;Email&lt;/th&gt;
                                  &lt;th width="20%"&gt;&lt;/th&gt;
                              &lt;/tr&gt;
                          &lt;/thead&gt;
                          &lt;tbody&gt;
                              &lt;tr data-ng-repeat="u in controller.users" class="user-row"&gt;
                                  &lt;td&gt;&lt;span data-ng-bind="u.userName" class="user-name-td"&gt;&lt;/span&gt;&lt;/td&gt;
                                  &lt;td&gt;&lt;span data-ng-bind="u.address"&gt;&lt;/span&gt;&lt;/td&gt;
                                  &lt;td&gt;&lt;span data-ng-bind="u.email"&gt;&lt;/span&gt;&lt;/td&gt;
                                  &lt;td&gt;
                                      &lt;button type="button" id="edit" data-ng-click="controller.edit(u.id)"
                                          class="btn btn-success custom-width"&gt;Edit&lt;/button&gt;
                                      &lt;button type="button" id="remove" data-ng-click="controller.openModal(u)"
                                          class="btn btn-danger custom-width"&gt;Remove&lt;/button&gt;
                                  &lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/tbody&gt;
                      &lt;/table&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div data-ng-controller="ModalInstanceController as modalCtrl"&gt;
              &lt;script type="text/ng-template" id="modalContent"&gt;
                  &lt;div class="modal-header"&gt;
                      &lt;h3 class="modal-title"&gt;Delete user&lt;/h3&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-body"&gt;
                      &lt;label class="control-lable"&gt;Are you sure wan't to delete user {{userName}}?&lt;/label&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-footer"&gt;
                      &lt;button class="btn btn-primary" id="ok" type="button" ng-click="$close()"&gt;OK&lt;/button&gt;
                      &lt;button class="btn btn-warning" id="cancel" type="button" ng-click="$dismiss('cancel')"&gt;Cancel&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/script&gt;
          &lt;/div&gt;
  
          &lt;script src="/TestAppExample/static/js/vendor/angular.js"&gt;&lt;/script&gt;
          &lt;script src="/TestAppExample/static/js/vendor/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script src="/TestAppExample/static/js/vendor/ui-bootstrap-tpls-1.3.2.js"&gt;&lt;/script&gt;
          &lt;script src="/TestAppExample/static/js/vendor/bootstrap.min.js"&gt;&lt;/script&gt;
          &lt;script src="/TestAppExample/static/js/app.js"&gt;&lt;/script&gt;
          &lt;script src="/TestAppExample/static/js/service/UserService.js"&gt;&lt;/script&gt;
          &lt;script src="/TestAppExample/static/js/controller/UserController.js"&gt;&lt;/script&gt;
          &lt;script src="/TestAppExample/static/js/controller/ModalInstanceController.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My test writes 'na' in the name input and the name input becomes yellow as it should,but when I run my test I get the following error</p>
  
  <blockquote>
    <p>Expected 'username form-control input-sm ng-untouched ng-invalid ng-dirty ng-valid-parse ng-valid-required ng-invalid-minlength' to equal 'username form-control input-sm ng-invalid ng-dirty ng-valid-parse ng-valid-required ng-invalid-minlength ng-touched'.</p>
  </blockquote>
  
  <p><strong>EDIT</strong></p>
  
  <p>If I change my <code>sendKeysNameInput()</code> method to that</p>
  
  <pre><code> this.sendKeysNameInput = function (id, keys) {
      var targetInput = element(by.id(id));
      (&lt;HTMLInputElement&gt;targetInput).focus().clear().sendKeys(keys)
  }
  </code></pre>
  
  <p>Then I get the unexpected token error </p>
  
  <pre><code>        (&lt;HTMLInputElement&gt;targetInput).focus().clear().sendKeys(keys)
           ^
  
  SyntaxError: Unexpected token &lt;
  </code></pre>
  
  <p>My idea(WebStorm) suggested to me to set my language as react when I changed my <code>sendKeysNameInput()</code> method, but I am using plain js with node.js(protractor and jasmine libraries) and testing an Angular app.</p>