量角器E2E和Angular

Question

I'm having trouble figuring out how to target elements in our single-page application.

I'm testing mostly authenticated pages, so the data is being mocked for protractor using: ngMockE2E and $httpBackend

Let's say there are 4 pages/views: Home | About | Settings | Sign out

The Settings page structure is roughly:

<div ng-view class="ng-scope">
  <div class="row ng-scope" ng-controller="SettingsCtrl as ctrl">
    <h1>Settings Main Page</h1>
    <div ng-if="show.more">
      <a href="#/more/info">More Info</a>
      [...]
    </div>
  </div>
</div>

If you click the more info link, the view will change to that page where the only major difference is in the ng-controller .

<div ng-view class="ng-scope">
  <div class="row ng-scope" ng-controller="SettingsCtrl">
    <h2>Settings More Info Page</h2>
    [...]
  </div>
</div>

In protractor I cannot figure out how to access the elements within the more info page - but I can locate the elements on the main settings page just fine.

For example:

var main_title = element(by.tagName('h1')).isPresent();
expect(main_title).toBe(true); // Will return true

var moreInfo_title = element(by.tagName('h2')).isPresent();
expect(moreInfo_title).toBe(true); // Will return false

Why can't I access elements within a view?

Answer 1

You might need to wait for the presence of the h2 element :

// click "More info"

var EC = protractor.ExpectedConditions;
var moreInfo_title = element(by.tagName('h2'));  

browser.wait(EC.presenceOf(moreInfo_title), 5000);

expect(moreInfo_title.isPresent()).toBe(true);

Answer 2

You should try clicking the link then check to see if the more info title exists.

var main_title = element(by.tagName('h1')).isPresent();
expect(main_title).toBe(true);

var link = element(by.linkText('More Info'));
link.click().then(function() {
   var moreInfo_title = element(by.tagName('h2')).isPresent();
   expect(moreInfo_title).toBe(true);
});