Cypress Automation
Hello ,
In this article, I will tell you about Cypress Test Automation Freamwork.
What is Cypress?
Cypress, It is an open source test automation tool where tests are written in JavaScript. Cypress is a next-generation testing tool built for the modern web. Cypress, free, open source is an application and save your tests. It has the “Cypress Cloud” platform that provides . If you are looking for an alternative other than Selenium, you can try Cypress test automation tool. At the end of the document I will compare my experience with Cypress and Selenium Freamworks.
Cypress allows you to run the following tests:
- End-to-end tests
- Component tests
- Integration tests
- Unit tests
Cypress has its own unique ecosystem and working logic. Cypress usually executes its commands within the browser, so there is no network lag. Commands are executed quickly and run quickly. Cypress has automatic waits, you do not need to add extra manual waits (like Thread.sleep()). Cypress automatically expects elements to exist and will not give you old elements separated from the DOM. Cypress runs asynchronously.
You can access the relevant document from the link below. Since the content of the document is quite extensive, you can easily access the information you are curious about.
https://docs.cypress.io/guides/overview/why-cypress
The most important features of Cypress
• Automatic screenshot and video recording for errors
• Easy to debug
• No need to add extra wait or sleep
• Most testing tools (like Selenium) run outside the browser and over the network, executing commands remotely. Cypress is the exact opposite. Cypress executes in the same run cycle as our application. For this reason, more test runs are faster.
• Cypress one behind Node js. There is a server process. Cypress and node.js constantly communicate with each other, synchronize and perform tasks.
• Cypress dashboard management — cypress cloud
• Flaky test management is easier
• Asynchronous operation of Cypress
Cypress’s working logic
To understand the working logic of Cypress, I would first like to talk about Node.js and Npm, Blocking and Non-Blocking concepts.
What are Node.js and Npm (Node Package Manager)? What does it do?
Cypress uses Node.js and Npm platforms. Npm and Node.js communicate with each other and send commands, allowing us to download packages.
- Node.js is a JavaScript-based platform that runs on the server side and can use the non-blocking I/O model.
- Npm can be thought of as a repository with many modules to be used in Node.js projects.
- Npm automates the management of packages in the project. The basic things we can do with npm are:
• ➩ Installing packages automatically or manually
• ➩ Deleting packages in the system
• ➩ Listing the packages in the system
• ➩ Updating packages in the system
Cypress installation steps:
1- First need to download node js
https://nodejs.org/en/download/
2- After installing Node js, add NODE_HOME to the system variables.
3- npm init command is run to create “package.json”. You can proceed by clicking ‘Yes’ to the installation questions that appear here. Then package.json is created
> npm -i init
4- After need to install npm. Type “npm install cypress” in the terminal as follows
cd /your/project/path
> npm install cypress
5- Dependencies are installed under node_modules. These are runable files.
6- Start Cypress by typing “cypress open” in the terminal.
> cypress open
C:\Users\fgokce\git\CypressAutomation> node_modules/.bin/cypress open
Or you can start it with the path of node_modules like this:
C:\Users\fgokce\git\CypressAutomation> cypress open
Which Browsers and Locators does Cypress support?
> Cypress does not support IE browser.
> Cyress runs on the fastest electron browser.
> Electron is a Chrome supported browser.
Supported Browsers:
1) chrome
2) firefox
3) Edge
4) electron
Important notes :
cypress only allows “css selector” locator. You cannot use locators such as “Class name”, “Xpath” and “id” directly, we need to convert them to CSS selector format.
Cypress Commands: The most well-known Cypress commands are as follows:
installation command
> npm install — save-dev mochawesome
To run tests in headless mode:
> npm run –headed
To run the tests in Chrome:
> npm run –chrome
To run tests in parallel:
> npm run test — parallel
to run the spec file
> — spec
"test": "node_modules\\.bin\\cypress run", "headTest": "npm run test
-- --headed", "chromeTest":"npm run test -- --browser chrome",
"LoginTest" : "npm run test -- --spec
\"cypress/integration/Login/*\"",Cypress Log:
Mochawesome package can be used for logging. You can review it from this link
https://www.npmjs.com/mochawesome
https://www.npmjs.com/package/mochawesome
useful examples:
1- test run: Run the relevant tests with the “npm run test — spec” command
package.json
"LoginTest":"npmrun test -- --spec\"cypress/integration/Login/*\"",2- retries:To rerun failed tests: the retry command is used as follows. The number of times the test is requested to be run again is entered in the “runMode” section.
cypress.config
"retries":{"runMode":3},When failed tests are run again, the rerun Specs can be viewed in detail.
Cypress examples:
Visit:cy.visit(url)The method goes to the website given as a parameter.
describe('Login Test', function () { it('Go to Tav Technologies site', function () {
cy.visit("http://demo.tams.tav.aero/#/login?redirect=%2Fdashboard") })
});contains: To find any element on the page cy.contains()We can use the method.
describe('Dashboard Test', function () { it('Go to Tav Technologies websiteand query the element', function () {
cy.visit“http://demo.tams.tav.aero/#/dashboard"))
cy.contains(“DASHBOARD”)})
});The above test visits the “Tav Technologies” site and checks if there is an element containing “DASHBOARD” on the page.
There is also the cy.get(element) method that you can use instead of Cypress “contains” to find direct dom elements.
Click: The command allows us to click on the relevant element on the page. The “eq” command is used to go to the given index.
example 1: the following command finds elements contains “CA” parameter:
cy.get('.search-keyword').type('CA')example 2: Find the element in the index and click the “ADD” button
cy.get('@flightlocator').find('.flight').eq(2).contains('ADD').click()Should have : It is used for assertions.
example : It takes the text of the element whose logo is “Tav Technologies” and prints it in the log.
cy.get('.img[alt='tav logo']').then(function(logoElement){cy.log(logoElement.text())})
//verifies the visibility of the logocy.get('.brand').should('have.text',' Tav Technologies')Defining CSS selector as a reference name: Define the css selector as a variable and give a name in the “as” section
cy.get('.flight').as('flightLocator')After assigning the CSS selector to a variable, we can now call it with a reference name and “@” wherever it will be used.
“cy.get('@flightLocator')”log: console.log() is used to print logs to the console:
console.log('print to console: Add button clicked')CYPRESS DASHBOARD
To run Cypress tests with Test Runner, we need to connect to the Cypress Dashboard.
After the necessary control panel settings are made, Test Runner gives you a URL so you can run and save your tests. You can copy the URL and run the tests in the terminal and see the results on the dashboard.
> cypress run — record — key <record key>
The results of the tests are displayed in the “Test Result” tab
In the Test Result tab, given the information created by the tests. Screenshots taken during the failed tests will also appear here. These contents are downloadable contents. There is also a log file. These logs can be added to bug records for fail scenarios.
Cypress is an increasingly popular tool. You can see the download numbers in the table below.
Cypress Pricing:
https://www.cypress.io/pricing?v=2
Comparing Selenium and Cypress experience:
Cypress is faster than Selenium in UI automation, but the free trial version of Cypress supports up to 3 users and runs up to 500 tests. Even though these 500 tests seem sufficient, the quota is quickly filled. When I ran Cpress’s ready-made spec files, half of the test quota was already full. :) So Selenium is generally preferred as it is a free and open source tool. Additionally, when you have a problem in Selenium, you can more easily find tried-and-tested solutions on the internet. Additionally, conflicts between versions may occur in Cypress. When a bug occurs in the version you are using, you have to wait for the new version. When I evaluate the pros and cons of Cyress, I prefer Selenium, which is more reliable.
Additionally, the number of test automation engineer who know Cypress is less than who know Selenium, and you may have difficulty finding qualified test automation engineer.
Resources :
· udemy: Cypress -Modern Automation Testing from Scratch + Frameworks
Enjoyable reading :)
Figen Gökçe.
