• Automation Framework in CypressIO

Automation Framework in CypressIO

Create a folder for the Automation framework Testing on your PC and open that folder in the VS Code. Now you have to install the cypress and set the base for the cypress in the VSCode. Follow the below steps to install and to do framework Testing in CypressIO.

In the terminal of the VSCode type the below command to install the node modules.

npm init

Give the below command to install both cypress and prettier

npm install cypress prettier

Give the below command to install the snapshot plugin

npm install cypress-image-snapshot



Create a file named .prettierrc in the node modules of VS Code and give the below setting.

{
  "semi": false,
  "singleQuote": true,
  "useTabs": true,
  "tabWidth": 2,
  "bracketSpacing": true,
  "arrowParens": "avoid",
  "trailingComma": "es5"
}

For the IntelliSense code completion create a file named tsconfig.json in the node modules

{
    "compilerOptions": {
        "allowJs": true,
        "baseUrl": "../node_modules",
        "types": [
            "cypress"
        ]
    },
    "include": [
        "**/*.*"
    ]
}

If you want you can redefine the run command and the open command of the cypress as given below in the package.json.

{
  "name": "automationframework",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "cy:open": "cypress open",
    "cy:run": "cypress run",
    "cy:update-snapshots": "cypress run --env updateSnapshots=true"
  },
  "author": "Tharani Vijayakumar",
  "license": "ISC",
  "dependencies": {
    "cypress": "^5.6.0",
    "cypress-image-snapshot": "^3.1.1",
    "prettier": "^2.2.0"
  }
}

In the cypress.json give the below configuration:

{
   "watchForFilesChanges" :false,
   "chromeWebSecurity":false,
   "viewportWidth":1000,
   "viewportHeight":600,
   "waitForAnimation":true,
   "animationDistanceTreshold":20,
   "defaultCommandTimeout":6000,
   "execTimeout":60000,
   "pageLoadTimeout":60000,
   "requestTimeout":15000,
   "responseTimeout":15000,
   "video":true,
   "failOnStatusCode":false
}

Create a file named config.js in the AUTOMATIONFRAMEWORK folder


Type the below configurations in the config.js. It is suggested to have this file outside the cypress which does the same functionality as the fixture folder in the cypress. To use these constants we have to import them in the respective .js spec files.

export const url ="http://zero.webappsecurity.com/index.html"
export const login_username ="username"
export const login_password ="password"

Setting up dashboard services

  • Open the cypress test runner and select the Runs option. The below UI will appear and click Log In to Dashboard.

  • Give the name of the project and select public or private according to your need.

  • After selecting the Set up project the below UI will appear, where you can find the project Id and the record key.



If you are using Dashboard services for the first time kindly read the article from the below link.

Dashboard Service CypressIO
When you open the cypress.json file, you can see that the product id is automatically inserted.

 "scripts": {
    "cy:open": "cypress open",
    "cy:run": "cypress run",
    //Give the product key which is generated for you.
    "cy:run-dashboard":"cypress run --record --key <product key>", 
    "cy:update-snapshots": "cypress run --env updateSnapshots=true"
  },



In the plugin/index.js file give the below plugin configuration

const {addMatchImageSnapshotPlugin}= require("cypress-image-snapshot/plugin")
module.exports = (on, config) => {
  addMatchImageSnapshotPlugin(on,config)
}

Add a custom command in the support/command.js, so that whenever we call the addMatchImageSnapshot() method below function will be performed.

import { addMatchImageSnapshotCommand} from "cypress-image-snapshot/command"
addMatchImageSnapshotCommand({
    failureTreshold: 0.00,
    failureTresholdType:'percent',
    customDiffConfif:{treshold:0.0},
    capture: 'viewport'
})
Cypress.Commands.add("setResolution",(size)=>{
    if(Cypress._.isArray(size)){
        cy.viewport(size[0], size[1])
    }
    else{
        cy.viewport(size)
    }
})

Base page

export default class BasePage{
    static pause(ms){
        cy.wait(ms)
    }
    static logInfo(message){
        cy.log(message)
    }
    static setMobileViewport(){
        cy.viewport("iphone-x")
    }
    static setTableViewport(){
        cy.viewport("ipad-2")
    }
    static setDesktopViewport(){
        cy.viewport("macbook-13")
    }
    static setLargeDesktopViewport(){
        cy.viewport(1980,1080)
    }
}

Login page

import BasePage from "./BasePage"
export default class LoginPage extends BasePage{
    static login(username, password){
         cy.login(username,password)
    }
    static clickForgotPasswordLink(){
        cy.contains("Forgot your password ?").click()
    }
    static displayErrorMessage(){
         //cy.get(".alert-error").should("be.visible")
         cy.isVisible(".alert-error")
    }
}

support/command.js

