Test Automation Tutorial

1. Introduction

Goal of the Tutorial

This tutorial aims to familiarize you with the concept of test automation, using Angular applications as a case study. We will explore different test automation techniques and tools applicable to Angular applications, emphasizing their importance in rapid, efficient, and robust software development.

Learning Outcomes

By the end of this tutorial, you should be able to:

1. Understand the concept of test automation and its benefits.
2. Set up and configure a testing environment for Angular applications.
3. Write and run automated tests using Protractor and Jasmine.
4. Debug and fix issues identified during test runs.

Prerequisites

To get the most out of this tutorial, you should have:

1. Basic knowledge of JavaScript and TypeScript.
2. Familiarity with Angular framework.
3. A local installation of Node.js and npm (Node Package Manager).

2. Step-by-Step Guide

Concepts

Test Automation is the use of software to control the execution of tests, compare actual outcomes with predicted outcomes, set up test preconditions, and other test control functions.

Protractor is an end-to-end test framework for Angular and AngularJS applications. It runs tests against your application in a real browser, interacting with it as a user would.

Jasmine is a behavior-driven development framework for testing JavaScript code. It's used for unit testing in Angular applications.

Example

To start with, you need to install Protractor globally using npm:

npm install -g protractor

Update the webdriver-manager (a helper tool to easily get an instance of a Selenium Server running), as follows:

webdriver-manager update

Best Practices and Tips

1. Always keep your testing tools up-to-date.
2. Write clear, concise, and self-explanatory test cases.
3. Use describe and it string arguments for better readability of your tests.
4. Regularly run your test cases and fix failures immediately.

3. Code Examples

Example 1: Basic Protractor Test

Create a new file spec.js and add the following code:

describe('Protractor Demo App', function() {
  it('should have a title', function() {
    browser.get('http://juliemr.github.io/protractor-demo/');

    expect(browser.getTitle()).toEqual('Super Calculator');
  });
});

In this code:

• describe and it syntax comes from the Jasmine framework. browser is a global created by Protractor, used for browser-level commands such as navigation, while describe and it syntax comes from Jasmine.
• browser.get will navigate to the provided URL.
• expect and toEqual are Jasmine's way of making assertions. They will pass if the browser's title is 'Super Calculator'.

Expected Output

The test will pass if the expected title matches the actual title of the page.

4. Summary

This tutorial introduced you to test automation for Angular applications. We learned how to set up a testing environment, write and run tests using Protractor and Jasmine.

Next Steps

To further your knowledge, explore:

1. More complex test cases using Protractor and Jasmine.
2. Other testing tools like Karma, Mocha, etc.
3. Continuous Integration (CI) systems.

Additional Resources

1. Protractor API Docs
2. Jasmine Docs

5. Practice Exercises

Exercise 1

Write a Protractor test to validate that addition of 2 and 2 results in 4 on the 'Super Calculator' app.

Solution

describe('Protractor Demo App', function() {
  it('should add one and two', function() {
    browser.get('http://juliemr.github.io/protractor-demo/');
    element(by.model('first')).sendKeys(2);
    element(by.model('second')).sendKeys(2);
    element(by.id('gobutton')).click();

    expect(element(by.binding('latest')).getText()).
        toEqual('4'); // This is correct
  });
});

In this test, we are interacting with the app's elements to perform an addition operation and then comparing the result with the expected value.

Tips for Further Practice

Try writing tests for other operations (subtraction, multiplication, division) on the 'Super Calculator' app.