How to perform Cypress Test Automation
Introduction
Habtamu Petros
Last Update 4 yıl önce
The Cypress Test Automation Framework has gained significant popularity as an alternative to Selenium Webdriver. As an automation framework, Cypress is known for being easy to set up and use.
Cypress is a NodeJS-based test automation framework for the modern web. It uses JavaScript as a programming language. Unlike other tools, the Cypress automation tool can be used for a variety of tests – unit tests, integration tests, end to end tests, API tests, etc. Cypress also comes with multiple in-built functionalities to make developers’ and QA’s jobs easier. Some of these include screen capture, video recording, time travel, easy debugging, etc. Currently, Cypress supports cross browser testing on Edge, Firefox, and Chrome.
Cypress framework uses Mocha and Chai assertions by default so testers can use assertions from these libraries. The reporting feature is one of the most used features in the automation world. Cypress uses Mocha reporter internally, so testers can configure Mocha reporter or Spec reporters in their specs.
Cypress comes with Command line Interface aka Cypress CLI which helps users integrate Cypress tests with CI/CD tools such as Jenkins, Azure DevOps, etc. In particular, it also helps testers execute Cypress tests on BrowserStack.
How to set up Cypress
Bear in mind that all Cypress testing must be executed on real browsers for accurate results. Start running tests on many versions of the latest browsers across Windows and macOS with BrowserStack.
In order to start cypress automation, users will need the following prerequisites:
- Download and install NodeJS
- Download and install visual studio code (Visual Studio Code is the most used IDE. However, testers can use any IDE.)
Step 1: Create Empty Project Folder
Navigate to the desired location, and create an empty folder inside. In this example, CypressAutomation is the project folder.
Step 2: Open the folder in Visual Studio Code or Any IDE
Go to Visual Studio Code Menu > Navigate to File > Click on Open Folder > Choose the newly created Folder(CypressAutomation) from Open Folder Wizard
Step 3: Create package.json
In the CypressAutomation folder, the package.json helps track all the packages installed for the Cypress automation framework, and it also helps to create shortcut commands to run the tests.
In order to create the package.json, open Terminal in Visual Studio Code Menu and type the command below:
On entering npm init in the terminal, it asks for a set of questions. Answer them or hit [Enter] [Enter] until it finishes. Finally, it asks – Is this OK? (yes). Then, hit [Enter]. Now the file named package.json is automatically created in the root folder of the project.
The package.json in the root folder looks like this:
Step 4: Install Cypress
Cypress is a NodeJS-based automation tool, available as an npm package. Cypress can also be downloaded as an installer, but the recommended way is to install from npm.
In the root Project Folder (CypressAutomation) > Terminal > type
Step 5: Open Cypress Window
Once Cypress packages have been installed, Cypress, by default, configures some folders. Typically 4 folders will be created inside the Cypress folder namely plugins, support, integration, and fixtures – the first time the tester opens Cypress. In order to open the Cypress window, use one of the following commands:
On entering the above command, installation begins:
Step 5.1 Choose E2E Testing Type
Step 5.2 Choose the launching browser and click the start E2E button
As mentioned earlier, this command also prepares the framework in the background. It creates a Cypress folder in the project directory, and the Cypress folder will have fixtures and support subfolders.
Now the Project Folder looks like the below:
Let’s quickly examine these folders, and why they are required:
- Fixtures: This folder helps keep data files such as data.json, which can be read directly inside the test scripts.
- Support: The support folder contains common files (reusable code, global variables, etc.) that need to be accessed globally inside the framework.
Step 6: Add a test file
Assuming you've successfully installed the Cypress App and opened the Cypress app using node_modules/.bin/cypress open or npx cypress open, now it's time to add your first test. We're going to do this with the Create new empty spec button in the Cypress App.
On clicking it, you should see a dialog where you can enter the name of your new spec. Just accept the default name for now.
The newly-generated spec is displayed in a confirmation dialog. Just go ahead and close it with the ✕ button.
If you want to create a new spec file you can click on create another spec button. And also if you want to run your create spec file you can run the spec.
Once we've created that file, you should see the Cypress App immediately display it in the list of end-to-end specs. Cypress monitors your spec files for any changes and automatically displays any changes.
