1. Create file Platform_Login.cy.js under Cypress\e2e\Platform\Login

describe('My First Test', () => {
    it('Visits Sana framwork', () => {
      cy.visit('https://staging-platform.sana-commerce.com/')      
  
      // that the value has been updated
     cy.get('#Email')
    .type('s.kodagoda@sana-commerce.com')
    .should('have.value', 's.kodagoda@sana-commerce.com')
   cy.get('#Password')
    .type('xxxxxxxxx@123')
    .should('have.value', 'xxxxxxxxx@123')
   
  cy.get('[type=submit]').click()
  cy.title().should('eq','Sana Platform')
    
    })
  })

2. Create Folder Cypress\testbase\testbase.js

class testbase{
 
    Fill(locator, text)
    {
        //Get element by by Html element        
        cy.get(locator).type(text)   
    }

    Click(locator)
    {
        cy.get(locator).click()
    }
 

}
module.exports = new testbase();

Make it advance with Xpath Addon

class testbase{
 
    Fill(locator, text)
    {
        //Get element by by Xpath
        if(locator.includes('//')) {
            cy.xpath(locator).type(text)
        } 
        //Get element by by Html element
        else {
            cy.get(locator).type(text)             
        }  
    }

    Click(locator)
    {
        cy.get(locator).click()
    }
}
module.exports = new testbase();

Update Login.cy.js

const I = require('../../../testbase/testbase')

describe('Test Login', () => {
  beforeEach(()=>{
    cy.visit('https://staging-platform.sana-commerce.com/')
})


  it('Test Login',()=>{                 
      I.Fill('#Email','s.kodagoda@sana-commerce.com')         

  })


  })

Add file cypress/ pageObjects/loginPages.json

{
    "Login": {
      "LoginData": {
        "Email": "#Email",
        "Password": "#Password",
        "CaptureCheckBox": "div.recaptcha-checkbox-border",
        "LoginButton": "button.btn-block"
      }
    }
}

import page objects to the login page

 ...
const PlatformLogin = require('../../../pageObjects/loginPages.json')

