Get Started With Cypress: E2E Testing Framework

What is cypress

Their website shows Cypress is a next-generation testing framework built to test the front end of modern web applications. It helps with setting up tests, writing tests, running tests, and debugging tests. Cypress is different from selenium on the fundamental and architectural levels.

Though their website says it is designed mostly for the front end and overcomes the selenium's restriction, you can automate the APIs with it. I will write a post about it later.

Let's start with how can you start writing your first test on Cypress take screenshots and also record the execution of the videos.

Prerequisites:

• Windows 10 or above
• Node.js 18. x
• Node.js 20.x and above
• You must have 2 CPU cores to run Cypress
• 4GB RAM is the minimum required for the job (I have tested it on 2GB and it runs smoothly for shorter testing purposes)

Node.js Install

Install the node js from the website [link]

• Select the LTS version for the stable node.js

• After successful installation, you can check the node version on the CLI by typing

node --version        

Install Cypress:

After installing the node js create a folder in your computer and run a command to install the cypress by this command.

npm install cypress --save-dev

A node_modules folder will be created. Now run the Cypress UI by running this command you can open Cypress from your project root in one of the following ways

npx cypress open

This command will ask you to configure some basic settings for your project, set this configuration as usual.

Now a launchpad will show on the window, select the E2E testing from the option.

After selecting the testing types select the browser you want to use for testing

After opening up the browser now create a new spec to write your first automation code

After setting your spec folder and name now write the first test

describe('Learning Cypress', () => {
  it('Visits the Daraz', () => {
    cy.visit('https://daraz.com.bd')
  })
})        

after saving you will see that your code is running on the browser and the execution log is showing on the left bar.

Congrats you have just written a cypress test.

We will discuss the page object model later in the Cypress blog, Now let's dive in what are the pros and cons of this test automation framework.

Pros:

• Easy to setup and deploy on the pilot/projects and less risk management
• Blazing fast execution
• Browser-based runs directly on the browser so you see the real-time UI during execution.

Cons

• Only supports web UI testing
• Can't handle iframe
• Doesn't support XPATH selector (there is a plugin for XPath support)
• No multiple tabs support
• Cypress lags (lower RAM) in long-running test

These are the pros and cons of this TAS, and we can agree that Cypress is a good fit for UI-based web application automation and for small projects, complex project management with Cypress can give you some hiccups.

Bonus:

Here is a git link to view the test cases I have covered on DARAZ(An e-commerce platform)

The test case that I have covered:

TC_001	User can login with valid email and valid password
TC_002	Verify that, User can't login with an unregistered email id
TC_003	Verify that, User can't login with an invalid password
TC_004	Verify that, If user tries to login with any invalid email/phone number on the input field it will show error message
TC_005	Verify that, if user type email/phone less than 6 character it will show an error
TC_006	Verify that, If user writes any keyword on the search input field it will show suggestion
TC_007	Verify that, If user search with a keyword all the related product with the keyword will show on the all product page
TC_008	Verify that, If the user search for a product that doesn't bring any product related to it, on the search page should show a message
TC_009	Verify that, if the user clicks on any product it will bring up all the information of the product on the product page
TC_010	Verify that, User can see the product delivery amount on the current address
TC_011	If an unauthenticated user tries to add the product to the cart it will bring the login page
TC_012	If an authenticated user added the product to the cart an overflow modal should open with all the product details and a success message will display
TC_013	Product quantity will be one for the newly selected product
TC_014	If the Cart page doesn't has any product it will show a message
TC_015	If a user clicks on the ADD to cart option again for the same product it will increase the product quantity
TC_016	On cart page all the added product should be available.
TC_017	Users can select product individually by clicking on the product checkbox or all the product by select all checkbox
TC_018	Proceed to checkout option should present under the order summary
TC_019 User can delete individual product from the cart
TC_020	Users can delete all selected product by selecting the product and click on the Delete all option from the table header        

Reference:

Why Cypress?. Cypress Documentation. (2024, February 16). https://docs.cypress.io/guides/overview/why-cypress