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"]
}
2 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');