In the context of my master’s thesis, I have been working on web application testing. My original goal was to have some form of automation on UI testing, such that easy end-to-end testing was possible. However, in the process I stumbled on Cypress, which more or less does what I had in mind.
So after trying out the Cypress tool (and honestly being impressed), I had some annoyances with the tool, which I started working on. One thing is that writing tests in Cypress felt really tedious. So I started creating a new language (based on Xtext) to write tests. This then automatically generates a .js file for Cypress. I have (amongst other things) implemented extra’s such as:
- An if-then-else construct for conditional testing. I know the creators of Cypress themselves are heavily against this, because their philosophy is that testing should be deterministic, you should know what will happen, etc. However, I think there are scenario’s in which an if-then-else construct is useful. Consider the example of a website which is sometimes showing a dialog. For the test itself this dialog is not important. Then it is easy to write a test like “if (dialog is visible) { dismiss dialog }” and then continue to the real test. Following the Cypress way of working, one would have to make server-side changes to always hide the dialog under testing conditions. In practice that may involve a lot of work, just to be able to use “deterministic testing”.
- A while loop. With much of the same idea as above. In some cases it may be useful to execute certain actions while a given condition is true. E.g. as long as there exist items of the type “delete button”, delete one item from the list. The creators of Cypress would counter this argument with “You should always know how much elements there are, and then you can write a for-loop.”. However, in some cases, it might be easier to just write a while (as you then don’t have to think about the number of items etc).
- A more elaborate foreach loop. I know of Cypress’s .each() function, however that function does not really allow you to do much. As soon as you change the view inside of the each, it does no longer work, because the items that are bound to the each are removed from the DOM. Therefore, I have implemented a foreach which allows you to detach the elements from the DOM. As long as the elements are back there upon the next iteration, it will work. Possible scenario: for each item in a list, click the edit button (which loads a new view) and change that particular item’s value. Then go back to the list and edit the next.
Do you in the community think these additions are useful? Do you think of any other additions I could create? Things that have kept you from using Cypress or little annoyances? Please discuss!
Thank you in advance.
PS: If this is not the right place for this type of discussion, I’m sorry. I didn’t really find a Cypress related forum to post this kind of discussion on. If possible, please leave the question open such that I can gather opinions and discuss with experienced Cypress testers to improve my thesis. Thank you.