describe('Test Login', () => {  
 ...

  it('Test Login',()=>{                 
      I.Fill(PlatformLogin.Login.LoginData.Email,'s.kodagoda@sana-commerce.com')   
  })
 ...
  

import test data to login page

const I = require('../../../testbase/testbase')
const PlatformLogin = require('../../../pageObjects/loginPages.json')
const TestData = require('../../../testdata/platformLoginData.json')

describe('Test Login', () => {
  beforeEach(()=>{
    cy.visit('https://staging-platform.sana-commerce.com/')
})


  it('Test Login',()=>{                 
      I.Fill(PlatformLogin.Login.LoginData.Email,TestData.Login.LoginUserData.Email)         

  })

  })

Finaly Add Password and Login button

const I = require('../../../testbase/testbase')
const PlatformLogin = require('../../../pageObjects/loginPages.json')
const TestData = require('../../../testdata/platformLoginData.json')

describe('Test Login', () => {
  beforeEach(()=>{
    cy.visit('https://staging-platform.sana-commerce.com/')
})


  it('Test Login',()=>{                 
      I.Fill(PlatformLogin.Login.LoginData.Email,TestData.Login.LoginUserData.Email)         
      I.Fill(PlatformLogin.Login.LoginData.Password,TestData.Login.LoginUserData.Password)
      I.Click(PlatformLogin.Login.LoginData.LoginButton) 
  })

  })

Stage 2

How to use Fixtures (Load set of data located in a file)

copy Platform_Login.cy.js to the fixtures folder

Fat arrow function'=>' with normal function

this keyword not working on Fat arrow function

()=>   ==  function() 
(data)) => ==  function(data)

     describe('Test Login', () => { 
     ...
     //Not working 
     cy.fixture('PlatformLogins').then((data) => {
         this.data = data;         
         cy.log('e-mail: ',this.data.Email)
                
      })

PlatformLogins.json

  {
    "Name":"should login to Home page",
    "Email":"s.kodagoda@sana-commerce.com",
    "Password":"1smStandard@123",
    "Expected":"Invalid login attempt"    
  }
   

it('Test Fixture,Get All Platform Emails.', function() { 
    
      cy.fixture('PlatformLogins').then(function(TestDataList) {
        this.TestDataList = TestDataList;

        cy.log('e-mail: ',this.TestDataList.Email)          
    })      
  }) 

add another 'it'

  it('Test Fixture,Login Platform Emails.', function() { 
    
    cy.fixture('PlatformLogins').then(function(TestDataList) {
      this.TestDataList = TestDataList;

      cy.log('e-mail: ',this.TestDataList.Email)
    
     I.Fill(PlatformLogin.Login.LoginData.Email,this.TestDataList.Email)         
     I.Fill(PlatformLogin.Login.LoginData.Password,this.TestDataList.Password)
     I.Click(PlatformLogin.Login.LoginData.LoginButton)           
  })

Test with Multiple data

update PlatformLogins.json

[ 
    {
    "Name":"should login to Home page",
    "Email":"apitestuser@sana-commerce.com",
    "Password":"xxxxxxxxxxxxxxxxxxxxxx",
    "Expected":"Invalid login attempt"
    },
    {
        "Name":"should display incorrect user name message",
        "Email":"xxx@sana-commerce.com",
        "Password":"xxx@123",
        "Expected":"Invalid login attempt"
    },
    {
        "Name":"should display incorrect password message",
        "Email":"xxx@sana-commerce.com",
        "Password":"xxx@123",
        "Expected":"Invalid login attempt"
    }
]

add foreach to a basic method

it('Test Fixture,Get All Platform Emails.', function() { 
    
      cy.fixture('PlatformLogins').then(function(TestDataList) {
        this.TestDataList = TestDataList;

        this.TestDataList.forEach(testLogin => {
           cy.log('e-mail: ',testLogin.Email)
         })
        //cy.log('e-mail: ',this.TestDataList.Email)              
    })      
  })

add foreach to a Login

 it('Test Fixture,Login Platform Emails.', function() { 
    
    cy.fixture('PlatformLogins').then(function(TestDataList) {
      this.TestDataList = TestDataList;

      this.TestDataList.forEach(testLogin => {                
        I.Fill(PlatformLogin.Login.LoginData.Email,testLogin.Email)         
        I.Fill(PlatformLogin.Login.LoginData.Password,testLogin.Password)
        I.Click(PlatformLogin.Login.LoginData.LoginButton)
      })        
    })    
  }) 

create a folder fixture/testData and copy PlatformLogins.json

get file

const TestDataList = require('../../../fixtures/testData/PlatformLogins.json') 

// ~ ForEach Example ~

TestDataList.forEach(testLogin =>{

    it(testLogin.Name,() =>{
      I.Fill(PlatformLogin.Login.LoginData.Email,testLogin.Email)         
      I.Fill(PlatformLogin.Login.LoginData.Password,testLogin.Password)
      I.Click(PlatformLogin.Login.LoginData.LoginButton)
                

      if(testLogin.Name=="should login to Home page")
      {
          
      }
      else{
        I.SeeText(PlatformLogin.Login.LoginData.ErrorMessage,testLogin.Expected)    
        //cy.get(PlatformLogin.Login.LoginData.ErrorMessage).should('have.text',testLogin.Expected) 
      }

    })
  })

Cypress Hooks

Create file e2e/hooks.cy.js

/*
Order

1. before --> Execute once, as soon as the first Test Script is executed
2 beforeEach > Executed Before Each TS is executed
3. testExecution
4. afterEach >  Executed After Each TS is executed
5. after > Execute once, as soon as the Last Test Script is executed
*/

describe('',function(){

    before(function(){
        cy.log('Before')
    })
    beforeEach(function(){
        cy.log('Before each')
    })


    it('TC #1',function(){
        console.log('TC #1')
    })
    it('TC #2',function(){
        console.log('TC #2')
    })
    it('TC #3',function(){
        console.log('TC #3')
    })
    it('TC #4',function(){
        console.log('TC #4')
    })

    
    afterEach(function(){
        cy.log('After each')
    })

    after(function(){
        cy.log('After')
    })
})

Commands

video 12 (https://www.youtube.com/watch?v=66bEpdatEYQ&list=PLYDwWPRvXB8-8LG2hZv25HO6C3w_vezZb&index=12&ab_channel=JoanMedia)

support/commands.js

Cypress.Commands.add('typeLogin',(username,password)=>{
    cy.get('#Email').type(username)
    cy.get('#Password').type(password)
})

const PlatformLogin = require('../pageObjects/loginPages.json')

Cypress.Commands.add('typeLogin',(username,password)=>{
    cy.get(PlatformLogin.Login.LoginData.Email).type(username)
    cy.get(PlatformLogin.Login.LoginData.Password).type(password)
})

create file

e2e/Commands/commadsTest.cy.js

typeLogin can call anywhere ,support/e2e.js jas already import

//This is e2e.js 
//Import commands.js using ES2015 syntax:
import './commands'

describe('Command example',function(){
    beforeEach(function(){
        cy.visit('https://staging-platform.sana-commerce.com/')      

       cy.typeLogin('s.kodagoda@sana-commerce.com','abc')

    })

    it('Visits Sana framwork', () => {       
      cy.log('test comands')   
      cy.url().should('include', 'Home')   
      })
})

Add logout

command.js

Cypress.Commands.add('logout',()=>{    
    cy.get('.image > .img-circle').click()
    cy.get("#logoutForm > a").click()
})

commandTest.cy.js

it('Test Login', () => {       
      cy.log('test comands')  
      cy.url().should('include', 'Home')    
      })

      afterEach(function(){   <--------
        cy.logout()
      })

Move Logout details to pageobject

cypress/pageObject/homePages.json

{
    "Home": {
      "HeaderPanel": {
        "PlatformLogo": ".logo",
        "ProfileImage" : ".image > .img-circle",
        "ButonLogout" : "#logoutForm > a"
      }
    },
    "LeftPanelMenu": {
       "UserAccounts" : "//p[contains(text(),'User accounts')]",
       "ManageRolesMenuItem" : "//p[contains(text(),'Manage roles')]"
    
    }
}

update loginHelper

export function I_Login(){
  ...
}

export function I_Logout(){
    I.Click(PlaformHome.Home.HeaderPanel.ProfileImage)
    I.Click(PlaformHome.Home.HeaderPanel.ButonLogout)   
}

How Login/Logout use in Sana platform Code.

use separate Hepler class cypress/helpers/loginHelper.js

const I = require('../testbase/testbase')
const PlatformTestData = require('../fixtures/platformLoginData.json')
const PlaformLogin = require('../pageObjects/loginPages.json')

export function I_Login(){
    I.Fill(PlaformLogin.Login.LoginData.Email,PlatformTestData.Login.LoginUserData.Email)
    I.Fill(PlaformLogin.Login.LoginData.Password,PlatformTestData.Login.LoginUserData.Password)
    I.Click(PlaformLogin.Login.LoginData.LoginButton)
}

create file e2e/Platfrom/Home/PlatformHome.cy.js

import { I_Login } from "../../../helpers/loginHelper";

describe('Home page Testing', () => {
    it('get url from config file', () => {      
      cy.visit('https://staging-platform.sana-commerce.com/')           
  
      I_Login()
    
    })
  })

How to add site URL on config file

update cypress.config.js

Old versions have cypress.json but with new version its use on cypress.config.js

 ...
  e2e: {
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
    baseUrl: 'https://staging-platform.sana-commerce.com/'
  },
});

PlatformHome.cy.js

import { I_Login } from "../../../helpers/loginHelper";

describe('Home page Testing', () => {
    it('get url from config file', () => {
      cy.visit(Cypress.config().baseUrl)
     
      I_Login()    
    })
  })

Move Visit method to testbase.js

    SeeText(locator, expectedText)
    {  ...  }

    Open(url="")
    {
        cy.visit(url);
    }

PlatformHome.cy.js

import { I_Login } from "../../../helpers/loginHelper";
const I = require('../../../testbase/testbase')

describe('Home page Testing', () => {
    it('get url from config file', () => {

      I.Open(Cypress.config().baseUrl)
      I_Login()    
    })
  })

If only import a function inside a file separately.

import { I_Login } from "../../../helpers/loginHelper";

if want to access all methods/functions

const LoginHelper = require('../../../helpers/loginHelper')

PlatformHome.cy.js

const LoginHelper = require('../../../helpers/loginHelper')
const I = require('../../../testbase/testbase')

describe('Home page Testing', () => {
    it('get url from config file', () => {
  
      I.Open(Cypress.config().baseUrl)
      LoginHelper.I_Login()       
      LoginHelper.I_Logout()    
    })
  })

add before each and after each.

const LoginHelper = require('../../../helpers/loginHelper')
const I = require('../../../testbase/testbase')

describe('Home page Testing', () => {
    beforeEach(function(){
        I.Open(Cypress.config().baseUrl)
        LoginHelper.I_Login()
    })

    it('get url from config file', () => {
      
      cy.log('test comands')
      cy.url().should('include', 'Home') 
    
    })

    afterEach(function(){
        LoginHelper.I_Logout()
      })

  })

Log and URL assertion move to testbase.js

Open(url="")
    {
       ...
    }
    Log(text){
        cy.log(text) 
    }
    UrlInclude(pageName){
        cy.url().should('include', pageName)
    }
    SeeInTitle(pageTitle)
    {
        cy.title().should('contain', pageTitle);
    }

PlatformHome.cy.js

describe('Home page Testing', () => {
    beforeEach(function(){
      ..
    })

    it('get url from config file', () => {     
      I.Log('test comands') 
      I.UrlInclude('Home')  
      I.SeeInTitle('Sana Platform')  
    })
    ...  
  })

Login with Session

need to add following to cypress.config.js

experimentalSessionAndOrigin : true 

const { defineConfig } = require("cypress");

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
    baseUrl: 'https://staging-platform.sana-commerce.com/',
    experimentalSessionAndOrigin : true   
  },
});

following example can pass session name as single string or multiple strings.

describe('Login test with session', () => {
   
    beforeEach(()=>{
        
        cy.session('user',()=>{       //<-------- single string 
            LoginHelper.I_Login()
           })
    })

multiple strings.

cy.session(['user','password',.....],()=>{

update login helper

export function I_Login(){
   
    I.Open(Cypress.config().baseUrl) <--------
    I.Fill(PlaformLogin.Login.LoginData.Email,PlatformTestData.Login.LoginUserData.Email)
    I.Fill(PlaformLogin.Login.LoginData.Password,PlatformTestData.Login.LoginUserData.Password)
    I.Click(PlaformLogin.Login.LoginData.LoginButton)
}

export function I_LoginWithSession(){
    cy.session('user',()=>{         
        I.Open('/')
        I.Fill(PlatformLogin.Login.LoginData.Email,PlatformTestData.Login.LoginUserData.Email)
        I.Fill(PlatformLogin.Login.LoginData.Password,PlatformTestData.Login.LoginUserData.Password)
        I.Click(PlatformLogin.Login.LoginData.LoginButton)
    })
}

When use commands.js

const PlatformLogin = require('../pageObjects/loginPages.json')
const PlatformTestData = require('../fixtures/platformLoginData.json')
const I = require('../testbase/testbase')

...

Cypress.Commands.add('LoginWithSession',()=>{
    cy.session('user',()=>{               
        I.Open('/')
        I.Fill(PlatformLogin.Login.LoginData.Email,PlatformTestData.Login.LoginUserData.Email)
        I.Fill(PlatformLogin.Login.LoginData.Password,PlatformTestData.Login.LoginUserData.Password)
        I.Click(PlatformLogin.Login.LoginData.LoginButton) 
    })

})

before and after use session Time reduce

always need to call the base URL

it('Validate main 4 items',()=>{
      I.Open('/')  <---------------
           
      cy.get('.container-fluid .row').find('.col-lg-3').should('have.length', 4)

    })

use unique id for session

Install uuid

npm install uuid

command.js

import { v4 as uuidv4 } from 'uuid';
const userUuid = "user_"+uuidv4();   //<-----

Cypress.Commands.add('LoginWithSession',()=>{  
   
    cy.session(userUuid,()=>{    //<-----
    //cy.session('user',()=>{    
        //cy.log("uuid :"+userUuid)
        I.Open('/')
        I.Fill(PlatformLogin.Login.LoginData.Email,PlatformTestData.Login.LoginUserData.Email)
        I.Fill(PlatformLogin.Login.LoginData.Password,PlatformTestData.Login.LoginUserData.Password)
        I.Click(PlatformLogin.Login.LoginData.LoginButton) 
    })

})

Update homePages.json

 "Home": {
  ...
"DashBoardCards":[
        {  
          "Name":"ActiveTrial",     
          "Button":":nth-child(1) > .small-box > .small-box-footer",
          "RedirectUrl":"Webstore/AllWebstores?category=Active%20Trials",
          "DetailPageRedioButton":"#activeTrialsCheckBox"
        },
        {
          "Name":"InProduction",  
          "Button":":nth-child(2) > .small-box > .small-box-footer",
          "RedirectUrl":"Webstore/AllWebstores?category=In%20Production",
          "DetailPageRedioButton":"#inProductionCheckBox"
        },      
        {
          "Name":"ExpiredTrials",  
          "Button":":nth-child(3) > .small-box > .small-box-footer",
          "RedirectUrl":"Webstore/AllWebstores?category=Expired%20Trials",
          "DetailPageRedioButton":"#extendTrialsCheckBox"
        },     
        {
          "Name":"ExpiredTrials",  
          "Button":":nth-child(4) > .small-box > .small-box-footer",
          "RedirectUrl":"#",
          "DetailPageRedioButton":"#archivedCheckBox"
        }
      ] 

PlatformHome.cy.js

 ...

it('Redirect to Active trails',()=>{
      I.Open('/')
      I.Click(HomePage.DashBoard.DashBoardCards.ActiveTrial.Name)      
      I.UrlInclude(HomePage.DashBoard.DashBoardCards.ActiveTrial.RedirectUrl)
      //I.Wait(1000)      
      cy.get(HomePage.DashBoard.DashBoardCards.ActiveTrial.DetailPageRedioButton).should('be.checked').and('have.value', 'Active Trials')
      
    })  

    it('Redirect to In production',()=>{
      I.Open('/')
      I.Click(HomePage.DashBoard.DashBoardCards.InProduction.Name)      
      I.UrlInclude(HomePage.DashBoard.DashBoardCards.InProduction.RedirectUrl)
      cy.get('#inProductionCheckBox').should('be.checked').and('have.value', 'In Production')
      
    })
 ...

To reduce code, we can write above as following

PlatformHome.cy.js

//use for each 
    const dashBoardCards = HomePage.DashBoardCards;
    
    dashBoardCards.forEach(dashBoardCard =>{
      it("Testing Dash board card: " + dashBoardCard.Name,() =>{
       
         I.Open('/')
         I.Click(dashBoardCard.Button)      
         I.UrlInclude(dashBoardCard.RedirectUrl)
         I.Wait(1000)      
          cy.get(dashBoardCard.DetailPageRedioButton)
          .should('be.checked')
          .and('have.value', dashBoardCard.RedioButtonValue)        
      })
    })

Home Header buttons

homePage.json

"Home": {
       ...
        "TopMenu":[{
          "Name":"Manage",
          "Button":".main-header > .navbar-nav > :nth-child(1) > .nav-link",
          "RedirectUrl":"/Webstore/AllWebstores"
          
        },
        {
          "Name":"New",          
          "Button":".navbar-nav > :nth-child(2) > .nav-link",
          "RedirectUrl":"/Webstore/Install"          
        },
        {
          "Name":"Create",
          "Button":".navbar-nav > :nth-child(3) > .nav-link",
          "RedirectUrl":"/User/CreateUser"          
        },
        {
          "Name":"Help",
          "Button":".navbar-nav > :nth-child(4) > .nav-link",
          "RedirectUrl":"/help"          
        }
      ]
      }
    },

How to write one by one

//Home Header buttons : Manage
    it('Redirect to Expired Trials',()=>{
      I.Open('/')
       //const ss = HomePage.Home.HeaderPanel.TopMenu;

      I.Click(HomePage.Home.HeaderPanel.TopMenu[0].Button)        
      I.UrlInclude(HomePage.Home.HeaderPanel.TopMenu[0].RedirectUrl)
      cy.get(HomePage.Home.HeaderPanel.TopMenu[0].DetailPageRedioButton).should('be.checked')
      .and('have.value', 'All') 
    })  

Home page Left Panel menu Testing

NewInstallation.json

 },
    "LeftPanelMenu": {
       "MenuButton":"cy.get('.main-nav-wrapper > .navbar-nav > .nav-item > .nav-link')",
       "LeftPanelMenuItems":[
        {
          "Name":"Installations",
          "Button":".active",
          "MenuItems" :[{
            "Name":"New installation",
            "Button":".menu-open > .nav > :nth-child(1) > .nav-link",
            "RedirectUrl":"/Webstore/Install"           
          },
          {
            "Name":"All installations",
            "Button":".menu-open > .nav > :nth-child(2) > .nav-link",
            "RedirectUrl":"/Webstore/AllWebstores"
          }
        ]
          
        },
        {
          "Name":"Approvals",
          "Button":"#approvalMenu > [href='#']",
          "MenuItems" :[{
            "Name":"New installation",
            "Button":"#approvalMenu > .nav > :nth-child(1) > .nav-link",
            "RedirectUrl":"/Approval/WebstoreInstallationRequests"           
            }
          ]           
        }
       ]         
    },

Platform.cy.js

 // Left Panel Menu --------------------------------------------------

    const leftPanelMenuItems = HomePage.LeftPanelMenu.LeftPanelMenuItems;
    leftPanelMenuItems.forEach(leftPanelMenuItem =>{
     
      const subMenuItems = leftPanelMenuItem.MenuItems;
      subMenuItems.forEach(subMenuItem =>{

        it("Left Panel: " + leftPanelMenuItem.Name+" : " + subMenuItem.Name,() =>{
        
          I.Open('/')
          I.Click(leftPanelMenuItem.Button)    
          I.Click(subMenuItem.Button)      
          I.UrlInclude(subMenuItem.RedirectUrl)          
        })
      })

Add Snippet for VS Code

Ctrl +shift +p

type "snippet"

select javascript it will open javascript .js file

"Console log":{
        "prefix":"cl",
        "body":"console.log($1);",
        "description": "Console Log"
    }

When yo type cl it will create the code for you

 console.log(); 

https://snippet-generator.app/

    },
    "IT": {
        "prefix": "it",
        "body": [
          "it(${1:functionName},()=>{",
          "})"
        ],
        "description": "IT"
      }

after use

     it(functionName,()=>{
     })

cypress screenshort.

it(userData.Title,() =>{
    I.Fill(PlatformLogin.Login.LoginData.Email,userData.Email)         
    I.Fill(PlatformLogin.Login.LoginData.Password,userData.Password) 
   
     cy.screenshot(); //<----

  })

it will create a new folder.

How to retry

 ...
    baseUrl: 'https://staging-platform.sana-commerce.com/',
    experimentalSessionAndOrigin : true  , 
    retries:2 // 1 + 2 extra times 
  },
});

Configure Dashboard

Cypress.config.js

module.exports = defineConfig({
....
    retries:3,
    projectId: "w81smh"
  },
});

cypress dashboard

https://www.youtube.com/watch?v=ydTviHjpxh0&ab_channel=JoanMedia

past on :cypress.config.js

  e2e: {
    .....
    retries:3,
    projectId: "w81smh"  // <-------
  },

npx cypress run --record --key da6d9485-4c46-49f9-b5e3-c4a9926889ef

Note: To locate the project-id and record-key of your Cypress project, navigate to Project > Project Settings in the Cypress dashboard. You can find the project-id and record-key under the General and

cypress-axe

https://www.npmjs.com/package/cypress-axe

npm install --save-dev cypress-axe

package.json record adds automatically.

 "cypress-axe": "^1.0.0",

add e2e.js

import 'cypress-axe'

accessbility.cy.js

describe('Testing', () => {    
     
    it("How to test accesbility",()=>{
        cy.visit("https://staging-platform.sana-commerce.com/")
        cy.injectAxe() // staart the injector / scan the site
        cy.checkA11y()

    })

 })

improve

https://www.youtube.com/watch?v=TaBhwaOy1XI&ab_channel=Sparkbox

Add Emoji

click extension > type emoji

install

File >Preferance > Settings

User Tab> Extention > :emojisense > Edit in Settings .json

paset the flowing test inside emojisense.languages

"javascript.validate.enable": false, "abap": true, "bat": true, "bibtex": true, "clojure": true, "coffeescript": true, "c": true, "cpp": true, "csharp": true, "css": true, "diff": true, "dockerfile": true, "fsharp": true, "git-commit": true, "git-rebase": true, "go": true, "groovy": true, "handlebars": true, "html": true, "ini": true, "java": true, "javascript": true, "javascriptreact": true, "json": true, "jsonc": true, "latex": true, "less": true, "lua": true, "makefile": true, "markdown": true, "objective-c": true, "objective-cpp": true, "perl6": true, "php": true, "powershell": true, "jade": true, "python": true, "r": true, "razor": true, "ruby": true, "rust": true, "scss": true, "sass": true, "shaderlab": true, "shellscript": true, "sql": true, "swift": true, "typescript": true, "typescriptreact": true, "tex": true, "vb": true, "xml": true, "xsl": true, "yaml": true }

