End-to-end testing is a methodology to test that an application is working as expected from start to finish. It is performed once all the components of a given system have been integrated to ensure that the right information is passed between all of them.

The entire application is tested in a scenario as close to production as possible. That means with the same configuration (or very similar) for networks, databases, services, etc. that will be set up in the live environment.

What E2E framework will be using?

The E2E test framework that we are going to use as part of this tutorial is Protractor.

Even though it says that it is a framework for Angular applications, it can also be used for non-Angular ones, we will see how. Do not worry for now. Using Protractor to test an Angular application will allow you to make use of Angular specific elements or directives.

Protractor has built-in automatic and smart waiting to execute the next step only when the browser has finished any pending tasks. This will save lines of codes and headaches when having to wait for certain conditions to be met before executing the steps. Coding active waits makes the tests take longer than needed. To avoid this, Protractor will be a great ally.

What language will be using?

Protractor supports two Behaviour Driven Development (BDD) frameworks: Jasmine and Mocha. Both of them are based on JavaScript and NodeJS and provide the syntax, scaffolding, and reporting tools we will use to write and manage the tests.

Our selection, in this case, will be Jasmine version 2, which fully integrates with Protractor. The syntax of the tests cases will be such that it will feel like we are reading and writing plain English instead of complicated test cases.

What do I need?

There is not much that you need to start playing around with E2E testing and especially with Protractor. If you are familiar with basic HTML, CSS and some JavaScript and NodeJS, you have a lot covered. We will be building the test suites step by step with clear explanations, so don’t worry if you don’t.

Because we are going to be using what is called the Page Object Model (POM) approach, it is very convenient that you are familiar with CSS selectors. I recommend you to watch this quick 5 min video tutorial from W3Schools to familiarise yourself with the concept of CSS selectors.

You will also need a text editor or IDE to develop the tests. I will be using Visual Studio Code throughout this tutorial, so I would recommend you to install it before we start.

That’s all for now. I hope to see soon in the next post.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.