Categories
QA

Cypress -Test Automation Tool

Cypress - Test Automation Tool

Open-source test automation tool for both developers and testers. A javascript based front end testing tool developed for modern web applications with awesome features gaining much popularity today.

What is SEO?

Cypress is an open-source, Javascript-based front-end test automation tool for modern web applications. It is useful for developers as well as QA engineers to test web applications developed in React.js, Angular.js, Node.js, Vue.js, and other front-end technologies. Cypress runs tests across multiple browsers such as Firefox, Chrome, Edge, Electron, and Brave. Cypress can be used for unit testing, integration testing, and end-to-end testing. It is easy to set up Cypress as well as write and run powerful tests with easier debugging and automatic test recordings. Screenshot capture along with test results make it a next-generation automation tool.

Cypress-image-1
Cypress vs other automation tools

Key features of Cypress

Cypress provides an all-in-one end-to-end testing framework using its features.

  • Cypress takes snapshots when tests are run.

  • It provides us with readable error messages, which helps with easier debugging.

  • Cypress has the ability to automatically reload the tests when we edit the test code and save.

  • There is no asynchronous problem for Cypress. Cypress automatically waits for commands and assertions.

  • Cypress provides us spies, stubs, and clocks that help verify the behaviour of functions, server responses, or timers. Also, we can stub the network traffic by using this feature.

  • Cypress automatically takes screenshots and videos of test failures.

  • There is no need for any web drivers to invoke the browser. Cypress executes in the same browser and runs in the same loop as the device, thus giving reliable, fast, and less flaky results.

Setting Up, Writing and Running tests

To setup Cypress (OS: Windows 7 and above)

  1. The first requirement is that Node.js (the Javascript runtime environment ) should be preinstalled on the system.  From the command prompt, check for node versions installed in your system that are 12 or 14 and above using the following command:
    node -v

    If Node.js is not installed on your system,install from  https://nodejs.org/en/download.

  2. Install Visual Studio Code (VS) as a file editor for writing Cypress tests from https://code.visualstudio.com/Download. Create a folder for the Cypress project in any location on your system, and open the folder from Visual Studio Code. From the VS terminal, run the following,
    npm init -y

  3. Next, install Cypress using the following command,
    npm install cypress

  4. To run tests, Cypress comes with a Test Runner that lists the spec files to execute. To open the Test Runner, enter the following command from the VS terminal,
    npx cypress open

  5. To write tests, in the VS editor, right-click on the integration folder under Cypress and create a new file with the a.js extension.
Create tests under integration folder

A sample test file Sample test.js can be written as:

