Autoplay



Transcripted Summary

In this chapter, we will get an introduction to TestCafe.


# What we will cover during this chapter

In this chapter, we will start by talking about:

  • Introduction to end-to-end testing

  • How TestCafe works

  • Client-server architecture for TestCafe

  • The difference between TestCafe Studio and Open-source TestCafe

  • TestCafe roadmap


# Introduction to E2E testing

End-to-end testing is a technique used to test whether the flow of an application right from start to finish is behaving as expected.

End-to-end tests simulate real user scenarios - essentially, testing how a real user would use the application.

The purpose of performing end-to-end testing is to identify system dependencies and to ensure that data integrity is maintained between various system components and systems.

One example for a real case scenario is for an e-commerce website:

  1. Opening the application or the application under test in a browser

  2. Searching for a product

  3. Click on the product name to view the product details

  4. Add the product in the cart

  5. Opening the checkout page

  6. Log in with existing user or register with a new user

  7. Ensuring that the data or the order is successfully created

This usually refers to horizontal end-to-end tests. This type of end-to-end test is meant to ensure that the user can functionally perform the main activities of the application.

End-to-end tests are used to verify our system or the entire application is working correctly and prevent bugs and regression to happen.


# How TestCafe works

TestCafe contains the following components:

  • Client-server

  • TestCafe API

  • Page proxying

  • Isolated tests

The idea that defined TestCafe architecture was that we don't really need an external driver to run end-to-end tests in the browser.

Instead, the page can run all the testing scripts that emulate user actions.



This would allow for true cross-browser and the cross-platform tests that run on any device that has a modern net browser.

This vision developed into the following design concepts.

TestCafe uses a URL rewriting proxy instead of WebDriver with Selenium, for example.

This proxy injects the driver script that emulates user actions into a test page.

This way, TestCafe can do everything required for the testing.

It can emulate user actions, authentication, run its own script, and for the tested page - look like a real user is interacting with their website.

It doesn't experience any direct scripts interface.

Here's a brief schema of what the proxy does.

  1. You may notice that when you run TestCafe tests, the browser address bar shows the URL doesn't belong to your website, this website - http://10.0.75.1, because TestCafe proxies the test pages.



  1. Then, TestCafe reverse proxy runs locally on your computer. It's enabled TestCafe to add automation and scripts.



  1. When TestCafe proxies the test pages, it injects automation scripts and then rewrites all the URLs inside to point to the proxy.



  1. When the browser refers to these new URLs, the original resources are also proxied and modified in the same way, to let automation continue easily.

TestCafe also works as a browser API to automate scripts from the rest of the page code.

The proxy mechanism ensures that the page appears to be hosted at the original URL, even to the test code.

This is why you can use your website URL in the test, and disregard the URL you see in the browser's address bar.


What are the benefits of using the server-side?

With the server-side, you can:

  • Prepare a database or launch a web service from the tests

  • You can access the server's file system to read the data or check the uploaded files

  • Tests can use all Node.js features and external Node.js modules

  • Tests became faster and more stable as test logic is now separated from the automation scripts

  • Test code can't interrupt the page execution, because TestCafe doesn't inject user-written code

  • The latest syntax features like async/await are supported also with TestCafe

Test code uses TestCafe API methods to interact with the tested page. The following are the three main types of interaction:

  • Select elements

  • Perform actions

  • Execute assertions

One of the most important features with TestCafe is that TestCafe isolates each test run from subsequent tests and tests that run in parallel.

After a test is completed, TestCafe resets the browser state:

  • Deletes cookies

  • Clear local and session storages

  • Reloads the tested page


# TestCafe Studio vs Open-source TestCafe

Now, we need to know one important information about what's the difference between Open-source TestCafe and TestCafe Studio, because we have two products.

One that we are talking about in this course, which is Open-source TestCafe, and TestCafe Studio.

TestCafe Studio is a cross-platform IDE for end-to-end testing or end-to-end web testing. It works on Windows, macOS, and Linux, and in every popular desktop or mobile browser.

TestCafe has a lot of features like:

  • Visual test recorder

  • Cross-browser testing

  • Full set of assertions

  • Built-in weight mechanisms

  • Flexible run configurations

  • Comprehensive reports with powerful code editor


# TestCafe Roadmap

TestCafe Roadmap includes the most important features planned for the upcoming releases.

On this page, you can find all the TestCafe features, the upcoming or the in-progress features, and also check some more details about these features and what the next feature that we implemented with TestCafe.


# Summary

So, in the end, TestCafe is a self-sufficient, end-to-end testing solution with advanced automation and robust built-in stability mechanisms.

TestCafe officially supports all major browsers and platforms and it's designed to run in the most modern browsers beyond officially supported.



Resources