full doc looks like as following

{
    "diffEditor.codeLens": true,
    "javascript.referencesCodeLens.enabled": true,
    "javascript.referencesCodeLens.showOnAllFunctions": true,
    "typescript.implementationsCodeLens.enabled": true,
    "typescript.referencesCodeLens.enabled": true,
    "typescript.referencesCodeLens.showOnAllFunctions": true,
   
    "emojisense.languages": {

        "markdown": true,
        "plaintext": {
            "markupCompletionsEnabled": true,
            "emojiDecoratorsEnabled": true
        },
        "scminput": true,
        "git-commit": true,

        "javascript.validate.enable": false,
        "abap": true,
        "bat": true,
        "bibtex": true,
        "clojure": true,
        "coffeescript": true,
        "c": true,
        "cpp": true,
        "csharp": true,
        "css": true,
        "diff": true,
        "dockerfile": true,
        "fsharp": true,
        "git-commit": true,
        "git-rebase": true,
        "go": true,
        "groovy": true,
        "handlebars": true,
        "html": true,
        "ini": true,
        "java": true,
        "javascript": true,
        "javascriptreact": true,
        "json": true,
        "jsonc": true,
        "latex": true,
        "less": true,
        "lua": true,
        "makefile": true,
        "markdown": true,
        "objective-c": true,
        "objective-cpp": true,
        "perl6": true,
        "php": true,
        "powershell": true,
        "jade": true,
        "python": true,
        "r": true,
        "razor": true,
        "ruby": true,
        "rust": true,
        "scss": true,
        "sass": true,
        "shaderlab": true,
        "shellscript": true,
        "sql": true,
        "swift": true,
        "typescript": true,
        "typescriptreact": true,
        "tex": true,
        "vb": true,
        "xml": true,
        "xsl": true,
        "yaml": true        
    }
}

