_edited_edited.png)
Let's get started with Cypress. In this series of blogs on Cypress, lets get acquainted with the basics of Cypress. These series of blogs, not only get you familiarized with Cypress, but also serve as ready reference of Features of Cypress, Code Snippets or Cheat sheets to quickly grasp the crux of Cypress.
Introduction:
Cypress is a Frontend Web Automation testing tool, for modern web applications, developed using latest frameworks like ReactJS, AngularJS etc.
We can automate any application which runs on a browser.
Cypress uses JavaScript programming language. Typescript (developed on top of javascript) can also be used.
Does not use any selenium libraries, unlike other tools built on top of Selenium.
Cypress is open source.
Components in Cypress: Cypress Runner (free, locally installed), Cypress Dashboard (paid service) form the Cypress Ecosystem..
Test Runner (Cypress App) helps to install cypress, design framework, create tests, write automation test scripts, execute test scripts, debug tests.
Dashboard helps to record the test, maintain recorded tests, maintain test results history, parallel testing, and maintain dashboards.
Cypress is built on the Node.js environment and libraries come from npm (node package manager) module.
Who can use Cypress:
Initially Cypress is developed for developers to do Component level testing: Unit Testing and Integration Testing. Later many features were implemented and testers also started using Cypress.
We can automate end-to-end test cases using Cypress.
We can automate integration tests, automate unit tests, automate API tests.
Both developers and testers can use Cypress for testing.
Cypress vs Selenium:
| Selenium | Cypress |
Application Support | Only Web | Web & API |
Cost | Free | Test Runner - Free Dashboard - Paid |
Setup & Installation | Difficult | Easier |
Languages | Java, Python, Ruby, C#, JavaScript | JavaScript, TypeScript |
Browsers | Chrome, Edge, Firefox, Safari, Opera & IE11 | Chromium based browsers: Chrome, Edge, Firefox & Electron |
Frameworks Support | Junit, TestNG, pyTest etc based on programming language | Mocha JS |
Performance | Runs outside of browser, to have language bindings, send different commands, drivers receive | Faster since it runs inside of the browser. |
Reporting | Integrate with Extent, Allure etc. | Mocha reporters, Cypress dashboard |
Features of Cypress:
Time Travel: for every step executed while executing, Cypress captures snapshot of every run, we can navigate back or move forward in steps.
Debuggability: Since cypress has access to all DevTools, Cypress runs on same browser internally, so debugging is easy, crosscheck without rerunning again.
Automatic waits or built-in waits: Whenever trying to interact with elements on web page, synchronization issues like page loading slowly, elements may not be available when performing action, elements may be invisible, elements in disabled state, link not available, element detached from DOM structure, then script throws error. Script execution is faster compared to application response. Cypress provides default wait times for everything like wait for element, page load etc. No need to write explicit wait statements in Cypress.
Consistent Results: Running the same test N number of times, gives the same results, as tests are run in the browser itself in Cypress.
Screenshots and videos are automatically captured, if something fails. Test cases will be recorded in video format, without writing any additional code.
Support for cross browser testing: Run test cases on browsers supported by Cypress, locally or remotely using Jenkins or any other CI/CD tools.
Real time reloads: Cypress automatically reloads when you make changes to your tests. See the commands executed in real time in your app.
Limitations of Cypress:
We cannot automate windows based applications or mobile applications.
We have limited support for browsers.
JavaScript, TypeScript languages are only supported.
Reading and writing data from files is difficult, have to use third party plugins.
Reporting using dashboard features or Mocha JS (basic HTML reports). Third party reporting tool integration is also limited.
About Cypress.io website:
Developer-friendly as initially developed for developers.
Built from scratch without Selenium as base, open source.
Detailed Guides and Documentation: Web testing, API testing, plugins supported, examples for practice.
Cypress helps in setting up tests, writing tests, running tests, debugging tests.
Cypress E2E (End to End) Web Automation: Environment Setup on Windows & Mac:
Download & install nodejs (like JRE for Java). Check Path environment variable is set to the installation directory of nodejs. On command prompt: node --version, npm --version
Download file format: Windows: .msi, Mac: .pkg files
Download & install visual studio code (VSCode) editor. Mac: unzip download and drag the extracted file into Applications.
Create a new folder for the project & open it in VSCode.
Execute in cmd/terminal below command: npm -i init → creates package.json file. We can open terminal from VSCode itself or from the folder location or from search in the taskbar. Give packagename, and leave rest of fields empty or default values, which can be updated later.
To install Cypress: npm install cypress --save -dev → first time, next: npm install cypress in other projects
Start Cypress: npx cypress open (OR) node_modules/.bin/cypress open
A window opens with packagename: E2E(end to end) testing, component testing (developers). Select E2E testing on Launchpad. Files created are: cypress.config.js, e2e.js, commands,js, example.json.
Browsers supported are shown. Electron is the default browser supported in Cypress.
Select Chrome browser. We can see Specs, Runs, Debug, Settings options.
Every Spec (specification) is a test case. We can see all sample specs or create an empty Spec in the browser opened.
In Visual Studio Code, we can see entire framework structure created:
cypress folder: downloads, e2e(to create test cases, has spec files(.cy.js) has multiple test suites:describe block and tests: it blocks) - previous versions: integration folder, fixtures (reusable components), support(configuration files: commands.js, e2e.js default files, can add more)
node_modules: cypress related libraries
Cypress.config.js, package-lock.son, package.json files
How to Write & Run Tests in Cypress:
Create an empty spec file: MyFirstTest.cy.js from browser (npx cypress open: click on .cy.js file => run) or from VSCode.
Every "describe" block represents a test suite, every "it" block represents one test.
describe('suite name',() => {
it('test1',() =>{ expect(true).to.equal(true)})
it('test2',() =>{ expect(true).to.equal(true)}) // …
})()=>{} arrow function (OR) function() { // steps} → declare function
cy.visit("http://opensource-demo.orangehrmlive.com/")
cy.title().should('eq','OrangeHRM') //verify title of page (assertion)By default, Cypress will follow Mocha framework to write our tests and all assertions.
Run the test: through cypress application: npx cypress open: click on spec file
or from terminal: npx cypress run (default headless mode - no UI)
npx cypress run –headed (headed mode)
npx cypress run --spec cypress/e2e/MyFirstTest.cy.js --headed
Default: electron browser,
npx cypress run --browser chrome // on chrome browser
Settings required are:
In Spec file: optional: const{describe} = require(“mocha”);
Every file: const cypress = require(“cypress”) (OR)
/// <reference types=”cypress”/> //can put in support/commands.js
Hope you enjoyed getting to know Cypress and writing first test case in Cypress. In the next blog, we will be seeing CSS Selectors, XPath Locators, Types of Assertions in Cypress, and more.