Learn Cypress With Typescript

  1. Home
  2. Cypressio
  3. Learn Cypress With Typescript

Tags: Cypress.io

Web Automation Testing using Cypress IO

Last updated 2022-01-10 | 4.1

- TypeScript Programming
- Web UI Automation using Cypress

What you'll learn

TypeScript Programming
Web UI Automation using Cypress

* Requirements

* Need to know basics of software testing.

Description

Cypress - The most Buzzing word in Automation world which is expected to play a key role in future for its fast, easy and reliable testing for anything that runs in a browser.

Because of its Architectural design, Cypress comes with out of box capabilities to bring Stable Automation results for all Modern Web Apps.

It also have the ability to perform Integration testing by mocking incoming network responses

For Test Debugging, Cypress takes Screenshot by default for every test step and generate execution mp4 video after every test run.

Topics Covered in this Course:

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

TypeScript Programming

  • Overview on TypeScript

  • Environment setup on Windows

  • TypeScript Variables

  • TypeScript Data Types

  • TypeScript Operators

  • TypeScript Strings

  • Conditional Statements

  • Loops

  • Arrays

  • Tuples

  • Functions

  • Class, Object & Methods

  • Inheritance

  • Interface

  • Modules


    Web Automation using Cypress

  • Cypress Introduction

  • Environment setup on Windows

  • Environment setup on Mac

  • Test Runner

  • First Test Case

  • How To Run Cypress Test

  • Cypress Project Folder structure

  • Locators

  • Working with UI Elements

  • Handling Alerts

  • Navigation's

  • Handle Table

  • Working with hooks

  • Working with fixtures

  • Custom Commands in Cypress

  • Page Object Model Pattern

  • Cypress Command Line & Dashboard services

  • Continuous Integration with Cypress and Jenkins



Who this course is for:

  • Freshers, Manual Testers, Automation Testers

Course content

2 sections • 35 lectures

TypeScript Programming for Cypress 15 lectures

Overview on TypeScript Preview 11:16

  • What is TypeScript?

  • Why TypeScript?

  • How to use TypeScript?

  • TypeScript Features

  • TypeScript Advantages

  • Key Differences between JavaScript and TypeScript

Environment setup on Windows Preview 19:51

Pre-requisites:

1. NodeJS

2.Typescript

3.Visual Studio Code

Installation steps:

Step 1 : Download and install node.js

Download link: https://nodejs.org/en/download/

node --version

Step2: Install Typescript

▪ npm install -g typescript --> install latest version

▪ npm install -g [email protected] --> Install specific version

▪ npm uninstall -g typescript --> Un-install typescript

▪ tsc -v -- returns version of typescript

Step3: Install VisualStudio Code

Step4: Create TypeScript project in VisualStudioCode

Step5: Basic typescript program

Step6: Compilation

▪ tsc filename.ts

Step7: Run JS program in console

▪ node fielname.js


▪npm install --save @types/jquery à to avoid errors in Visual studio code

▪tsc --init à creates tsconfig.json

TypeScript Variables Preview 25:28

TypeScript Data Types Preview 18:05

TypeScript Operators Preview 20:25

TypeScript Strings Preview 21:34

Conditional Statements Preview 26:50

Loops Preview 29:08

Arrays Preview 31:44

Tuples Preview 21:14

Functions Preview 54:44

Class, Object & Methods Preview 24:29

Inheritance Preview 22:30

Interface Preview 21:41

Modules Preview 13:13

Web Automation using Cypress IO 20 lectures

Cypress Introduction Preview 19:17

▪What is Cypress?

▪Selenium Vs Cypress Architectural Differences

▪Cypress Ecosystem

▪How Cypress is different than Other tools

▪Features of Cypress

▪Limitations

Environment setup on Windows Preview 16:50

1) Download Node & NPM

https://nodejs.org/en/download/

2) Set NODE_HOME Environment Variable

3) Create Cypress Working Folder

4) Generate package.json

npm init

5) Install Cypress

npm install cypress --save-dev

6) Download Visual Studio Code Editor

https://code.visualstudio.com/download

Environment setup on Mac Preview 15:12

▪Download Node & NPM

▪Create Cypress Working Folder

▪Generate package.json

▪Install Cypress

▪Download Visual Studio Code Editor

Test Runner Preview 08:57

▪How to Launch Test Runner in Cypress

▪Explore sample Tests in Cypress

First Cypress Test Case Preview 15:49

How To Run Cypress Test Preview 15:04

Cypress Project Folder structure Preview 11:16

Locating Elements-Part 1 Preview 23:40

Locating Elements-Part 2 Preview 17:27

Working with GUI Elements-Part 1 Preview 22:26

Working with GUI Elements-Part 2 Preview 36:35

Handling Alerts/Popups Preview 17:56

Navigation's Preview 10:03

Handle Table Preview 31:05

Working with hooks Preview 13:10

Working with fixtures Preview 16:17

Custom Commands in Cypress Preview 19:05

Page Object Model Pattern Preview 21:04

Cypress Command Line & Dashboard services Preview 18:52

▪How to run Cypress from the command line

▪How to specify which spec files to run

▪Working with Dashboard features

–Capture screenshots

–Recording


▪cd C:\Users\admin\CypressAutomation>

▪To Run all the specs in command line

–node_modules\.bin\cypress run

▪To Run specific specs the tests in command line

–node_modules\.bin\cypress run --spec "cypress\integration\examples\FirstTest.spec.js"

▪Dashboard

▪https://dashboard.cypress.io/login

▪Screenshots & Recording feature in Dashboard

–cypress run --record --key d63f3548-892b-41b9-bcb7-07ae3cbf9f9b

Continuous Integration with Cypress and Jenkins Preview 18:33

"scripts": {

"test": "node_modules\\.bin\\cypress run --config pageLoadTimeout=100000",

"runtests":"npm run test --"

}