Then Type -- > :Circle

/*
  //checkPageA11y
  //https://www.youtube.com/watch?v=TaBhwaOy1XI&ab_channel=Sparkbox
  Cypress.Commands.add('checkPageA11y', (path) => {
      
      cy.visit(path)
      cy.injectAxe() // staart the injector / scan the site
      cy.checkA11y(null,null,callback)
    })
    

function callback(violations){

    violations.forEach(violation =>{
        const nodes = Cypress.$(violation.nodes.map(node=> node.target).join(','))

        Cypress.log({
            name:`${severityIndicators[violation.impact]} A11y`,
            consoleProps:()=> violation,
            $el:nodes,
            message:`[${violation.help}](${violation.helpUrl})`
        })

        violation.nodes.forEach(({target}) => {
            Cypress.log({
                name: '🔧',
                consoleProps:() => violation,
                $el: Cypress.$(target.join(',')),
                message:target
            })
        })


    })
}
const severityIndicators={
    minor: 'Minor ⚪',
    moderate: 'Moderate 🟡',
    serious: 'Serious 🟠',
    critical: 'Critical 🔴'
    
}

*/

accesbilityhelper.js

  //checkPageA11y
  //https://www.youtube.com/watch?v=TaBhwaOy1XI&ab_channel=Sparkbox

