Protractor only tests AngularJS apps

Perform end-to-end tests in Angular projects with CodeceptJS

Angular is built with a framework for end-to-end tests (E2E), namely Protractor. Although Protractor delivers decent results in and of itself, it can often be difficult for project staff who have nothing to do with technical development to understand the specific events and results of these tests. Sure, you could sit down as a developer in theory and simply write the test yourself in understandable words - if this task weren't tedious and inefficient and therefore completely unrealistic in most people's everyday work.

Fortunately, at some point CodeceptJS came along to make our lives easier. CodeceptJS is also an E2E test framework that offers more extensive APIs than Protractor. CodeceptJS includes "scenario-driven" and "behavior-driven" APIs that are much easier for non-experts to understand. Writing a test for specific functions / scenarios also takes significantly less time. For these reasons, CodeceptJS has been the framework of choice in the buzzwoo development team for some time when it comes to E2E tests of Angular projects.

In this post, we're going to create a new Angular project with Angular CLI for illustrative purposes. Then we will integrate CodeceptJS into our project and use the framework for our E2E tests.

This article is based on the Angular CLI version 1.5.5, Angular Framework version 5.0.5 and CodeceptJS version 1.0.3. A Companion Git Repo for this post can be found on GitHub at armno / angular-e2e-codeceptjs-example.
 

Step 1: Create a new Angular project with Angular CLI

We use the command to create a new Angular project. Then we can enter the command $ ng e2e to run E2E tests.

Step 2: Install CodeceptJS

The official manual recommends installing CodeceptJS globally.

However, I personally prefer that everything can be found compactly in my specific project, which is why I usually install CodeceptJS locally:

Then I create an npm script in package.json and use the command npm run codeceptjs.

The command run –steps starts the tests, with each step being documented in the console.

Step 3: Create a .config file for CodeceptJS

Now we can use npm run codeceptjs to generate a .config file. This command will ask for some details which we will then have to enter in the file. For most of them we can just use the default values. However, there are also a few values ​​that we have to enter individually:

Step 3: Create a .config file for CodeceptJS

Now we can use npm run codeceptjs to generate a .config file. This command will ask for a few details that we will then need to add to the file. For most of them we can just use the default values. However, there are also a few values ​​that we have to enter individually:

? What helpers do you want to use?Protractor
? [Protractor] Base url of site to be testedhttp: // localhost: 4200
? [Protractor] Root element of AngularJS applicationapp-root

  • Select Protractor as a tool for CodeceptJS.
  • Change the Default Base URL option from http: // localhost to http: // localhost: 4200, as we are using this address for the local development server.
  • Change the root element from body to app-root.

Attention: The options to be selected are individual and depend on the specific settings in your Angular project!

The command then creates the .config file codecept.json in the root directory of the project.

Step 4: write the first test

Now we can use $ npm run codeceptjs generate: test (or $ npm run codeceptjs gt) to generate a test file. The file name and the function name that are to be tested are queried here. In our case, we want to test the homepage of our app, so we enter home as the file name and Home Page as the function name.

Now we can open the file and write our first test. In this case we want to ensure that the greeting “Welcome to our app!” Is displayed on the homepage together with the Angular logo. Here is the corresponding test code:

So that we can do the first test, we need to have a running Selenium server and a driver manager for our browser. We can use the Binary Manager webdriver-manager, which is already pre-installed in Protractor, to start the Selenium server and the Browser Driver Manager to be able to use Chrome with the Selenium server.

Then we create another npm script in the package.json file:

Then we execute the command $ npm run wd: start in the terminal. You will then see loads of logs in the terminal. However, if we can read the message “Selenium Server is up and running”, then everything is fine. We have to leave this terminal window open.

Now we open another terminal window and execute the command to start the local development server of our app at http: // localhost: 4200.

Finally, we open a final terminal window and execute the command $ npm run codeceptjs, which starts the E2E test with CodeceptJS. This will open a new Chrome window, the tests will be performed and the test results will then be displayed in the terminal.

Now we have successfully created CodeceptJS as an E2E test framework for an Angular 2+ project, which means that we have a lot more APIs available that we can use to write our tests. Also, if you are running your own tests, don't forget to check the documentation page on the CodeceptJS website.

Update: If you enjoyed this article, please have a look at the second part: "Generating visually appealing end-to-end test reports for Angular with Mochawesome".

Now there is only one thing left to say, namely: Happy testing !? ?

And if this approach seems too complicated for your own project, we'd be happy to do the work for you! We are looking forward to your message.