How to be insanely good at building a test automation framework using Cypress

Recently, few people have asked me how to learn cypress and where to go for resources. I thought instead of replying everyone individually, I would just write a post that could benefit anyone wanting to learn cypress.

Here are my tips and personal experiences which will position you to be insanely good at building test automation framework using cypress that will solve your client's problem.

I assume that reader has not touched Cypress or JavaScript based testing tools before but have experience in Selenium in either Java or C#. A reader could also be a frontend developer not exposed to automated testing side of things.

Tip:1 - Learn JavaScript First

Cypress is often used by frontend developers. If you are coming from Java or C# background, you will find JavaScript bit weird at first. I have heard many developers saying that JavaScript is not a real programming language or it behaves in a strange way sometimes. Let me tell you that it is not the case. Instead JavaScript is a very elegant language but the you need to learn it well.

My preferred way to learn is by doing and I believe that is the most effective way as well. At this stage, do not think about testing, automation or cypress. Just focus on learning JavaScript with things like variable, arrays, functions, loops etc.

Once you have a solid foundation, you need to learn a very important topic which is asynchronous nature of JavaScript. and trust me, it requires different thinking to grasp. look into Promises and how it works. A solid understanding of Promises will save you ton of debugging time later on.

Resources:

Udemy - https://www.udemy.com/course/the-complete-javascript-course/ - This course will give you in-depth knowlege of Javascript and will make you enjoy writing cypress tests.

Udacity - https://www.udacity.com/course/intermediate-javascript-nanodegree--nd032 - This course will have you an opportunity to build some real world projects as well with lots of mentor support and code reviews.

Promises - https://www.udacity.com/course/javascript-promises--ud898 - Do not skip this one!!

Tip:2 - Understand that building test automation framework is development and not testing

Let me share my understanding of what development and testing is.

Development: Writing a code that constitutes some form of executable which can be run on a computing platform to accomplish a goal.

Testing: Analysing an application by exploring the functionality it provides and thinking about how user will interact with it and then documenting such interactions in the form of 'test cases'.

If you have only been in QA for your entire life then it is natural to think only in terms of test cases and application functionality. While it is great and it actually helps in coming up with a solid test coverage strategy, it is not enough in building a test automation framework.

Building a test automation framework is just like building any software. At the end of the day, it is a software that will test another software. When you go about building a framework from scratch, you WILL have to review the application code under test and see how you can load that application into cypress browser, what are the routes and how you will mock them. Also, you might have to deeply understand how to write a maintainable code by creating various classes and functions, how to reuse some parts of the code etc. Once you complete writing a test script, you need to debug that script as well to make sure that it behaves the way you intend. and this are all the software development skills.

Resources mentioned in Tip-1 will prepare you for this mindset shift. Wear your QA hat to determine effective test cases and then switch to the Dev hat to develop them into automated test scripts.

Tip:3 - Learnt HTML, CSS and jQuery

Having a solid understanding of HTML and CSS will help you in understanding how the pages are structured and with that you can easily write element selectors to target any elements on the page. It can also help you in picking accessibility related issues.

Cypress uses jQuery selectors. (Yes, jQuery is not dead folks!!) So, brush up on jQuery and with the knowledge of HTML and CSS, it should come easy.

You need to learn things such as syntax for selecting an element by tag name, by class name , by attribute names etc and also how to target descendant or parent elements.

Resources

W3School - https://www.w3schools.com/ - You can learn what you need in one week at W3School.

Tip:4 - Learn React & Node.js

If your organisation has embraced shift-left then cypress code is written in the same code base as application code. Nowadays, application code is usually written in React. (It could be in Vue or Angular as well). So, learning React will help you understand components, router and API calls. So, you can see how to interact with the app, how to mount these components for testing, how to set up access to redux store from cypress test etc.

I often found myself picking an issue or two while studying application code which I fix it as I write cypress tests

If you have learnt JavaScript fundamentals well, you can learn React basics in one week and be really good at it to the point of contributing to dev code in about 3 to 6 months.

Learning Node.js will help you understand how npm works, what is package.json, how to use any third party package etc. At the end of the day, Cypress tests app is actually a node.js application.

Resources

Udacity - https://www.udacity.com/course/react-nanodegree--nd019 - This course is really good and I highly recommend it.

Udemy - https://www.udemy.com/course/modern-react-bootcamp/ - This is another good course. Steve Colt's teaching style is amazing.

Tip:5 - Now, It's time to learn Cypress!

If you come this far, then you will see yourself that there is actually nothing much to learn in Cypress. You can actually jump to the Cypress documentation and start using it straightway. But If you feel like you want to learn it formally first then check out below resource.

How to go about writing elegant cypress tests

• Do not write Cypress tests in a unit test style. This will give you a maintenance nightmare down the line. It is easy to start writing using 'describe', 'it' pattern with Jasmine but do not do that if you care about readability.
• Use Cucumber. Write Given, When, Then statements and map it to the JavaScript functions.
• Do no use static test data files to mock your routes. It is another pitfall that people fall into. It is very tempting to do that when you mock your routes that has a large json responses. You may think that it is not possible to use cucumber for nested tables but there is a way. You have to write more code for it but it is possible. (contact me for further tips)
• Write each test that is independent of other tests. It should have its own data, steps and assertions. While you can use some reusable functions as long as it doesn't make tests dependant on one another. I once had to rewrite the whole codebase that has such tight coupling between tests and updating any part of test data will cause cascade effect over multiple test suites. You don't want that when a sign off deadline is looming ;-)
• You may use cypress for E2E testing that hit your test environment or you can use it in a unit test style that mocks all your API calls. Personally, I feel cypress is better suited for UI unit testing.

Resources

Udemy - https://www.udemy.com/course/cypress-tutorial/ - Do this from start to finish and you will be a cypress ninja.

Cucumber for cypress - https://github.com/TheBrainFamily/cypress-cucumber-preprocessor

Conclusion

So there you have it. I know I listed many things here but the post is for those who want to be insanely good and not just good :-) If you have any questions, you can ask me in the comments. Thanks and All the best!