describe((‘Sample test’),function() {

it(‘Load website’,function() {

cy.visit(‘https://www.terrificminds.com/’) })

it(‘Click on a menu’,function() {

cy.get(‘#menu-1-70eb2cd > .menu-item-25553 > .elementor-item’).click() })

it(‘Verify the presence of a button’,function() {

cy.get(‘#ecommerce > .eael-tab-title’).should(‘be.visible’)   })    })

The above test is a sample test in Cypress. Cypress provides the visit() method, which accepts the URL of the page that needs to be opened in the browser. describe() is a way to group our tests. It takes two arguments: the first is the name of the test group, and the second is a callback function.it() is used for an individual test case. The following scenarios were considered in this test:

  1. Visit the website
    https://www.terrificminds.com/‘.

  2. Click on the menu item ‘work’ on footer.

  3. Check the presence of the ‘Ecommerce’ button.
There are a lot of cypress commands to write tests. A cypress command is a chain command that starts like cy.[command].For example: cy.get(‘[id=”search”]’).type(‘Joust Duffle Bag’) .type(‘{enter}’)Cypress takes assertions from the popular Chai assertion library (javascript assertion library), as well as extensions from Sinon and jQuery. Cypress provides implicit and explicit ways to write assertions, and some commands have built-in default assertions. Cypress also provides hooks, which can be used to set some conditions to be run before or after a single test or a set of tests. Run the files that we want to execute using the Test Runner by double clicking on the spec file. The latest version of Test Runner, released on November 9, 2022, is Cypress Test Runner v11.0.1. A screenshot of the Test Runner GUI is shown below.
A Test Runner GUI

Once the spec file is clicked, the test starts to run. Below is a screenshot of the test run in Cypress. The GUI gives us the number of passed, failed, pending, and skipped tests if any, the time taken to run the test, DOM snapshots of each step, and errors that occurred during the run. Also, it has an open selector playground to copy various locators for locating the elements on the webpage. Cypress captures screenshots after a test fails. Cypress also records the video of the test run.

Tests’ Results

The Cypress dashboard service is a powerful companion to Test Runner. It gives an overview of all the test run results, the recording of the test run,  screenshots, error traces, and the detailed performance of individual tests. We can easily integrate Cypress with CI and run tests using this dashboard facility. Cypress Dashboard has four different pricing plans: Free (3 users, 500 test results), Team (75$/month, 10 users, 10k results), Business (300$/month, 40 users, 10k results), and Enterprise (unlimited users and variable test results). A screenshot of the dashboard in Cypress is given below.

Cypress Dashboard

How is Cypress different from Selenium?

Cypress and Selenium have a lot of differences in architecture and performance, even though they are both browser automation tools. Selenium supports multiple programming languages like C#, Java, Python, Perl, Ruby, etc. But Cypress supports only Javascript. Cypress uses a DOM manipulation technique and directly interacts with browsers without the need for any separate browser-specific drivers. Cypress has the ability of automatically waiting for the DOM elements to load on a page thereby  avoiding the use of wait commands which introduces timing issues in selenium. Cypress currently does not support Safari but Selenium supports all major browsers.Cypress can be used for unit testing, integration testing, and end-to-end testing. It is a more developer-friendly tool. Selenium is made up of bindings, or libraries, and the webdriver, which needs to be invoked before a test runs. Selenium accepts JUnit, PyUnit,  TestNG, etc., like any language-specific framework, but Cypress uses the Mocha JS framework only. Automatic screenshots and video recording are not possible in Selenium. Tests run faster in cypress than in selenium.Even though there are a lot of differences between these two, it is difficult to choose between them. Selenium has already gained much popularity, and it is an old tool that is widely used among testers. Cypress is new to the market and gaining much popularity these days.
Categories
QA

Selenium – Automating web browsers

Selenium - Automating web browsers

Selenium is an open-source software suite of browser automation tools that automate web browser interactions, created for testing purposes.

Selenium WebDriver

Selenium WebDriver is a web framework that permits the execution of cross-browser tests. This tool is used for automating web-based application testing to verify that it performs as per expected requirements.

Importance of using Selenium and why selenium

The benefits of Selenium Test Automation has importance across various business segments :

 1. Open-Source :

The tool can be freely downloaded and the community-based support for it is freely available. 

2. Language support :

Selenium supports languages, including Java, Perl, Python, C#, Ruby, Groovy, JavaScript, and more.

 3. Supports Operating Systems :

Selenium can operate and support multiple Operating Systems (OS) like Windows, Mac, Linux, and UNIX.

4. Support across browsers :

Selenium provides support across multiple browsers, like Internet Explorer, Chrome, Firefox, Opera, and Safari.

 5.Support for programming languages and framework :

Selenium integrates with programming languages and various other frameworks.

 6. Tests across devices :

Selenium Test Automation can be implemented for mobile web application automation on Android, iPhone, and Blackberry. 

 7. Constant updates :

Selenium support is community–based, which enables constant updates and upgrades.

 8. Loaded Selenium suites :

Selenium is not just a singular tool or utility, it is a loaded package of various testing tools and is therefore, referred to as a “suite”.

 9. Ease of implementation :

Selenium has a user-friendly interface that helps create and execute tests easily and effectively.

Selenium WebDriver Framework Architecture

WebDriver Architecture is made up of four major components : 

  • Selenium Client library

  • JSON wire protocol over HTTP

  • Browser Drivers

  • Browsers

How Selenium WebDriver Works:

On a high-level, Selenium WebDriver works in three steps :

  • Test commands are converted into HTTP request by the JSON wire protocol.

     

  • Before execution of the test cases, every browser has its own driver, which initializes the server.

     

  • The browser then starts receiving the request through its driver.

Once the programme is executed, every line of code or script will be converted into a URL. The JSON Wire protocol over HTTP makes this possible. Then this URL is passed to the browser drivers . At this point, the client library translates the code into JSON format and interacts with the ChromeDriver.

To receive the HTTP requests, every browser driver uses an HTTP server. Once the browser driver receives the URL, it processes the request by passing it to the real browser over HTTP. And then all your commands in the Selenium scripts will be executed.

Prerequisite :

The Selenium installation process :

  1. Install Java SDK.

     

  2. Install Eclipse.

     

  3. Install the Selenium Java client driver.

     

  4. Configure the Eclipse IDE with the webdriver.

Basic Steps in a Selenium WebDriver Script :

  • WebDriver instance creation.

     

  • Navigate to the required webpage.

     

  • Locate a web element on the website using locators in selenium.

     

  • Perform actions on the element by using required commands.

     

  • Execute the test cases.

     

  • Check the results and compare them with the expected output.

Implementation in E-Commerce project :

We implemented end-to-end testing for various work flows in e-commerce projects using the TestNG framework. This implementation is put into practice by providing assertions and testing the presence of important buttons by using their respective locators or by validating the workflow of an end-to-end navigation.

We have used it in a way that ensures each page’s contents or each page in a workflow is loaded properly with its valid locators, say the view and edit button in the cart page or the place order button in the payment page.

E-commerce basic workflow is currently included in the regression test process :

Home page->Product Description Page->Cart page->Shipment page->Payment page->Review Order page

In this workflow, we have made assertions to test the presence of important locators on each page. On the home page, we can test the presence of banner images. Similarly, the “Add to Cart” button on the product description page, the “View and edit cart” button on the cart page, the “shipment details” page on the checkout shipping page, the “place order” button on the checkout payment page, and the “continue shopping” button on the review order page so that we would be able to confirm if the deployed build is successful as part of smoke testing.

If any of the points in a test are not detected or come to failure, it will notify the console about the failure area and give insight into whether the changes are good to deploy to production. The TestNG framework gives a status about the pass or fail status in a workflow.

We have taken the TestNG approach because TestNG makes automated tests more organized, readable, maintainable, effective, and user-friendly. Its high-end annotations make it simple to scale while executing cross-browser testing across multiple devices, browsers, and their versions.

The following are some other features that prompt Selenium users to use TestNG and use this approach :

  • Numerous test cases can be organized with ease by translating them into the testng.xml file.

  • Test case execution priority settings.

  • Supports cross-browser testing and supports tools like Maven, Jenkins, etc.

  • Unlike WebDriver, TestNG has a built-in mechanism to generate reports in a readable format.

Integration with Github and Jenkins

Jenkins is so important, and it can be integrated with Selenium WebDriver to run our tests efficiently and achieve the goal of continuous integration. Using Jenkins to run our tests is time-effective, and the results can be visualized with complete logs. It helps fulfil the complete software development life cycle, starting from development, deployment, testing, monitoring, and releasing. It supports various plugins for achieving the project requirements. It also supports alerting the user via email regarding the stability of the build.