import{addMatchImageSnapshotCommand} from "cypress-image-snapshot/command"
addMatchImageSnapshotCommand()
Cypress.Commands.add("isVisible",selector =>{
    cy.get(selector).should("be.visible")
})
Cypress.Commands.add("isHidden",selector =>{
    cy.get(selector).should("not.exist")
})
Cypress.Commands.add("isHidden",selector =>{
    cy.get(selector).should("not.exist")
})
Cypress.Commands.add("setResolution",(size)=>{
    if(Cypress._.isArray(size)){
        cy.viewport(size[0], size[1])
    }
    else{
        cy.viewport(size)
    }
})
Cypress.Commands.add("login",(username,password)=>{
    cy.get("#login_form").should("be.visible")
    cy.get("#user_login").type(username)
    cy.get("#user_password").type(password)
    cy.get("#user_remember_me").click()
    cy.contains("Sign in").click()
})

Navbar

export default class Navbar{
    static clickOnLogo(){
        cy.get(".brand").click()
    }
    static search(text){
        cy.get("#searchTerm").type("${text}{enter}")
    }
    static clickSignIn(){
        cy.get("#signin_button").click()
    }
}

e2e/login.spec.js

import {url} from "../../../config"
import {login_username} from "../../../config"
import {login_password} from "../../../config"
import Navbar from "../../page-objects/components/Navbar"
import LoginPage from "../../page-objects/paes/LoginPage"
describe("Login Failed Test",()=>{
    before(function(){
        cy.visit(url)
        Navbar.clickSignIn()
    })
    it("should try to login with invalid credentials",()=>{
        LoginPage.login("invalid username","invalid password")
    })
    it("should display error message",()=>{
        LoginPage.displayErrorMessage()
    })
})
describe("Login Success Test",()=>{
    before(function(){
        cy.visit(url)
        Navbar.clickSignIn()
    })
    it("should login to the application",()=>{
        LoginPage.login(login_username,login_password)
    })   
})



AccountLinks.js

export default class AccountLinks{
    static clickSummary(){
        cy.get("#account_summary_tab").click()
    }
    static clickActivity(){
        cy.get("#account_activity_tab").click()
    }
    static clickTransferFunds(){
        cy.get("#transfer_funds_tab").click()
    }
    static clickPayBills(){
        cy.get("#Pay_bills_tab").click()
    }
    static clickMoneyApp(){
        cy.get("#money_map_tab").click()
    }
    static clickOnLineStatements(){
        cy.get("#online_statements_tab").click()
    }
}

Navbar

   static displaySignInButton(){
        cy.isVisible("#signin_button")
    }  
   static clickSettings(){
        cy.contains("Settings").click()
    }
    static logout(){
        cy.contains("username").click()
        cy.get("#logout_link").click()
    }
export default class Navbar{
    static clickOnLogo(){
        cy.get(".brand").click()
    }
    static search(text){
        cy.get("#searchTerm").type("${text}{enter}")
    }
    static displaySignInButton(){
        cy.isVisible("#signin_button")
    }
    static clickSignIn(){
        cy.get("#signin_button").click()
    }
    static clickSettings(){
        cy.contains("Settings").click()
    }
    static logout(){
        cy.contains("username").click()
        cy.get("#logout_link").click()
    }
}

login.spec.js

  it("should logout from application",()=>{
        Navbar.logout()
        Navbar.displaySignInButton() 
    })
import {url} from "../../../config"
import {login_username} from "../../../config"
import {login_password} from "../../../config"
import Navbar from "../../page-objects/components/Navbar"
import LoginPage from "../../page-objects/pages/LoginPage"
describe("Login Failed Test",()=>{
    before(function(){
        cy.visit(url)
        Navbar.clickSignIn()
    })
    it("should try to login with invalid credentials",()=>{
        LoginPage.login("invalid username","invalid password")
    })
    it("should display error message",()=>{
        LoginPage.displayErrorMessage()
    })
})
describe("Login Success Test",()=>{
    before(function(){
        cy.visit(url)
        Navbar.clickSignIn()
    })
    it("should login to the application",()=>{
        LoginPage.login(login_username,login_password)
    })
    it("should logout from application",()=>{
        Navbar.logout()
        Navbar.displaySignInButton() 
    })
})



FeedbackPage

import BasePage from "../../page-objects/pages/BasePage"
export default class FeedbackPage extends BasePage{
  static load(){
      cy.visit("http://zero.webappsecurity.com/feedback.html")
  }
  static submitFeedback(){
      cy.fixture("feedback").then(data=>{
          const name=data.name
          const email =data.email
          const subject =data.subject
          const message =data.message
          cy.get("#name").type(name)
          cy.get("#email").type(email)
          cy.get("#subject").type(subject)
          cy.get("#comment").type(message)
          cy.contains("Send Message").click()
      })
  }
}

feedbackpage.js

import FeedbackPage from "../../page-objects/pages/FeedbackPage"
describe("Feedback Test using Fixtures",()=>{
 before(function(){
     FeedbackPage.load()
 })
 it("should submit feedback form",()=>{
    FeedbackPage.submitFeedback()
})
})

Recommended Readings

0 results
Comment / Suggestion Section
Point our Mistakes and Post Your Suggestions