Automate screen recordings for tutorials and feature showcases

[vincerubinetti]

I'm making a webapp where we want to have a handful of gifs showing certain workflows that you can do in the app. These will serve as visual tutorials of how to use the app, and as advertising to show what features the app has.

Naturally, we could just do manual screen recordings, but then whenever we change the appearance or layout of the app, all of the gifs have to be re-recorded. I thought it would be cool if we could use Cypress to program a sequence of mouse and keyboard inputs and record it automatically.

Is this possible? It seems like it should mostly be possible. The only problem I see is that the cursor can't be shown in the videos?

I know this is outside of the scope of what Cypress is intended to do. But it seems appropriate that I try to do it in Cypress first, since I already have it installed and set up, and since it already seems to contain much/most of the functionality needed to accomplish this.

As a side question, does anyone know of any tools specifically designed to do this? I can't find any on Google.

[vincerubinetti]

There is a tool called robot.js that can actually move the OS's mouse. I wonder if it would work when called from a Cypress test. But even if it did, surely it wouldn't work if you were running Cypress in headless mode.

Edit: nut.js is a better alternative to robot.js that I just found.

Another idea is to draw and move/command a fake mouse, a little cursor <img> actually in the DOM. There must be a library to do this. Think about when you visit a new site, and it gives you a "tutorial" by moving a fake mouse around and clicking things.

Maybe something like this:
https://github.com/miaskiewicz/JS-Virtual-Pointer