The project we are going to test

A React app created with create-react-app and material-ui:

Home page with an enter button

Posts page with a list of links

Article page with content of a post

Add page to post a new article

The site is deployed on xke-introduction-testcafe.surge.sh

The tests we want

First scenario:

As a user, when I’m on the home page, I can enter the app and links to articles. If I click on a link, I can see the article page.

Second scenario:

As a user, from the home page, I can access the add page with a form in order to post a new article. I can post my article.

We will enable the live mode to watch for changes with the L option:

testcafe chrome e2e/**/* -L

Let’s write our first scenario skeleton

e2e/index.js

The result in our terminal:

Live mode is enabled.

TestCafe now watches source files and reruns

the tests once the changes are saved.



You can use the following keys in the terminal:

'Ctrl+S' - stops the test run;

'Ctrl+R' - restarts the test run;

'Ctrl+W' - enables/disables watching files;

'Ctrl+C' - quits live mode and closes the browsers. Watching the following files:

/Users/proustibat/workspace/xebia/xke-introduction-testcafe/e2e/index.js

Running tests in:

- Chrome 72.0.3626 / Mac OS X 10.13.6 Navigation

✓ Access to a specific article from the home page 1 passed (0s)

Querying elements with Selector

Selector is a function that identifies a webpage element in the test. The selector API provides methods and properties to select elements on the page and get their state.

TestCafe uses standard CSS selectors to locate elements. It’s like when you use document.querySelector in JS (learn more by reading the documentation).

In our test, we import Selector then we need to select the start button on our home page:

Actions

Test API provides a set of actions that enable you to interact with the webpage.

Actions are implemented as methods in the test controller object and can be chained.

Multiple actions are available: Click, Right Click, Double Click, Drag Element, Hover, Take Screenshot, Navigate, Press Key, Select Text, Type Text, Upload, Resize Window (read the documentation to learn more).

Observing page state

TestCafe allows you to observe the page state via:

- Selector used to get direct access to DOM elements

- ClientFunction used to obtain arbitrary data from the client side.

For example in our test, once we click on the button, we should be on the posts page, so we can access the title page and log its innerText as follows:

Assertions

We now need assertions to check data or behaviors. The test controller provides an expect function that should check the result of performed actions.

The following assertion methods are available: Deep Equal, Not Deep Equal, Ok, Not Ok, Contains, Not Contains, Type of, Not Type of, Greater than, Greater than or Equal to, Less than, Less than or Equal to, Within, Not Within, Match, Not Match.

In our test, we want to check that the title is “Posts Page”:

Finishing our tests

Now we learned the 4 main concepts of TestCafe: selectors, page state, actions and assertions. So we can complete our first test:

What about our second test

Remember for our second test we want to start from the home page, enter the site by clicking the start button (like the first part of our first test). Then we want to verify the users navigate to the form page when they click on the add button. Finally they should be able to fill the form and submit it.

So the beginning of our test is the same as the first, and we need to do what is written in comments:

Let’s begin with the well known part!

This is not new now, we are able to get elements, have them undergo some actions then check some other elements exist on the page: