How do I use browser.findElements() to count and iterate through elements?
<p>I'm testing a web page with the following elements in it:</p>

<pre class="lang-html prettyprint-override"><code>&lt;span class="step-count ng-binding"&gt;1&lt;/span&gt;
&lt;span class="step-count ng-binding"&gt;2&lt;/span&gt;
&lt;span class="step-count ng-binding"&gt;3&lt;/span&gt;
&lt;span class="step-count ng-binding"&gt;4&lt;/span&gt;
</code></pre>

<p>First I want to count them so I've tried the following code:</p>

<pre class="lang-js prettyprint-override"><code>it('make sure all elements exist at page', function() {
    var x = browser.findElements(by.css('.step-count.ng-binding'));
    expect(x.length).toEqual(4);
});
</code></pre>

<p>and</p>

<pre class="lang-js prettyprint-override"><code>it('make sure all elements exist at page', function() {
    var x = browser.findElements(by.css('.step-count.ng-binding'));
    expect(x.size).toEqual(4);
});
</code></pre>

<p>Both produced a failure message: </p>

<blockquote>
  <p>Failures: Expected undefined to equal 4.</p>
</blockquote>

<p>How do I count them properly in my ProtractorJS project and how do I iterate over them afterwards in order to compare text or any other properties that might be added later?</p>