I work on many React applications and I like to have realistic tests for these apps. I am a fan of Cypress for End-to-End testing and I think its a great tool to use to give yourself a certain level of confidence in the UI features you are building. It by no means covers everything but it does cover enough to make it worthwhile in your codebase.
I also believe in removing as much ‘friction’ as possible from your day to day workflow. The smoother a process is, the more likely you are to do it. There are a few ‘friction’ moments I have when creating tests for cypress and hence the need for this article.
I also believe in removing as much ‘friction’ as possible from your day to day workflow because the smoother a process is, the more likely you are to do it.
My most common problem is remembering the specific syntax for testing certain UI feature such as working in tables, select fields, input fields, menus, toggles etc. In this article I will share a few snippets that can be useful in these situations. (I may well write a VScode Extension at some point with these snippets but let’s see if I ever get to that. If so I will update this article with the link).
Below you will find a variety of snippets for less usual cypress commands that are a bit more specific than the usual cypress commands.
New Cypress Commands
These pieces of code are added to the cypress/support/commands.ts file.
This command allows you to add an attribute to React JSX Components of data-test and then target them from your cypress tests. Very useful for targeting difficult to get at elements.
This command allows you to upload a specific file from the cypress/fixtures folder into your test.
This command allows you to upload a specific file via the react-dropzone
The above allows you to target a specific tr in a table (assuming you have the data-test attribute on the table. Useful for testing correct data is showing in the correct place on a table.
Targeting an input field with a specific name and then typing in it.
Select Fields (Mantine only… Sorry!!)
This targets a specific select field, opens the options and then selects and option based on the number in the eq() command.
By creating snippets for those ‘harder-to-remember’ parts of the cypress syntax, it is more likely I will write more tests and hence have a higher level of confidence in the quality of the apps I am working on. Snippets are a low effort method of improving a process. Please let me know if you have any useful Cypress snippets and I can add them to this article for other develops to learn and benefit from.