AngularJS, Protractor, Visual Studio! SUPER DRY!!

I AM A .NET Developer. Visual Studio is the trench that I dig every day. AngularJS is the primary weapon that I use in the frontend. I want to have Protractor as my first aid kit which doesn’t play nicely without Node.js. But it’s all right, I can tame it!

Update: you might be interested in this sample project to dig in quickly. It contains a tiny AngularJS app and a few test cases.

Let’s shave the yak

Do you know that Node.js Project is actually a Node.js flavoured ASP.NET project?

  • Update selenium standalone server
    .bin\webdriver-manager update

  • Start selenium standalone server
    .bin\webdriver-manager start

  • Run test specs
    .bin\protractor protractor.conf.js

Debugging

  • Include node_modules\protractor\lib\cli.js into project and Set it as Node.js Startup File
  • In project properties, configure Script arguments as protractor.conf.js

Tools

  • taskkill /f /t /im chromedriver.exe
    Sometimes you are stuck while debugging because previous chromedriver session was not terminated properly. Use this to kill all chromdrivers that lurks around.

  • Testing out Protractor interactively
    The tool provides a REPL-ish way to test selector.
    It helps to test while writing the test. Instead of test after you finish the test spec.

Other things help you get started

Advertisements

12 thoughts on “AngularJS, Protractor, Visual Studio! SUPER DRY!!

  1. Very impressed with your example and thanks for your effort. It works with Node.js Tools for Visual Studio Beta as well :) . I was about to go with the Node.js command line all the way for using protractor when I came accross your blog post.

    • I haven’t done that tho, it shouldn’t be too hard. You can install node in the CI server. Install protractor and selenium globally. Then it’s just a matter to make a msbuild command to kick off the e2e tests.

  2. I had a problem, i believe this is a structure issue.

    After doing all this and running the project, i got the following message: Error: more than one config file specified

    Any clue of how i solve this?

    • Sorry, I don’t know what’s the issue. But probably you are quite right, seems it’s a configuration issue of the project. Do a bit search googling see if anything helpful pops up?

      • Thanks, i solve it by setting the project properties properly. But i have another question for you if you dont mind.

        Have you found any relevant limitations in using protractor with visual studio? Apparently, in visual studio we don’t have code complete, right?

    • It’s required if you want to debug the code in Visual Studio.
      You can run jasmine unit test via Resharper’s test runner. Sorry, but I don’t know if it works in Test Explorer extensions.
      Karma is not necessary. You can define the type of the web driver you want to use in protractor configuration file.

  3. Hi Mike.
    Great stuff!

    I am confused about a couple of things as to how your sample solution actually works.

    Your NodeConsoleApp1 is defined as the single startup project, so what exactly is launching the NancyApplication1?

    Second, how does protractor ‘know’ that the baseUrl is http://localhost:12116 (defined in NancyApplication1 project properties)?. This is nowhere in your configuration files.

    Thanks!

    • Thanks Matthew, Glad you found it interesting. It is a bit confusing to see the nodejs project is set as the startup project. Here is the correct workflow,
      1. start the Nancy web app
      2. run the protractor through CLI

      The web app is served as a testing target, so you need to start the app as the 1st step. Then, according to the description I have put in the MSDN sample download page. You need kick off the protractor process via in the shell environment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s