We're live-coding on Twitch! Join us!
Javascript End-to-End Testing With Testim: Intro With Examples

Javascript End-to-End Testing With Testim: Intro With Examples

This post is an introductory guide to JavaScript end-to-end testing, using a tool called Testim. End-to-end testing (or E2E Testing, for short) is one of the many types of automated tests that currently exist for web applications. This type of testing occupies a somewhat peculiar place in the whole automated testing scenario. While it’s arguably one of the most important types of testing, it’s also one of the most misunderstood. Due to that, it’s not used as much as it should be. And that results in developers and software organizations missing out on the benefits it can provide.

This post is an attempt to solve that problem. We’ll offer an introductory tutorial to end-to-end testing in JavaScript applications, using Testim as the example tool. We’ll begin by quickly defining end-to-end testing so that you can understand its place in a complete testing strategy.

With that out of the way, we’ll proceed to the practical part of the post. We’ll use the Google Calculator app as an example, so we can perform E2E on it using Testim. Let’s begin.

A Brief Introduction to End-to-End Testing

Also called functional testing, end-to-end testing occupies a peculiar and probably non-enviable position in the whole automated testing scenario. Before we’re able to understand said peculiarity, let’s first define E2E testing.

Defining End-to-End Testing

End-to-end testing is a type of testing that exercises the whole application, from one end (the UI) to the other (the backend and database) to verify whether it behaves as expected. In other words, end-to-end testing, unlike other types of testing such as unit tests, is expected to fully engage external dependencies, such as the database and the filesystem—because the very integrations with those systems should be tested at some point.

End-to-end testing, then, is a form of black-box testing. It’s not concerned with any implementation details of the application it’s testing, but only with how it behaves externally.

E2E tests the application in a way that closely resembles a real user interacting with it. One could argue that E2E testing is the most realistic type of automated test. Because of that, it might be able to detect problems that the other forms of testing cannot, which makes it a crucial type of testing.

The Challenges of End-to-End Testing

The only thing that can compete with the importance of end-to-end testing is the seemingly universal dislike it suffers.

Essential Reading: Learn React from Scratch! (2019 Edition)

E2E tests, when not done correctly, cause issues instead of solving them. They can be hard to create, slow to run, and easy to break, even due to the smallest changes to the codebase. A suite of poorly managed end-to-end tests quickly becomes a maintenance nightmare. It doesn’t take long until the team decides they’re just not worth the effort and stop creating the tests altogether.

Why is end-to-end testing susceptible to these problems? It’s mostly a matter of relying too much on UI details that change a lot, such as names and positions of UI components. When E2E testing tools produce tests that are tightly coupled to these details, the tests are bound to fail often and easily.

Time to Roll up Your Sleeves: Getting Started With Testim

Now it’s time to show you how to get started with Testim so you can see what automated UI testing looks like.

First Steps: Creating an Account and Installing the Testim Browser Extension

Go to https://testim.io, and click on “Start Trial.” You’ll see a message asking you to create an account. You can either choose the quick signup with Google or GitHub or create a new account by providing a business e-mail address and creating a password.

After creating your account and logging in, you’re going to see this:

Click on “Create test” and you’ll be asked to install the Testim extension for the Chrome browser:

Is the extension installed? Good. Now you have all you need to start performing end-to-end testing with Testim.

Creating Your First Test With Testim

On Chrome, go to the address bar, type “calculator” and hit enter. You should see this:

We’ll now create a test for the “+” button. To do that, click on the Testim extension’s icon, as you can see in the following image:

That will open the following menu:

Now, click on “CREATE AUTOMATED TEST.” Doing so will open Testim and attach the current tab to it. Then, go back to the calculator tab. There, you’ll see this:

Now just use the application as you would normally do, and Testim will record your actions. We’ll create a test that verifies the “2 + 2” sum works as intended. Just perform the operation normally and, as soon as you’re done, go back to Testim, which should look like this:

Click on “SAVE” and, when asked, enter a name and description for your test:

Running Your Test

Let’s run your recently created test. Click on the “Automate” button, located on Testim’s left panel:

You’ll see a test list containing only your newly created test:

Select the test, click on its “play” button, and it will run.

After clicking on the button, you’ll be warned not to touch the mouse and keyboard while the tests run:

Click on “OK.” The test will be run in a new Chrome tab, executing exactly what you’ve recorded. After the test finishes, the window will be closed. If you go back to the Testim tab, you should see the test’s result:

Good news—you’ve just run your first Testim test. Bad news: it didn’t really test anything. Let’s see why and how to fix it.

Adding a Verification

The test you’ve just created lacks a verification. In other words, the test must verify whether two plus two is really four. Without that, it doesn’t test anything.

Click on the “Automate” button again, which will take you back to the test listing. Click on the test name so you can edit it:

Our test has six steps. We’re now adding an additional step—the validation. Click on the button with the “plus” sign, located just after the last step. This is what you’re going to see:

Click on the “Validations” option (the one with the check sign), and you’ll see this:

Then, click on “Validate element text.” You’ll be taken back to the calculator, where you should click on the result field:

Going back to Testim, you’ll see that the test has an extra step now:

Hover over the new step and click on the engine icon to show the properties:

Now it’s just a matter of editing the “Expected value” field, setting it to ‘4’. After doing that, click on the “SAVE” button again. You’ll see a box prompting you for a message explaining your change. Type “Add validation step” and click on OK:

Now you to have set the “Expected value” field to 4 and then click on “SAVE” again. When you’re prompted for a message, enter the “Add validation step.”

We’re done adding a validation phase to our test. If we run it again, it will still pass. But this time, it’s going to be doing something useful, thanks to the verification step we’ve just added to it.

Conclusion

End-to-end testing is incredibly important for web applications. It’s the type of testing that most closely resembles an actual user interacting with the application. Besides that, E2E testing deliberately engages with external dependencies. So, end-to-end testing is able to detect problems that other types of testing usually don’t detect,

Unfortunately, E2E testing gets a bad rap. That’s due to issues being caused by traditional testing tools that rely too much on volatile implementation details on interfaces.

This post tried to remedy E2E’s reputation. It covered the definitions of this type of testing and finished with an example of end-to-end testing using Testim, which is a tool that employs AI to create test suites that are robust, reliable and self-healing.

This content is sponsored via Syndicate Ads.