JS testing with Cypress.io

I will eventually have to port my Red GUI database front end and so I was looking for testing tools. I came across https://cypress.io which seems to be fully featured though it may be more demanding of JS knowledge than I have.

Anyway, here's a short script to open up the replpad, and start the chess demo though I had to increase the default timeout from 4 to 5 seconds

describe('Test the replpad', () => {
it('Visits Replpad', () => {
cy.get('.input').type('do <chess>{enter}')

So, it opens a browser instance to the replpad, waits until loading is complete, and then waits until the dom has the .input element present. It then types the chess command. The chess board then pops up.

Here's a quick tutorial on how to select elements.

Installation is just simply

npm install cypress --save-dev

but of course on Windows, you'll need to install node.js

And there's information on how to use with GitHub actions


Looking at how Cypress works, it is essentially a proxy server.

So when you ask for http://hostilefork.com/media/shared/replpad-js, it fires up a browser that is actually directed at http://localhost:8000/cypress/media/shared/replpad-js (or whatever).

What the proxy does is add code related to testing. So by definition, it doesn't do anything we couldn't do ourselves by adding JavaScript into the page.

This means it can't be used to test any "meta" things--like how the page reacts to opening a new browser tab, or interacting across IFRAMEs.

But presumably (?) their injected JavaScript is tricky and tailored, for transmitting keydowns and keyups in a somewhat "realistic" way to mimic what actually happens in browsers...and it may wind up being faster and simpler to use.

My current technique talks to the Firefox webdriver directly (without using the Selenium layer, that abstracts all the webdrivers for all the browsers). When I made it I figured it was better than nothing, and it has been so...but it is certainly slower than we'd like.

It's certainly worth a shot to see if this is a better answer that covers the cases we'd be interested in.

1 Like