Cypress with Type script

https://testautomationu.applitools.com/cypress-with-typescript/chapter1.html

//user can define own types on type script
type EvenNumbers = 2|4|6

export  const add = (a: number , b :EvenNumbers) =>{
    return a+b
}

add(21,2,4)


install type script Globerly

> npm i typescript -g

To view all different commands and flages 

> tsc 

it will convert TS file to JS 


Cypress Auto-completion use following

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

but when using type script by adding default type script config file 

references will help auto load 

tsconfig.ts 

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



custom commands on Type script and add header description


export { } // use to remove higlight errors
declare global {
    namespace Cypress{
        interface Chainable{
            findLocator2(input:string):
            Chainable<any>
        }

    }
}

Cypress.Commands.add('findLocator2',(locator:string)=>{    
           
Cypress.log({
    displayName:'getByPlaceholder',
    message:locator,
    consoleProps(){
        return {
            selector: locator
        }
    }
})

    return cy.get('${locator}',{
        log:false
    })
})

Add example 

/**
             * Get a dom value path
             * @param input locator value
             * @example <---------------
             * //this command
             * cy.findlocator('your locator path')
             */

function is not use anymore/ obsalete

@deprecated


When having error on XPath with type script


1 add this in your tsconfig.json file.

"cypress-xpath"

{
    "compilerOptions": {
      "target": "es5",
      "lib": ["es5", "dom"],
      "types": ["cypress", "node","cypress-xpath"], //<------------
      "resolveJsonModule": true
    },
    "include": ["**/*.ts", "support/commands.js"]
}

import "cypress-xpath" to command.ts file

import "cypress-xpath"



Set specific value without using constent values

Create file helper\Typing\Placeholders.ts

export type Attribute = 'attr'|'src'|'title'

export type Placeholder = 'placeholder'|'test'


create method using above mention types

InvokeAttrShould(locator:string,attr:Placeholders,placeholder:string,contain:string,message:string){
       
        cy.get(locator).invoke(attr,placeholder)
        .should(contain,message)              
    }

when use it,only able to type given values

I.InvokeAttrShould(partner.IPAddresses,
'attr', //<----------------------------
'placeholder',// <---------------------------
        'contain',
        partnerData.IPAddressesPlaceholder)      



Change class to models

https://stackoverflow.com/questions/32805559/typescript-es6-import-module-file-is-not-a-module-error

// test.js - exporting es6

export module App {
  export class SomeClass {
    getName(): string {
      return 'name';
    }
  }
  export class OtherClass {
    getName(): string {
      return 'name';
    }
  }
}

And now we can import it with these thre ways:

import * as app1 from "./test";
import app2 = require("./test");
import {App} from "./test";

And we can consume imported stuff like this:

var a1: app1.App.SomeClass  = new app1.App.SomeClass();
var a2: app1.App.OtherClass = new app1.App.OtherClass();

var b1: app2.App.SomeClass  = new app2.App.SomeClass();
var b2: app2.App.OtherClass = new app2.App.OtherClass();

var c1: App.SomeClass  = new App.SomeClass();
var c2: App.OtherClass = new App.OtherClass();

and call the method to see it in action:

console.log(a1.getName())
console.log(a2.getName())
console.log(b1.getName())
console.log(b2.getName())
console.log(c1.getName())
console.log(c2.getName())


change json imports to 


old (it will not read data inside)

const HomePage = require('../../../pageObjects/Home/homePages.json')

New 

import HomePage = require('../../../pageObjects/Home/homePages.json');


















 

Delete table before install

 DECLARE @TestId AS VARCHAR(100)='58311'

  delete FROM [SanaPlatform].[dbo].[WebStoreAzureSettings]  where [WebStoreId] =@TestId

  delete FROM [SanaPlatform].[dbo].[WebstoreDatabaseUsers]  where [WebStoreId] =@TestId

  delete FROM [SanaPlatform].[dbo].[WebStoreDomains]  where [WebStoreId] =@TestId

  delete  FROM [SanaPlatform].[dbo].[WebstoreEmailSettings]  where [WebStoreId] =@TestId

  delete FROM [SanaPlatform].[dbo].[WebstoreInfoEmailSentLogs]  where [WebStoreId] =@TestId

  delete  FROM [SanaPlatform].[dbo].[WebstoreLifeCycles]   where [WebStoreId] =@TestId

  delete FROM [SanaPlatform].[dbo].[WebstoreMaintenanceEmails]  where [WebStoreId] =@TestId

  delete FROM [SanaPlatform].[dbo].[WebStores] where [WebStoreId] = @TestId