JS testing with Cypress.io

[gchiu]

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.visit('http://hostilefork.com/media/shared/replpad-js/')
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

[hostilefork]

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.

[gchiu]

Since the marionetting etc testing of the replpad has broken, I decided to see if I could use Cypress to the testing instead.

First off I managed to persuade a nice community user n their discord channel to create a skeleton repository with a working GitHub action that all it does is do a simple GET. See her skeleton here.

I cloned it into a Humanistic repo here

The test scripts go into the e2e/ directory and for instance I have my test of the chess app here

Of course you also have to activate GitHub actions when you clone a repo with a GitHub action.

You can also hook up your GitHub actions to the cypress free dashboard. To do this, you need to sign up for a 3 user free account.

You also need to enable the GitHub Cypress App once you get access to the Cypress Dashboard. On the left in the concerterina menu, "Integrations" and select the service you wish to integrate with. GitHub, GitLab and Bitbucket are free. Jira etc are paid options.

You'll get a key which allows you to integrate with your dashboard, and that needs to run from NPX once you have Cypress installed in the workflow. See these lines

And now each time you do a push, you can view the results in the Cypress dashboard, and watch videos even of the tests!

[hostilefork]

This is great! I think @gchiu has found the replacement for the clunky Marionette stuff I was doing in Python.

We get some big wins here:

• It's in JavaScript instead of Python... and since we're already having to deal with JavaScript in the ReplPad it means not bringing one more language into the mix.

• It works with multiple browsers, so we should be able to run across the spectrum and test Chromium and Firefox (I'm not sure how many other browsers I want to worry about, but the Marionette driver was Firefox-specific)

• The dashboard seems to give a really nice presentation of what's going wrong--including video--which replaces the painstaking process of dealing with trying to configure/find/download screenshots.

With things like the CodeMirror integration, I expect the ReplPad to start having a big growth in features...and automated testing needs to be a part of that if we expect any of it to stay working for any amount of time.

Yay Graham!