Cypress Journey

Numanhan Duran
4 min readJul 12, 2022

Hello to everyone. I took a break from blogging for a long time. During this process, I moved from the Netherlands to Germany. I had to take a break because I started a new job, a new industry and team management.But during this time I started to learn Cypress and will start writing again to share my experiences once a week.

There are many tools that we can use in the test automation process. Among these, the tool that I liked the most was Cypress. In this article, we will talk about Cypress in a basic way.

What is Cypress?

Cypress is a Javascript based test automation tool. I won’t add a how-to-install Cypress post because you can access it from multiple sources.But first of all, it is useful to make sure that Node.js is installed in the environment you are working in.One of the biggest advantages of Cypress is that you can see all your specs individually throughout the testing process. It provides you with screenshots and screenshots of the features you are testing. In this way, it is easier to report the tests you have done and it helps you to find the point where you find the error without wasting time.

Benefits of Cypress

Cypress differs from other test tools both architecturally and structurally. The most prominent features here are fast test execution, using node.js server to raise a server in the back and providing fast communication by being in constant communication.

  • Most other test utilities access your application over the network and run the tests you have written by accessing them from outside. But Cypress, on the other hand, works in the same cycle as the application’s work cycle, giving real-time results.
  • Cypress controls the entire test automation process and thus understands the entire process, both scanner and non-scanner, allowing us to get more consistent results.

Little Information about Cypress

Cypress works based on the Mocha syntax. That’s why describe(), context(),it(), etc. which contain Mocha. It allows us to write tests using commands such as.

Assuming you have done all the setups, I would like to share the form test as an example by giving the necessary entries to a contac us page using http://www.webdriveruniversity.com/

But first, I will share an example structure to examine what kind of structure it has in general.

The part in describe() in this structure is the general name of our scenario. In this scenario, every step is valid by accepting it as a happy path. Here we can also run our invalid scenarios by adding context() just below describe() .

Structure of Cypress Project

After creating your Cypress file, you can run test runner with certain npm commands.I’m using the cypress folder in node_modules to get the test runner up.

.node_modules/.bin/cypress open

When we run the command I mentioned above, a screen like this should appear.

We have a test file that we wrote under Integration test. When we click on this file, our tests will start to run, redirect to the site you have given in the code and write all the values you have given in the form. If there is an error and the DOM element cannot be accessed, the tool gives a direct error and directly tells you where and what it cannot find, which is one of my favorite features.

After clicking on our test, we are greeted with a screen like this:

Here, after clicking on our test scenario, we can see each step on the page one by one, and if it gets an error anywhere, you can see in detail which step it took and what situation it encountered.

In this article, we talked about Cypress as simple, in other articles we will go deeper and touch on installations, Cypress commands, recording screenshots on the dashboard. I hope it was a useful article, I wish you a good read.

--

--