Enhance Your Web Testing with our Cypress Framework Tutorial
To stop testing in the dark
Learn how implementing codeless can help organizations expedite release cycles and remove bottlenecks during the testing process with this whitepaper.
What is Cypress?
Cypress comes with a Test Runner that is open-source and is easy to set up and use. You can write and run tests locally every day using this Test Runner. When test suites are ready, you can integrate it with the CI tool and record tests using the Dashboard. The Test Runner allows you to watch commands as they get executed. You don't have to install any servers, dependencies, or drivers. Cypress is developer-friendly. Tests are easy to understand.
By taking snapshots of tests, Cypress lets you know what's happening at every step. When a test fails, you can debug directly using tools such as Chrome DevTools. As you make changes to the test, Cypress automatically reloads them. There are no async issues.
How is Cypress different from Selenium?
As Selenium is the most popular test automation framework in the open-source segment, Cypress is often compared to it. However, both tools fundamentally differ in architecture and functionality. While Selenium tests run outside the browser and drive the browser using JWP protocol, Cypress runs in the same loop of the browser application. So, it has native access to every object that the application has.
Due to the nature of the architecture difference, selenium is more suitable for an end to end tests, where Cypress is faster and in some cases more reliable.
Installing Cypress is pretty simple and easy. The framework offers two options to install Cypress
- Command Line tool
- Desktop App
Step 1: Install Node.js and Node Package Manager (npm)
Install node.js using the .msi file
Accept the license agreement.
Choose the node js folder and click next.
In the custom setup, choose the features you want to install. You can click next and install default items.
If you want to run npm modules from C/C++, you need to install tools for native modules. Else, just click next.
On the next screen, click Install.
Complete the installation process.
To check if node.js and npm are successfully installed, open the command prompt, and type the following commands:
- node –v
- npm –v
Step 2: Create a project folder
To save all the work in a single folder, create a new folder, and navigate to that folder.
- mkdir experitestcypress
- cd experitestcypress
Step 3: Create a package.json file
To create a package.json file, type the following command in the command prompt
- npm init -y
Step 4: Install Cypress using npm
Navigate to the project folder and type the following command to install Cypress from the CLI.
- npm install cypress –save-dev
Wait for a couple of minutes as it has to download and install the required binaries.
Step 5: Open Cypress
Now, Cypress is successfully installed. To open Cypress Test Runner, type the following command in the command prompt.
- .\node_modules\.bin\cypress open
When you open it for the first time, it will create an example folder with test script files.
Now Cypress is ready for use.
Create your first test
To run your first test, create a test file in the integration folder created by Cypress. Here, the test file is named as experitest_sample.js
- Touch experitestcypress/cypress/integration/experitest_sample.js
As Windows doesn't recognize the touch command, create the .js file manually in the integration folder. To do so, open a text file and save it with a .js extension.
When you open the Test Runner, it will display the experitest_sample.js file you have created.
Running the first test
To run the first test, you can use any IDE to edit the experitest_sample.js file. For this test, open the .js file and add this simple code and save the file.
Now, click on the file in the Test Runner and it will open the browser and run the test.
Here, the Chrome browser is being controlled by automated test software.
Now open the experitest_sample.js file and change the ‘First test' to ‘Second test'. When you save the file, the browser automatically refreshes and displays the new results.
Here is another example. Open the experitest_sample.js file and type this code and save it:
When you save it, the Test Runner will open the Experitest website in the browser.
So, the Test Runner is perfectly working. You can write different test scripts and execute them!
Execute your test from the command line
To run this test script from the CLI, type the following command in the command prompt:
- npx cypress run --record --spec "cypress/integration/experitest_sample.js"
After successfully running the test, the tool will display the results.
Installing the Cypress Desktop Tool
To install the desktop tool, open the Cypress website and download the Cypress desktop software:
This is the direct link to download the desktop tool:
After downloading the zip file, unzip the software and open the Cypress application.
Now, select your project folder and start using the Test Runner.
Using Cypress framework for test automation