Set Up Scheduled Tests With TestCafe, Gitlab CI, and Alerts on Slack

Test your deployed React App every hour

Photo by Scott Webb on Unsplash

We have a lot of ground to cover in this tutorial so let’s get straight to it!

Objective

To have a front end test for our website that’s run every hour and alerts us of any failure on Slack.

Creating the React App

Create a new React project withnpx create-react-app periodic-testing.

I made a small adjustment to App.js — it looks like this now:

Writing a Test

To add a test to our application, let’s use TestCafe, an end-to-end testing tool. Since we only need this library for testing, we can add it as a dev-dependency with npm i -D testcafe.

Here’s what our basic test looks like:

To execute the test we need to tell TestCafe which test to run and on which browser. To have a shortcut for this setting, let’s add another script to the package.json like this:

"smoke-test": "testcafe 'chrome' tests/smokeTest.js"

If now we run our application npm run start then run the test npm run smoke-test, we can see that TestCafe opens a new chrome window and tries to press a button that has text “Learn React.” If we make a typo and change the Selector in smokeTest.js to look for Learn Rxact and re-run npm run smoke-test, the test fails.

Let’s keep the test in a failing state so we can figure out how to deal with the fail scenario and start adding a bit more logic to our test. Also, I want to use the same file for tests on two browsers, so, to let the test process know which browser we are on, I’ll edit the…