3

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.

  • 1
    There is a tag for it on StackOverflow, as they state on their website. And a chat here. You are more or less implying that the creators are wrong, which might be true. But discussing with them seems more fitting... – Ray Oei Apr 20 '18 at 21:30
  • 1
    Sure, talking to the creators might be more fitting if it's about the point of them being wrong. However, I'm also curious about other people's experiences with Cypress, such that I can try to improve on that. – MadMatt Apr 21 '18 at 19:30
1

The creators have strong opinions on why you should not use conditional logic in your test however, Cypress doesn't disallow the use of javascript control methods. Cypress has a robust API you can use to easily test a site but it also allows javascript logic so using any of the control structures you listed above already are allowed. I know this comment is 10 months old but in case you didn't find the community you can go to the Cypress Gitter Community.

You may want to look into the .within() and .wrap() commands which help you control what the acted on object returns and allows.

.within() command

.wrap() command

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.