const severityIndicators={
    minor: 'Minor ⚪',
    moderate: 'Moderate 🟡',
    serious: 'Serious 🟠',
    critical: 'Critical 🔴'
}

function callback(violations){

    violations.forEach(violation =>{
        const nodes = Cypress.$(violation.nodes.map(node=> node.target).join(','))

        Cypress.log({
            name:`${severityIndicators[violation.impact]} A11y`,
            consoleProps:()=> violation,
            $el:nodes,
            message:`[${violation.help}](${violation.helpUrl})`
        })

        violation.nodes.forEach(({target}) => {
            Cypress.log({
                name: '🔧',
                consoleProps:() => violation,
                $el: Cypress.$(target.join(',')),
                message:target
            })
        })


    })
}

export function I_CheckPageAccesbility_A11y(path){
      
    cy.visit(path)
    cy.injectAxe() // start the injector / scan the site
    cy.checkA11y(null,null,callback)
}

Type script

install

npm install --save-dev typescript

it will add record in package.json

"devDependencies": {
    "cypress": "^10.3.0",
    "cypress-axe": "^1.0.0",
    "cypress-xpath": "^2.0.0",
    "typescript": "^4.8.4" <------------------------
  },

Configure tsconfig.json

We recommend creating a tsconfig.json inside your cypress folder with the following configuration:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["es5", "dom"],
    "types": ["cypress", "node"]
  },
  "include": ["**/*.ts"]
}

