CODEWITHSUNDEEP
angularjsprotractor
GGizmos
GGizmos

Reputation: 3773

How to access scripted classes loaded into a page inside Protractor tests?

I am newbie with protractor -- having a bit of trouble accessing an object defined in script loaded into the page being tested.

Here is the test: 

describe('test SortedMap', function() {

    beforeEach(function() {
      browser.get('index.html');

    })

    it('should be initialized with zero elements', function() {
      let sm = new SortedMap();
      expect(sm.count).toEqual(0);
    });
  });

This is a little unit test of a SortedMap class I crafted for this page. The SortedMap class definition is in a script loaded by index.html at the end of the body. While the angular controller for this page is able to properly access the SortedMap class, the protractor test fails with a reference error on let sm = new SortedMap() and I can't seem to access it in my protractor test.

Here is the index page:

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>My AngularJS App</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="lib/html5-boilerplate/dist/css/normalize.css">
  <link rel="stylesheet" href="lib/html5-boilerplate/dist/css/main.css">
  <link rel="stylesheet" href="app.css">
  <script src="lib/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
  <ul class="menu">
    <li><a href="#!/view1">view1</a></li>
    <li><a href="#!/view2">view2</a></li>
  </ul>

  <!--[if lt IE 7]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
  <![endif]-->

  <div ng-view="view1"></div>

  <div>AngularJS seed app: v<span app-version></span></div>

  <!-- In production use:
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
  -->
  <script src="lib/angular/angular.js"></script>
  <script src="lib/angular-route/angular-route.js"></script>
  <script src="classes/classes.js"></script>  // **<---The ES6 class SortedMap is defined in this script**
  <script src="app.js"></script>
  <script src="fringe/fringes_template.js"></script>
  <script src="fringe/fringes.js"></script>
  <script src="view1/view1.js"></script>
  <script src="view2/view2.js"></script>
  <script src="core/version/version.js"></script>
  <script src="core/version/version-directive.js"></script>
  <script src="core/version/interpolate-filter.js"></script>
</body>
</html>

Upvotes: 0

Views: 29

Answers (1)

Majesty
Majesty

Reputation: 1915

The purpose of protractor is to test an application from the users perspective, which means act like a real user would (clicking buttons, moving through pages, checking correct elements are rendered on a page).

If you want to get access to some functionality directly this is not what Protractor meant to, it is a matter of unit tests, e.g. Karma and etc.

So, probably, you should rethink your test case scenario.

UPD: Basically, the problem is that your class is not loaded into protractor context, you have to load this module via node.js as a module, see example. But new SortedMap() instance won't refer to a module, that was previously included via html script tag. It will be a brand new instance of SortedMap.

After all, if you still want to access same exact instance, I don't think it is possible, even if so, that is 100% incorrect approach, which leads to nowhere.

Upvotes: 1

Related Questions