Want to do automated acceptance test in AngularJS web app? This post introduces you to the basics of building Automated Acceptance Test with AngularJS, Jasmine and Protractor.
During our Certified Scrum Developer training and Boot camp 15 and 16, we had pretty pleasant journeys with AngularJS and technologies around it. Especially the part utilizing Jasmine to create Automated Acceptance tests, which is named “E2E” in AngularJS world. Since the Automated Acceptance test is our constant focus in Perficient GDC, I would like to show how it is simply done with Jasmine and Protractor. This blog will take “angular-seed” (an open source skeleton project available over GitHub) as example to go through the steps you will need to build e2e tests.
Step 1. Go to angular-seed project site https://github.com/angular/angular-seed , download/fork a copy of the source code.
Step 2. Follow the instructions on Readme.md file to install prerequisites like Nodejs and install all the dependencies. (Tips for People who live inside of China, please enable VPN connection in order to download any dependences hosted by google.)
Step 3. Run the following command in your shell or command line window.
Now you get the Chrome browser window opened up and three e2e tests executed successfully like the following screenshot:
Let us take a look at the files under “e2e-tests” folder:
protractor.conf.js (protractor configuration file)
scenarios.js (Where you write your e2e tests)
Instead of a single “scenarios.js” file to include all your acceptance tests (e2e tests), you can create as many “.js” file include your e2e tests. When you execute the “npm run protractor”, all “.js” files with e2e tests will be executed. Please note that the execution order is not guaranteed in this way. You would better to make sure there are no execution dependencies between each “.js” test files.
The following is the default content in the protractor.config.js file. You can see that the baseUrl option is http://localhost:8000/app/ which is web server you started with command “npm start”. The “specs” option shows what kind of files will be recognized as files contains e2e tests. The rest of options are pretty self-explanatory.
Open the scenarios.js file, you will see that (see the following screenshot) test file is comprised multiple “it” blocks which describe the expectations of your application (test case). Inside of the “it” block, there are “commands” and “expectations”. The “commands” tell protractor to do something with the web application. For example: browser.get(‘index.html’) is a command to ask the web application navigate to the “index.html” page. The “expectations” are the assertions to check if certain condition meets with current web application’s state. If you are familiar with xUnit, you can consider “expectations” as assertion statements in xUnit.
It also contains “beforeEach” and “afterEach” blocks which will run before or after each “it” blocks.
Each “it” block will generate a pass for fail result. Here is how it looks in your command line window.
Simple, right? If you want more information on how to locate elements on a webpage, you can dig more into protractor’s api.
http://angular.github.io/protractor/#/api
You will find that locating a web element is relative easy if you are comfortable working with css , xpath or the locators you used in WebDriver.
AngularJS has known reputation of deep learning curve, as you can see that developing an acceptance test (e2e test) is not the case. Our boot camp interns can pick it up quickly and build high quality acceptance tests codes within one week.
References:
https://docs.angularjs.org/guide/e2e-testing
http://ramonvictor.github.io/protractor/slides/#/
“AngularJS has known reputation of deep learning curve”
… a really unexpected statement. If you compare AngularJS to any SPA framwork you must see that it’s by far the one with the steepest (= fastest, …to confuse even more) learning curve.
Therefore no surprise with Protractor.