Angular e2e testing ng-show

Question

I use ng-pattern for validation, use ng-show to display the error message. This works fine on browser, but how do I code it in e2e to test if the error message shows up?

Here is my HTML:

<input type="text" ng-model="test.pname" name="pname"  ng-maxlength="30" ng-pattern="/^[a-zA-Z0-9 ]*$/"/>
<span class="custom-error" id="pnameValidate" ng-show="addProviderForm.pname.$error.pattern">
PName can be Alpha-Numeric up to 30 characters – spaces allowed, but no special characters</span>

Here is my e2e script:

  input('test.pname').enter('cakes`');
  expect(element('#pnameValidate:visible').text()).toMatch(/up to 30 characters/);
  input('test.pname').enter('cakes are good');
  expect(element('#pnameValidate:visible').text()).toBe('');

Here is the result from test runner:

expected "" but was "\n          PName can be Alpha-Numeric up to 30 characters – spaces allowed, but no special characters"

it seems in the test runner the #pnameValidate always shows no matter what I specify in e2e.

Answer 1

Have you tried adding wait time to the test to allow the UI to catch up with the script?

input('test.pname').enter('cakes`');
expect(element('#pnameValidate:visible').count()).toBe(1);
expect(element('#pnameValidate:visible').text()).toMatch(/up to 30 characters/);
input('test.pname').enter('cakes are good');

setTimeout(function() {
expect(element('#pnameValidate:visible').count()).toBe(0);
  expect(element('#pnameValidate:visible').text()).toBe('');
}, 500);

Answer 2

Your problem is ".enter"

change it to ".sendKeys"