E2E Testing In Angular 2 From Zero To Hero (Final Part)

Dear future Masters of Angular 2 E2E Testing.
This is it. At the end of this lesson you will finally have every tools to create functional tests for your Angular 2 applications. No more excuses: You’ve got the power!

We will first get familiar with Locators then we will see how awesome Page Objects can be, followed by how to handle asynchronousness and finally the easiest part that is triggering Actions.

If you don’t have the basics right, head there otherwise you will be a little bit lost.

 

Locators

One if not the most important thing in E2E testing is finding the elements that you want to test in your view. Most of the time, you will ask yourself the question “why can’t I find this **** element?” followed by a “oooohhhhh”.

You have many ways to do this. Most of them depend of your application. In order to get your elements, you will use a range of Locators.

Most of the time, you can find your elements by:

  • Class name.
  • Id.
  • Model.
  • Binding.

For the upcoming tests, we will use this template.html:

Let’s focus on “nested-class” and “nested-id”.
By Class: 

We grab here our element using element(by.css(selector)) then we test if it’s present or not.

By Id:

We grab here our element using element(by.id(elem-id)) then we test if it’s present or not.

The following locators a very useful in AngularJS but not yet implemented in Angular 2 so just keep them on the side for now.
By Model:

By Bindings:

In order to debug your tests, you can just add “browser.pause()” in your test, you will be able to run all the previous instructions and stop wherever you want.

Once it reaches your pause, you will have a screen similar to this one:

Angular 2 E2E pauseAs you can see in this image, in order to get into the driver’s seat you need to type repl.
Now let’s say you don’t have any test and you just want to play around with Protractor.

You can just type in your terminal:

protractor --elementExplorer

If you have some issues with your path, you can type:

./node_modules/protractor/bin/elementexplorer.js

No need to type repl this time, just use the browser object and you are ready to sail!

Page Objects

What if you have tests that share the same scenario? Are you going to copy paste your code everywhere? What if this scenario changes? Now you have to go through every files and make the modifications.

That’s where Pages Objects become very useful. Write Once, Share Everywhere!

A Page Object is an object that contains the elements and scenarios concerning a page.

First a very simple Page Object:

Then we use it in our test:

We import the Page Object, create an instance then use it’s property.

Asynchronous Adventures

Now my friends, you can access any elements on your page! I mean almost :).

There will be some special cases.

If you were (un)lucky enough to work with jQuery, you must be familiar with document.ready().

By the asynchronous nature of JavaScript, there will be cases where you will try to access an element before it has yet appeared on the page.
In order to handle that, you will have to use a feature of Protractor in order to wait for your element to be ready before looking for it.

Here is an example displaying a button after a timeout expiration.

First the class that contains the timeout:

Then the template.html.

We have here a button that will trigger our timeout, once the timeout expires, the text is displayed.

Here are the tests.

We find our button, click on it, try to find our text BUT we expect it not to be present.

And here is the way we handle this case ;).

We use “browser.wait” combined with “browser.isElementPresent” testing our Locator. After 5 seconds the rest of the code is executed. Don’t forget to put a timer here otherwise your tests will be blocked forever!

So if one of your element is supposed to be here but you can’t get it, your gut instinct should tell you to remember what you have just read here.

Actions

Now that you have your precious element, you have done 90% of the work!

Angular 2 E2E elment found

If you can’t find it, it’s either that your application doesn’t work as it should (that’s why we do tests) or you need to get better at testing and spend less time on Pokemon GO hunting dratinis near a river at 1am (we have all been there …). 

Let’s keep going with the actions that you can use on an element. Here they are:

  • elem.sendKeys: Type something in an input.
  • elem.click: Click.
  • elem.clear: Erase everything in an input.
  • elem.getAttribute(‘attrName’): Return a specific attribute of the element.
  • elem.submit: Submit a form.
  • elem.isPresent: Test if the element is present.

We are using Protractor which relies on WebDriver. If you need more fancy actions, you can have a look at what is available here.

Let’s test some of them.

For the template.html:

We will play a bit with the text input. Quick quiz, what does this test do (don’t read the description)?

Solution: We get our input, type “Some text” inside, test that we got the value set, clear it and finally test that the value is empty.

Subscribe to my mailing list to get access to a Free 7-day Ionic 3 introduction email course!
100% Privacy. I'll never spam you!

Legitimately we can ask ourself what is the best way to trigger actions? This link here shows one of the flaw of using JavaScript instead of WebDriver.
Sure writing in JavaScript is way more compact but it comes with some risks!

You can do anything that you want with an element. The best way to test it is to use the matchers that are available. Why? Because they are elegant and close to the human language, example:

Conclusion

This was the final post of this series, right now you have 90% of the skills to test your Angular 2 applications. You will get the other 10% by experience. Remember, first getting your elements using Locators, then putting the one that might be replicated in a Page Object, if you can’t find your element and you are sure that it is here, it might be might because it hasn’t appeared yet and you need to handle the asynchronousness. Finally test the **** out of your elements with Actions.

 

6 Comments

  1. Craig Doremus Craig Doremus
    September 7, 2016    

    How much difference is there between a Protractor test in AngularJS and Angular 2?

    • Matthieu Drula Matthieu Drula
      September 7, 2016    

      Not that much, which is great for maintenance. The only ‘bad’ point is that some functionalities haven’t yet migrated to Angular 2.

      • Alen Alen
        March 1, 2017    

        How do you debug your Angular 2 tests?

        • Matthieu Drula Matthieu Drula
          March 7, 2017    

          Step by step, always using iit, one test at a time,
          Growl is good for notifications too.

  2. April 14, 2017    

    Well, there is only a first part and the last part? I cannot find the articles that should be between 🙁

    • Matthieu Drula Matthieu Drula
      April 14, 2017    

      Yep only one and two.

Leave a Reply

Your email address will not be published. Required fields are marked *

2 Shares