JavaScript Testing: E2e with Protractor and User Experience (QA the UX)

Jan 6th 2017 6:25pm

Small summary: JavaScript Testing: E2e with Protractor and User Experience (QA the UX)


Why Protractor as a testing framework?

Another tool for automation? Well google developed a tool for their framework. They developed angular for UI, and they developed protractor to test their UI library. This was basically another add-on. Most of the angular developers are not quite familiar with this protractor tool, or aware on how powerful protractor can be. Testing with protractor can automate the e2e testing to ultimate level. You can basically do anything. There are few gaps(of course), and there are some issues that might need solving($timeout vs $interval), but overall it's a very stable tool.
Protractor is an End-To-End* testing framework built specially for AngularJS applications.

What e2e is? What can we do with this e2e testing? How is e2e improving our life or how is e2e makes our life as QA easier? Well..

-e2e tests will focus on the user experience. (is that border gray? Can I input numbers in the email field?)
-e2e testing will interact with all the application's stack.(so, can I click that? Is that element displayed?)
-e2e tests runs in browser(so you can see where it cracks, and follow the business logic while testing)

What Unit Testing is?
-unit testing will interact with a single isolated unit a single time and a single isolated incident at a time..
-unit test will focus on the feature functionality. (code functionality)
-unit test will check that a user will have the permission for a single action. for example. can this user update this database?
-unit tests will run in console. (this means that user testings are faster)

The End to end user will perform the whole operation. Including any kind of messages that are being displayed. Any kind of redirects in the web application, anything beyond this lines where the user can make the change.

Protractor uses Jasmine so you can use it for Unit testing along with your E2E tests.
It's based on WebDriverJS, and the developers already got experience with these technology. Over WebDriverJS were added some more selectors, some extra css and configurations.

Protractor fixes waiting times for rendering DOM, rendering pages or rendering elements. Usually, in a non-angular webpage, where there are no $http requests, $timeouts or $intervals the waiting times are not so important. But, with angular, where the waiting time is improved, the refresh of the webpage (client rendering) is not necessarily anymore. The main point of selectors that them rely on data bound to element instead of HTML attribute.

Few selectors:
-binding
-exactBinding
-model
-repeater
-exactRepeater
-css

The selectors provided by protractor are not magically help you find all the selectors, but it surely makes it easier for you to find them.

Also, you can use gulp, in order to auto-run test, which is also makes it easier for you to be confident that your test runs.

Test design and basic abstractions for the designs

The most important aspect of the testing (that needs to be tested) in Quality Assurance domain is the Uses Experience. UX. There. I said it. There are people that do not agree, there are people that say otherwise. For every opinion there's an argument. This one is mine. :)

You need to analyze your results, you need to assure yourself that some of your tests passed and some tests did not passed(and to make sure that the application meets the release requirements.). Because of Jasmine you can use the Custom Reporter and log the results for further display and documentation. Make sure that you use a timestamps on your reports.

You need to make sure that you run your test for different browsers, different browser versions.
You can log the test execution time and output it on the report for each browser type and other environment variable for QA.
AngularJS is well documented and protractor is recommended to for new Projects as much as it's recommended for old projects.

For Protractor reports, currently there is no fully reporter. I use JavaScript for custom reports. Data outputs directly in reports, for example.

Before starting, you should have a really basic understanding with Angular. For example, you would need to know how ng-binding works, or ng-repaet ng-model that's more than enough. You can get more familiar with angular with any courses like

AngularJS: Get started
AngularJS: Fundamentals
Testing client side with Javascript
Testing AngularJS from Scratch
Testing with WeDriver and Protractor from scratch.
Any of these courses will help you get a deeper understanding over the Angular Framework.

If you can write basic tests with other frameworks like Jasmine or Mocha you're going to write tests in Protractor just fine.

The most difficult with e2e tests is understanding the application’s business logic.

*e2e = end to end

Created by Fabian Clain