Cypress JavaScript

Monday, November 15, 2021 10:05 AM

Training

Start Time : 10 AM
Break 1 : 11:30 AM
Lunch : 1PM - 2PM
Break 2 : 4 PM
End Time : 6PM

JavaScript
Not like other languages
It is Asynchronous

Selenium

2017 : Async Await

• Before 2010 JavaScript can be executed only in browser

• Browser understands
○ HTML
○ CSS
○ JavaScript
• Browser Engine (Blink used by Chrome)
○ Js Engine

Chrome V8
Firefox SpiderMonkey
Safari JavaScript Core

All these engines are developed as per ECMA Standards

JavaScript follows ECMA Standards

ActionScript
Jscript

NodeJS is used to execute JavaScript outside of Browser

It is like JRE for Java
With NodeJS you can execute JavaScript like other languages

Eclipse
IntelliJ

New Section 5 Page 1

VSCode

JavaScript Basics

• Variables
• Datatypes
• Constants
• Arrays
• Conditions
• Loops

Develop

Reuse
Functions
Classes
Extend
OOPS

Core JS
Asynchronous to Synchronous

Data Types

• JavaScript dynamic typed language

• We don’t need to specify data type
• We can store
○ Number
○ String
○ Boolean
○ Object
○ Undefined
○ Null
• We can define variables using var or let keyword
• When declared variable using var or let the initial value is undefined
• If we use "use strict" in the first line then we must declare variables

Module Concept:

• A JavaScript file is a module

• We reuse code from one file other file using import and export
• We can export using module.exports = { specify members here };
• Specify this statement at the end of js file
• We can reuse with let {specify members here } = require('filePath')
• This is like named import
• We can import all by assigning all members to variable
○ let variable = require('filePath');
Variable.memberName

New Section 5 Page 2

 ○ Variable.memberName
• We can also use import and export keywords for reusing
• But we cannot directly use these keywords
• Change the file extensions to .mjs for both the export file and import file
• Use export memberName or at the end use export{ specify required members}
• For Named imports: Use import {member names} from "FilePath"
• To import all use import * as variable from "filepath"
• There is another way we can use without modifying to .mjs extension
• Create package.json file
○ Terminal -> new terminal
○ Execute command npm init -f
○ Observe that it creates a package.json file
○ It is like pom.xml in maven
• In that file create below key value pair and save it
○ "type":"module"
• With this change you don't need to change extension to .mjs

Error Handling
JS have below error types by default
Reference Error Accessing something which is not there
Syntax Error Not following javascript syntax
Type Error Like applying string methods on number
•
Range Error Like Exceeding rage in floating point
EvalError deprecated : now we are getting the actual error
URIError Developers usually get this if the url is malformed

• To handle any kind of error we use try catch finally block

• In javascript we can have only one catch block
• We can use if condition to segregate between errors

Asynchronous

• In early stage developers managed to get synchronous behaviour with callback

• But it is difficult if there are many functions to get one after another
• Thats when Promise concept is used to create synchronous behaviour
• Promise can be create with Promise constructor
• new Promise(callback)
• the callback function should have two parameters
• first parameter is resolved, second parameter is rejected
• promise will have 3 states
○ Pending : Promise is still running
○ Resolved : Promise is successful
○ Rejected : Promise is failed
• We can apply two methods on promise
○ Then(callback)
 This will be executed after promise resolved
○ Catch(callback)
 This will be execute after promise rejected

New Section 5 Page 3

Starting with Cypress

• Install Cypress
○ Open Terminal
○ Execute command npm i cypress
○ Open cypress with command npx cypress open
○ Now a folder structure will be created and also cypress test runner will be opened
• Cypress by default bundled with mocha framework
• By default we create tests
○ We have describe and it blocks
○ Describe block is like scenario (Test class in TestNG)
○ It block is like a test case or test step (@Test method in TestNG)
○ Each it block will have pass or fail status
○ Describe and it blocks takes two parameters
 1st parameter is description
 2nd parameter is callback

New Section 5 Page 4