The AngularJS team recommends using Protractor as it&#39;s going to replace angular scenario runner:

&gt; Angular Scenario Runner is in maintenance mode - If you&#39;re starting a new Angular project, consider using [Protractor](https://github.com/angular/protractor).

quoted from [AngularJs documentation](https://docs.angularjs.org/guide/e2e-testing).

The tutorial angular-phonecat was developed a long time ago (in 2011 mainly) and has not yet been updated to use some Angular new features like Protractor.

**EDIT**

In the [Protractor Docs - FAQ][1]:

&gt; ## Why both Karma and Protractor? When do I use which?
&gt; 
&gt; Karma is a great tool for unit testing, and Protractor is intended for
&gt; end to end or integration testing. This means that small tests for the
&gt; logic of your individual controllers, directives, and services should
&gt; be run using Karma. Big tests in which you have a running instance of
&gt; your entire application should be run using Protractor. Protractor is
&gt; intended to run tests from a user&#39;s point of view - if your test could
&gt; be written down as instructions for a human interacting with your
&gt; application, it should be an end to end test written with Protractor.
&gt; 
&gt; Here&#39;s a [great blog post][2] with more info.


  [1]: https://github.com/angular/protractor/blob/master/docs/faq.md
  [2]: http://www.yearofmoo.com/2013/09/advanced-testing-and-debugging-in-angularjs.html

I&#39;m using &quot;yeoman&quot; and &quot;bower&quot; on windows 7 but got the following error when I create the app

    yo webapp

The error is 

    bower not-cached    git://github.com/jlong/sass-bootstrap.git#~3.0.0
    bower resolve       git://github.com/jlong/sass-bootstrap.git#~3.0.0
    bower not-cached    git://github.com/Modernizr/Modernizr.git#~2.6.2
    bower resolve       git://github.com/Modernizr/Modernizr.git#~2.6.2
    bower not-cached    git://github.com/jquery/jquery.git#~1.10.2
    bower resolve       git://github.com/jquery/jquery.git#~1.10.2
    bower ECMDERR       Failed to execute &quot;git ls-remote --tags --heads git://github
    .com/jquery/jquery.git&quot;, exit code of #128
    
    Additional error details:
    fatal: unable to connect to github.com:
    github.com[0: 192.30.252.130]: errno=No error

The version of the yeoman, bower and node

    c:\yo-test&gt;bower -v
    1.2.8
    
    c:\yo-test&gt;yo -version
    1.1.2

    c:\yo-test&gt;node -v
    v0.10.15

Any suggestion is much appreciated. 


How to fix bower ECMDERR

I am using ng-repeat with my code I have &#39;n&#39; number of text box based on ng-repeat. I want to align the textbox with three columns.

this is my code


    &lt;div class=&quot;control-group&quot; ng-repeat=&quot;oneExt in configAddr.ext&quot;&gt;
        {{$index+1}}. 
        &lt;input type=&quot;text&quot; name=&quot;macAdr{{$index+1}}&quot; 
               id=&quot;macAddress&quot; ng-model=&quot;oneExt.newValue&quot; value=&quot;&quot;/&gt;
    &lt;/div&gt;




how to split the ng-repeat data with three columns using bootstrap

Should I be using Protractor or Karma for my end-to-end testing? 

Angular-seed is using Protractor/Selenium WebDriver for E2E but the angular-phonecat tutorial uses karma. 

I read that I should use Karma for unit tests and Protractor for E2E, which seems fine but I thought I would ask on here to get other dev&#39;s opinions.



Should I be using Protractor or Karma for my end-to-end testing?

Should I be using Protractor or Karma for my end-to-end testing?
Angular-seed is using Protractor/Selenium WebDriver for E2E but the angular-phonecat tutorial uses karma.
I read that I should use Karma for unit tests and Protractor for E2E, which seems fine but I thought I would ask on here to get other dev's opinions.

I need to use an *associative array* as data source for my `select` options using AngularJS.

Is it possible to use an array like this?

	{
		&quot;key1&quot;: &quot;val1&quot;,
		&quot;key2&quot;: &quot;val2&quot;,
		&quot;key3&quot;: &quot;val3&quot;,
		...
	}

and get something like this:

	&lt;select&gt;
		&lt;option value=&quot;key1&quot;&gt;val1&lt;/option&gt;
		&lt;option value=&quot;key2&quot;&gt;val2&lt;/option&gt;
		&lt;option value=&quot;key3&quot;&gt;val3&lt;/option&gt;
		...
	&lt;/select&gt;

I read [docs][1], but I can&#39;t understand how to achieve this.


  [1]: http://docs.angularjs.org/api/ng.directive:select

key-value pairs in ng-options

Reading the [AngularJS docs][1] I haven&#39;t figured out if `$anchorScroll` can have a duration/easing option to smooth scroll to elements.

It only says:

    $location.hash(&#39;bottom&#39;);
        
    // call $anchorScroll()
    $anchorScroll();

I do not use jquery and don&#39;t want to; is there still a clever yet simple way to make or extend `$anchorScroll` in order to make scrolling more smooth?

  [1]: http://docs.angularjs.org/api/ng.$anchorScroll

AngularJS - $anchorScroll smooth/duration

I am working on Angular app. I tried to use ng-if and switch inside **ng-repeat** but didn&#39;t succeed. I have data like:

   

       **[{&quot;_id&quot;:&quot;52fb84fac6b93c152d8b4569&quot;,
           &quot;post_id&quot;:&quot;52fb84fac6b93c152d8b4567&quot;,
           &quot;user_id&quot;:&quot;52df9ab5c6b93c8e2a8b4567&quot;,
           &quot;type&quot;:&quot;hoot&quot;,},  
          {&quot;_id&quot;:&quot;52fb798cc6b93c74298b4568&quot;,
           &quot;post_id&quot;:&quot;52fb798cc6b93c74298b4567&quot;,
           &quot;user_id&quot;:&quot;52df9ab5c6b93c8e2a8b4567&quot;,
           &quot;type&quot;:&quot;story&quot;,},        
          {&quot;_id&quot;:&quot;52fb7977c6b93c5c2c8b456b&quot;,
           &quot;post_id&quot;:&quot;52fb7977c6b93c5c2c8b456a&quot;,
           &quot;user_id&quot;:&quot;52df9ab5c6b93c8e2a8b4567&quot;,
           &quot;type&quot;:&quot;article&quot;,},**


 $scope.comments = data mentioned above     
and my Html like :             
        
       &lt;div ng-repeat = &quot;data in comments&quot;&gt;
          &lt;div ng-if=&quot;hoot == data.type&quot;&gt;
              //differnt template with hoot data
           &lt;/div&gt;
          &lt;div ng-if=&quot;story == data.type&quot;&gt;
              //differnt template with story data
           &lt;/div&gt;
           &lt;div ng-if=&quot;article == data.type&quot;&gt;
              //differnt template with article data
           &lt;/div&gt; 
       &lt;/div&gt;
    
How can I achieve this thing in Angular? 

   




Using ng-if as a switch inside ng-repeat?

So I have a situation where I have multiple promise chains of an unknown length. I want some action to run when all the CHAINS have been processed. Is that even possible? Here is an example:

    app.controller(&#39;MainCtrl&#39;, function($scope, $q, $timeout) {
        var one = $q.defer();
        var two = $q.defer();
        var three = $q.defer();
    
        var all = $q.all([one.promise, two.promise, three.promise]);
        all.then(allSuccess);
    
        function success(data) {
            console.log(data);
            return data + &quot;Chained&quot;;
        }
    
        function allSuccess(){
            console.log(&quot;ALL PROMISES RESOLVED&quot;)
        }
        
        one.promise.then(success).then(success);
        two.promise.then(success);
        three.promise.then(success).then(success).then(success);
    
        $timeout(function () {
            one.resolve(&quot;one done&quot;);
        }, Math.random() * 1000);
    
        $timeout(function () {
            two.resolve(&quot;two done&quot;);
        }, Math.random() * 1000);
    
        $timeout(function () {
            three.resolve(&quot;three done&quot;);
        }, Math.random() * 1000);
    });

In this example, I set up a `$q.all()` for promises one, two, and three which will get resolved at some random time. I then add promises onto the ends of one and three. I want the `all` to resolve when all the chains have been resolved. Here is the output when I run this code:

    one done 
    one doneChained
    two done
    three done
    ALL PROMISES RESOLVED
    three doneChained
    three doneChainedChained 

Is there a way to wait for the chains to resolve?

Wait for all promises to resolve

Is there a way to put a condition inside an ng-click?  Here, I want that the form is not submitted if there are any form errors, but then I got a parse exception.


     &lt;input  ng-click=&quot;{{if(profileForm.$valid) updateMyProfile()}}&quot; name=&quot;submit&quot; id=&quot;submit&quot; value=&quot;Save&quot; class=&quot;submit&quot; type=&quot;submit&quot;&gt;


I tried to use ng-disabled but then my validation plugin does not work cause form is never submitted at all, so it is not triggered.

if statement in ng-click

In a test spec, I need to click a button on a web page, and wait for the new page completely loaded.

    emailEl.sendKeys(&#39;jack&#39;);
    passwordEl.sendKeys(&#39;123pwd&#39;);
		    
    btnLoginEl.click();

    // ...Here need to wait for page complete... How?

    ptor.waitForAngular();
    expect(ptor.getCurrentUrl()).toEqual(url + &#39;abc#/efg&#39;);
		    	



Protractor : How to wait for page complete after click a button?

I&#39;m new on protractor, and I&#39;m trying to implement an e2e test.
I don&#39;t know if this is the right way to do this, but...
The page that I want to test is not a full angular page based, so... I&#39;m having some trouble.

On my first spec I have: 

    describe(&#39;should open contact page&#39;, function() {
    var ptor = protractor.getInstance();

    beforeEach(function(){

       var Login = require(&#39;./util/Login&#39;);
       new Login(ptor);
    });

I have created this Login class, but after login I want to open the contact page, but protractor immediately try to find element before the page is fully loaded.

I&#39;ve tried to use:

    browser.driver.wait(function() {

        expect(browser.findElement(by.xpath(&quot;//a[@href=&#39;#/contacts&#39;]&quot;)).isDisplayed());
        ptor.findElement(by.xpath(&quot;//a[@href=&#39;#/contacts&#39;]&quot;)).click();

    });

But it doesn&#39;t work... it always try to find the element before the page loads.
I tried this one too:

    browser.driver.wait(function() {
        expect(ptor.isElementPresent(by.xpath(&quot;//a[@href=&#39;#/contacts&#39;]&quot;)));          
        ptor.findElement(by.xpath(&quot;//a[@href=&#39;#/contacts&#39;]&quot;)).click();
    });

I&#39;m able to do that using `browser.sleep();` but I don&#39;t think that is a good option. Any idea? On my login class I have:

    ptor.ignoreSynchronization = true;

How can I wait for this `@href=&#39;#/contacts` before protractor tries to click on it?


How can I wait for a condition?

I&#39;m trying to test if an element is visible using protractor. Here&#39;s what the element looks like:

    &lt;i class=&quot;icon-spinner icon-spin ng-hide&quot; ng-show=&quot;saving&quot;&gt;&lt;/i&gt;

When in the chrome console, I can use this jQuery selector to test if the element is visible:

    $(&#39;[ng-show=saving].icon-spin&#39;)
    [
    &lt;i class=​&quot;icon-spinner icon-spin ng-hide&quot; ng-show=​&quot;saving&quot;&gt;​&lt;/i&gt;​
    ]
    &gt; $(&#39;[ng-show=saving].icon-spin:visible&#39;)
    []

However, when I try to do the same in protractor, I get this error at runtime:

    InvalidElementStateError: 
    invalid element state: Failed to execute &#39;querySelectorAll&#39; on &#39;Document&#39;: 
    &#39;[ng-show=saving].icon-spin:visible&#39; is not a valid selector.

Why is this not valid? How can I check for visibility using protractor?



How to use protractor to check if an element is visible?

I&#39;m using Protractor to perform some end to end tests, and I&#39;d like to pass in login credentials through the command line instead of storing them in a spec file.  I found one post where someone used `process.argv.forEach`, but how can I store those values and use them in another spec file? I have a file called `login-spec.js` where I&#39;d like to use the command-line arguments. 

Thanks!

How can I use command line arguments in Angularjs Protractor?

Is there a way to print a custom error message when a Jasmine `expect()` fails?

As an example, for end to end testing I have an array of web pages and I use one test to go to each URL and assert an element exists on each page.  I know I can put every `expect()` into a separate test, but I&#39;d rather iterate through the array and log the page URL on failure.  

Content Type	Original Author	Original Content on Stackoverflow
Question	screenm0nkey	View Question on Stackoverflow
Solution 1 - Angularjs	glepretre	View Answer on Stackoverflow

Should I be using Protractor or Karma for my end-to-end testing?

Angularjs Problem Overview

Angularjs Solutions

Solution 1 - Angularjs

how to split the ng-repeat data with three columns using bootstrap

How to fix bower ECMDERR

Attributions