Creating a Cypress boilerplate repository with ScriptKit
Jöel Grimberg
on 31 January 2023
As a Cypress Ambassador I am often trying out new stuff with Cypress, or just fiddling around.
Whenever I want to investigate a problem I want to tackle with Cypress, I will set up a clean git repository with NPM and the first thing I need to install is Cypress. So because I wanted to automate all the boring stuff, to lower the barrier to investigate a problem right away, I started Creating a Cypress Boilerplate repository with ScriptKit.
Because your time is precious, you can choose the list below to quickly navigate to the topics that are of most interest to you.
– About ScriptKit
– About Cypress
– Automate the boring stuff
– The complete Cypress ScriptKit Boilerplate script
– Installing and running
– Conclusion
ScriptKit is an open-source kit to optimise your developer workflow (I just blatantly copied that from their site). It’s a productivity app that enables you to write small scripts in Javascript, activate it with a keyboard shortcut and it will just run your script. If you are a bit familiar with automating the boring stuff, it’s a bit like Alfred or RayCast . The difference for me would be that ScriptKit is more focused on writing your own little scripts yourself. And it’s just free! Although you can always sponsor the guy. Oh and if you are running on Linux (your machine I mean, because we all have Linux Inside, right? 😉 ) then you should definitely sponsor so it will become available a lot faster.
Ok. It’s almost time for Creating a Cypress Boilerplate with ScriptKit.
Cypress is my go-to e2e testing framework because of some nifty features and documentation. I haven’t seen a testing framework where the documentation was so complete, as well as being so to the point. The API is very clear and I do not have to be bothered by all kinds of async stuff. Just check out Cypress.io and find out for yourself!
I have a book in my bookcase, which is called Automate the Boring Stuff which is all about… yes…you’ve guessed it. It’s all about automating stuff that I otherwise would have to do by hand (opening the same files over and over again by clicking 4 or 5 times, or editing some file by opening the editor, going to file -> open -> search for file, click open, etc). I learned that automating stuff by creating scripts that I could then activate with a simple key stroke (or, in my case, put it in my Elgato Streamdeck ) will save me a ton of time.
You can automatically install the script by clicking this link -> Script
This will open your installed ScriptKit and install the script in your ScriptKit environment. It will not automatically run after installing, but when it is installed you can inspect it before triggering the script.
After installing the script, you can now use the configured shortcut, which will ask you for the location to store the to-be created repository, and it will ask you for the NPM author name, which will be added to the package.json within the repository.
Then, it will install Cypress, which can take a bit of time.
When npm is finished with installing Cypress, it will setup the Cypress folder so that the first time I start Cypress I am not asked if I would like a pre-installed testsuite. Cypress looks for a config file and a spec file, so by creating both before starting up Cypress for the first time, I can skip some Cypress Setup screens.
Creating a ScriptKit boilerplate script that will automatically create a git repository with Cypress pre-installed saves me a lot of hassle, and lowers the bar to starting with some new user case that I want to try out. It makes the process hassle-free. Now my mind can be free of the boring stuff and do what it is supposed to do: solving problems.
I am curious to any feedback you have on Creating your own Cypress boilerplate repository with ScriptKit! Or even automating other boring stuff with ScriptKit. Please feel free to drop me a message through LinkedIn [Link] or Twitter @joelgrimberg
Are you interested in a thorough training on using Cypress in your projects, becoming a developer or tester who is able to write great tests, setup an E2E testsuite with Cypress, check out this training: <Link>
Links to some other articles I wrote:
– how I use Gitlab multi-project pipelines for Cypress e2e testing
– Cypress: challenge your fast feedback loop
Link to my latest meetup recording:
– Pro’s / cons using Cypress dashboards