Runnerty and Cypress to check that your app is online

Álvaro A. Quirós
Runnerty
Published in
4 min readApr 21, 2021
Paradise beach in Thailand

What are we going to read in this article?

Let’s see how we can develop some tests with Cypress and plan them with Runnerty to check the status of our app or web.

Do you want to read it in Spanish?

For those who don’t know it, Runnerty, is a “low code” technology that allows to integrate and automate online & offline applications, systems infrastructure and services with third parties in a simple, fast and secure way, creating workflows and offering a new way to develop.

Cypress diagram

If you want to know a little more about why you should try it, here you can read this post 👀.

Show me the code!

In Cypress website we can find very useful documentation and case studies, I leave a link for you to take a look, very interesting.

We are going to run it directly from a Runnerty project, to get it ready and scheduled to launch every X hours against our production website 😎.

Setup

First of all, let’s create the Runnerty project

npx runnerty-cli new runnerty-cypress-test

🔎 Note: Before continuing, I always link my Runnerty projects to the platform, to manage it from there.

Just go to Runnerty Platform, create the project and copy the API key generated in our config.json file, it’s very simple (and free, of course 😉).

Once the project is created, we use the Runnerty CLI to add Cypress to it:

From within our project we execute:

npx runnerty-cli add @runnerty/executor-cypress

This will have prepared our project to start using Cypress and a sample Runnerty Workflow with the sample processes ready to test.

It will also have created a script in our package.json to run Cypress.

Our tests are in the default folder that Cypress creates for its tests. Inside we will have the 2 tests created:

./cypress/integration/sample-a.spec.js

./cypress/integration/sample-a.spec.js

These tests, as you can see, are extremely simple, even if we are not very used to them, we will be able to know what they do:

Cypress test code

The “only” thing these tests do is connect to app.runnerty.io, a variable that, by the way, is defined in the cypress.json file and in the first block checks the page has an ‘h1’ with the text “Log in” and a second case that after typing in the username and password field intentionally fails with a

expect(true)to.equal(false);

We can run our Cypress tests directly with the command:

npm run cypress:open

We will see 2 example tests from the Cypress console

Cypress console

When we launch them from this console, we will be able to see their execution:

Scheduling tests with Runnerty

🔎 Note: For those who are not familiar with the Runnerty syntax, I recommend this article.

We are “simply” going to take advantage of these tests and put them in Runnerty’s planning. The Runnerty CLI has already created an example plan plan_executor-cypress_sample.json with 2 processes to execute the 2 tests, we only have to copy and paste them in our plan.json.

We are also going to change the scheduler to run every hour, no need to run all tests every minute 😉.

🤔 Remember to connect the project to Runnerty Platform so you can run the chain from there and see what happened.

All we have to do now is to start Runnerty 🎉

npm start

Now we can go to Runnerty Platform, select our project, go to the chain list and force our tests to be launched (so we don’t wait for the next hour for them to run).

And we will see how our tests are executed every hour or every time we launch them manually.

If we go into detail, we will see that the first test has passed correctly but the second has failed (intentionally).

TLDR;

With Runnerty we can automate our Cypress tests to have control at all times that our platform has no problem.

I leave this repo that you download it and with a npm start you see that every 5 min you have runnerty.io running 🚀.

https://github.com/alo/runnerty-cypress

What ‘s next?

I encourage you to take a look at it and if you find it interesting you can support us on Github ⭐️ or send us a message on Twitter.

--

--

Álvaro A. Quirós
Runnerty

Runnerty CEO | Frontend Lead at @CodertyStudio - Organizer of @ngSpain, @AngularAlmeria & @AlmeriaJS!