Invoke

can use the Jquery function inside cypress

cy.get('#IPAddresses').invoke('attr', 'placeholder').should('contain', 'The partne..')

cypress file upload

npm install --save-dev cypress-file-upload

find

        // cy.get(".card-columns").find('.card').each(($card) => {
        cy.get(overviewPage.Overview.CardsPath).each(($card) => {            
            count += 1 
        }).then(() =>{
            expect(count, 'count').to.equal(8)
            cy.get(overviewPage.Overview.CardsPath).its('length').should('eq', count)
        }) 

testautomationu.applitools.com

from: https://testautomationu.applitools.com/cypress-tutorial/chapter3.html

Whether Cypress will watch and restart tests on test file changes.

watchForFileChanges:false //it will control restart tests on test file changes.

Delay an element

?delay-new-todo=5000'

cy.get('.new-todo',{timeout:6000})

it("functionName",()=>{
    cy.visit('http://todomvc-app-for-testing.surge.sh/?delay-new-todo=5000')
   
    cy.get('.new-todo',{timeout:6000}).type("Clean room{enter}")
})

How to get the length of the collection and return

it.only("Multiple assertions",()=>{
     
        cy.get("table[id='partnerGrid'] thead > tr >th")
         .then(item =>{
                
            const listingCount = item.length
            //const listingCount = Cypress.$(item).length;
            cy.log("List count "+listingCount)              
           
         })              
        
     }) 

