Cypress

Learning Cypress for Web App Automation.

What is Cypress?

Front-end web automation testing tool.
It is Developed for modern web application (latest Javascript frameworks) like React JS, AngularJS.
Cypress allows us to automate any application which runs on browsers (Chrome, Edge, Firefox and Electron).
Automation scripts are written in Javascript or in Typescript.
Open-source but has many components - Cypress Dashboard (Paid) and TestRunner (Free)
Cypress is built on Node.js and comes with Node Package Manager (npm) modules.
Cypress is faster compared to Selenium as it runs inside the browser.

Who can use and what kind of tests can be done in Cypress?

Developers and QA Engineers can use it
Automate end-to-end, integration, unit and API testing.

Main features of Cypress

Time travel - takes snapshot of every run and maintains history
Debuggability - Cypress has access to all the dev tools since it is running internally on the browser. There is no need to rerun the code as you can immediately cross check the error
Automated (built-in) waits - automatically waits for the certain element and do the action or page to load
Consistent Results - no flakiness as you will get the same results no matter how many times you run the test script
Screenshot and videos - Cypress will automatically capture screenshot and videos if there is an error when running the test.
Cross browser testing - tests can be run on many browsers either locally or remotely

Limitations of Cypress

Cannot automate tests for Desktop or Mobile Apps.
Limited broswers - Firefox, Chrome, Chromium.
Cannot use languages other than Javascript/Typescript.
Reading/writing data into file is difficult.
Third party reporting tool integration is limited.

Environment Setup - identical for Windows and Mac

Download and install Node.js, Visual Studio Code (VSCode)
Create a new folder for the project and open it in VSCode
Open CMD/Terminal and then exectue the following command which creates the package.json file (list of apps for the for it to run):
npm -i init
To install Cypress, use the following command:
npm install cypress --save -dev
To start the Cypress application, use:
npx cypress open or node_modules/.bin/cypress open

Writing Tests

Cypress uses Mocha framework to write the test scripts.

describe('TestSuiteName', () => {

    it('Does not do much!, () => {
        expect(true).to.equal(true)
    })
})

describe is a keyword and can multiple it blocks
('TestSuiteName' is the name of the test suite
() => represents the function which can be also written like function ()
('Does not do much! is the test case
One spec file can have multiple number of test suites/describe block and every describe block can have multiple it block.
cy is the root module/package where one can access all the commands from Cypress.

Executing Tests

npx cypress open - opens the Cypress application where you can run the spec files.
npx cypress run - terminal/cmd command to run all the spec files without launching the Cypress application (headless mode).
npx cypress run --headed - terminal/cmd command to run all spec files directly on the browser
npx cypress run --spec pathtofile.cy.js - terminal/cmd command to run the specific spec file (headless mode by default)
npx cypress run --browser chrome - terminal/cmd command to run all the spec files (headless mode by default)

Locators

CSS Selectors - supported by Cypress
- four types of supported CSS Selectors
  - #id
  - .class
  - [attribute='value']
  - .class [attribute='value']
XPath - need to install additional plugins
cy.get('locator') method will locate the element
cy.get('locator').type('value') this will go to the locator and type in the value provided
cy.get('locator').contains('value') get the DOM element containing the text
xpath plugin has been deprecated
able to use Cypress TestRunner to capture the locators

Assertions

Assertions are the validations that are executed in the middle or end of the test cases to evaluate that the actual result is as expected.
In Cypress there are two types of assertions:
- Implicit
  - If an assertion is applicable to the object obtained from the parent command in a chain, it is known as the implicit assertion
  - These commands cannot be used as standalone. Generally, they are used when we have to verify multiple checks on a particular object.
  - cy.get('locator').should('value') & cy.get('locator').should('value').and('value') are the popular implicit assertions
  - These are the keywords you may want to include when doing assertions:
    - eq, contain, include, exist, have.length, have.value -> also have the negative equivalent
- Explicit
  - If an assertion is applicable to an object directly, it is known as the explicit assertion.
  - cy.get('locator').assert('value') (TDD approch) & cy.get('locator').expect('value') (BDD approach) are the popular explicit assertions
Default
Handled internally and do not require to be invoked specifically.
- cy.visit () − expects the page to show the content with 200 status code
- cy.request () − expects the remote server to be available and sends a response.
- cy.contains () − expects the web element with its properties to be available in DOM.
- cy.get() −expects the web element to be available in DOM.
- cy.find () − expects the web element to be available in DOM.
- cy.type () − expects the web element to turn to a type able state.
- cy.click () − expects the web element to turn to a clickable state.
- cy.its () − expects for a web element property on the existing subject.

Folder Structure

downloads - all downloaded files are stored here
e2e - store all spec/test case files
fixures - maintain static test data here
screenshots - stores captured ** through automation
support - contains all the reusable scripts
- commands.js - store/create custom commands and override the current commands
- e2e.js - code that loads before executing the spec files
videos
- recorded videos of the test cases are stored here
node_modules - contains all cypress related modules
cypress.config.js - cypress config file
package.json - contains the dependencies

Interacting with Elements

Checking and unchecking radio buttons/checkboxes
- .check() & .uncheck()
Cypress has only .get() method to get either single or multiple elements
have.value assertion only works when dropdowns have the selector tag in the DOM. Use have.text instead.
Cypress automatically closes JS alert windows by clicking the 'OK' button. Need to write code to automate to click the 'Cancel' button.
Cypress cannot directly shift to a new tab and perform operations there. There are certain workarounds to combat this issue.
1. Clicking on the link and removing the target attribute to open the child tab on the same page.
2. jQuery function to capture the href of new tab and save it in a variable - One limitation is that the domain should be the same or the function will not function
Cypress cannot handle iframes content if there are cross-origin restriction in place. It is security mechanism implemented by web browsers to prevent malicious behavior and protect user data.
- The following property must be set in cypress.config.js file to access cross origin policy iframes.

const {defineConfig} = require('cypress');
module.exports = defineConfig ({
  chromeWebSecurity: false,
  e2e: {
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
  },
})

module.exports = {
  e2e: {
    chromeWebSecurity:false,
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
  },
};

Hooks used to specify some prerequisite scripts before executing the tests.
They are derived from mocha framework
- before - execute before starting all the it blocks
- after - only once after all the it block; can write anywhere as order is not important
- beforeEach - multiple times before every it block
- afterEach - multiple time after every it block
Tags
- skip - it block skipped during test run
- only - runs only the specific it block
Fixtures
- files that contain test data which we can parametrise the tests
- can use various formats e.g. JSON, TXT, CSV, HTML