simple way

 cy.get("#partnerGrid>thead>tr>th").should('have.length','4')

How to throw an error

 throw new Error("sdsdsd")

Expect text

expect(item[1]).to.contain.text('Sana ERP partner')

https://testautomationu.applitools.com/advanced-cypress-tutorial/chapter4.html

When the element is hidden

 cy.get("location").invoke('show')
        .click()

        // add css class 
 cy.get("location")
        .invoke('addClass','NewClassName')
        
        //hover change event trigger
 cy.get("location")
        .trigger('mouseover')

environment variables

export function FillGenerateName(locator,name){
    const randomName = Name_Alpha_Numeric()
    name = name+randomName
    cy.get(locator).type(name)
    
    // Create Environment variables
    Cypress.env('GenerateWebStoreName', name)  //<-------------
    return name;
}

  let webStoreName = Cypress.env('GenerateWebStoreName')

Get name from and assign to the variable

 cy.get(allWebStoresTable.LatestWebStoreNamePath)
         .then(item =>{
                 webStoreName = item.text() 
                 I.Log("Site Name inside: "+ webStoreName)

covert API response to json

convert json to string
const webstores =JSON.stringify(res.body)
cy.log(webstores)

Cypress Auto-completion use following

/// <reference types="cypress"/>

---------------------------------------------------------------------------

Install Cypress Grep for tagging

npm install -g cypress-grep

npm i -D @cypress/grep --force

it will auto-update package,json and package-lock.json

update e2e.ts

// Import commands.js using ES2015 syntax:
import './commands'
import './commands/commands'
import 'cypress-axe'
import 'cypress-file-upload'

// Alternatively you can use CommonJS syntax:
// require('./commands')
require('cypress-xpath');

 const registerCypressGrep = require('@cypress/grep')
 registerCypressGrep()

// if you want to use the "import" keyword
// note: `./index.d.ts` currently extends the global Cypress types and
// does not define `registerCypressGrep` so the import path is directly
// pointed to the `support.js` file
import registerCypressGrep from '@cypress/grep/src/support'
registerCypressGrep()

add command so no need to call all the cy.ts pages

describe('🥇 Field Verification',{tags:'@smoke'}, () => {

npx cypress run --env grepTags=@smoke

npx cypress run --headed --env grepTags=@smoke --record --key 56dcf788-902a-42f3-ba5f-93b05694a61d

How to run Head mode

npx cypress run --headed

Add reporting to Cypress

install cypress-mochawesome-reporter

follow this : https://www.npmjs.com/package/cypress-mochawesome-reporter

1 install cypress-mochawesome-reporter

npm i --save-dev cypress-mochawesome-reporter

--force

use following to ignore warnings

npm i --save-dev cypress-mochawesome-reporter --force

it will update package.json

 "cypress-mochawesome-reporter": "^3.5.0", <--------------------

2 Change cypress reporter & setup hooks

const { defineConfig } = require('cypress'); module.exports = defineConfig({ reporter: 'cypress-mochawesome-reporter', e2e: { setupNodeEvents(on, config) { require('cypress-mochawesome-reporter/plugin')(on); }, }, });

3 Add to cypress/support/e2e.js

import 'cypress-mochawesome-reporter/register';

it will create a folder as

~\cypress\reports\html

-----------------------------------------------------------------------------------------------------------

Change base URL on comandline

package.json

"scripts": {
...

"cypress:open4": "cypress open --config baseUrl=http://www.google.com/",

},

execute as follows,

npm run cypress:open4

Visual testing

https://applitools.com/

https://applitools.com/tutorials/quickstart/web/cypress#applitools-eyes-cypress-sdl

to install

npm install @applitools/eyes-cypress

and

npx eyes-setup

it will add new dependency to 'package.json'

Cypress Chrome recorder

https://www.youtube.com/watch?v=-RJuZrq-wOk&t=194s&ab_channel=Cypress.io

1. install the chrome browser extension.

2. record the process and save

3. When saving as JSON you need to convert JSON to a cypress file

to do that we are required to install following

npm install --location=global @cypress/chrome-recorder

(disable the Global protector)

4. after installation, convert the file.

create output folder path (cypress/tests/ui )

npx @cypress/chrome-recorder D:/Recordingcy.json -o=cypress/tests/ui

or use Export via extension > cypress Test

Cypress Cross-origin testing

install "@cypress/webpack-preprocessor"

cypress.config.ts set following

chromeWebSecurity:false

experimentalOriginDependencies :true,

To prevent button click exceptions use

Cypress.on('uncaught:exception', (err, runnable) => {
    // returning false here prevents Cypress from failing the test
    return false
  })

Cypress API plugging

https://www.youtube.com/watch?v=kENXELkT4O4&ab_channel=LambdaTest

npm install --save-dev @bahmutov/cy-api

command.ts

import '@bahmutov/cy-api'

update tsconfig.json

"types": ["cypress", "node","cypress-xpath","cypress-axe","@bahmutov/cy-api"],

output

Cy spok

npm i -D cy-spok

its uses to make expected body items value generic

chai-json-schema

npm install chai-json-schema

e2e.ts

chai.use(require('chai-json-schema'));

Json Not working with typescript

to fix add folowing to tsconfig file

{
  "compilerOptions": {
   ...
    "resolveJsonModule": true,   <-------------------
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true, // use json import
  },
  
}

cypress API New with new update

https://www.npmjs.com/package/cypress-plugin-api

npm i cypress-plugin-api

it will add new dependent

"dependencies": {
    "chai-json-schema": "^1.5.1",
    "cypress-plugin-api": "^2.11.0"  <--------------------------------
  }

Learn New Tech

Cypress Basic to Advance

Stage 2

How to add site URL on config file

Login with Session

Add Snippet for VS Code

cypress screenshort.

Configure Dashboard

cypress-axe

Add Emoji

npm install -g cypress-grep

npm i -D @cypress/grep --force

Add reporting to Cypress

install cypress-mochawesome-reporter

--force

Cypress Cross-origin testing

chai-json-schema