This article explains creating or setting up a cypress.io end-to-end testing framework from scratch using Typescript. Unlike another tutorial, this explains setting up the Cypress framework using Typescript in a simple and easy way. This article is helpful for whoever wants to set up the Cypress Typescript automation framework for the first time. Also, I know that there are many, migrating from different automation frameworks like Protractor, webdriver.io, etc. this will be helpful for them too.

This Tutorial shows page object model creation as well, however you can use it for any type of framework by skipping those steps.

Pre-requisite:

  1. Install NodeJS: If you don’t have NodeJS installed in your system navigate to https://nodejs.org/en/download/ and choose LTS download and install.

Installing NodeJS for Windows 2. Install Visual Studio Code: If you don’t have Visual Studio Code on your computer navigate to https://code.visualstudio.com/download download and install.

Visual Studio Code for Windows

Step by Step Guide to Configure/Setup Cypress Typescript Automation Framework

Step 1: Create a Project Folder

The first step is to create a new folder on your computer on a desired location. Below I am creating CypressTypescript as the project folder.

Step 2: Open Project Folder CypressTypescript in Visual Studio Code

i. Open, Visual Studio Code, Click on File > Open Folder

ii. Choose, CypressTypescript Folder and Click on Select Folder at the bottom

CypressTypescript Folder

Step 3: Create pacakge.json File

Open Terminal, In Visual Studio Code by clicking on Terminal Menu > Choose New Terminal.

Note: Ensure New Terminal opened in the working directory as CypressTypescript.

i. New Terminal window appears at the bottom of Visual Studio Code, In the new terminal type below command
npm init

New Terminal Window

ii. It will ask you a set of questions if you want, you can type the desired text, else hit [Enter] key one by one until you get the message Is this Ok?, then again hit enter it will create package.json for you.
Is this OK? Prompt

Step 4: Install Cypress

In the Visual Studio Code Terminal, you need to type below command:

npm install cypress --save-dev

The above command may take some time so please wait until it finishes.

Install Cypress Download

Step 5: Open Cypress

The first time when you enter the cypress open command it will create a default setup for you, which also includes directories like cypress, integration, fixtures, etc. To open cypress enter the below command in your Visual Studio Code terminal window.

npx cypress open

Verified Cypress

After the execution of the above command, it will create a default Cypress framework for you and also opens the Cypress window. At this point just close the Cypress window.

Cypress Window

 At this point, your CypressTypescript folder should look like below:

CypressTypescipt Folder With package.json

Note: Optionally, if you want you can play with a built-in example using the cypress window.

Step 6: Install Typescript Using the Below Command Typing in Terminal

In the Visual Studio Code Terminal type the below command.

npm i typescript

Step 7: Create Typescript config file (tsconfig.json)

In the Visual Studio Code Terminal type the below command to create tsconfig.json file.

npx tsc --init

The above command will create the default tsconfig.json file, let it be, for now, we will configure that later stages in this tutorial.

Step 8: Create src Folder Inside Integration Folder

Note: The Integration Folder has already created by cypress, you don’t have to create your own. which is located inside CypressTypescript/cypress folder

Inside your CypressTypescript > Double Click on cypress Folder > Open Integration folder

The default integration folder looks like below.

CypressTypeScript Integration Folder

Now, Create a folder called src inside the integration folder (Just reminding again integration folder is located inside the cypress folder

Creating src Folder

Optionally you can delete the examples folder unless you want to keep it as a reference.

Note:
1. example folder contains example tests, just to play around with some test cases, provided by cypress when you install the cypress package.
2. Your tests should be always inside the integration folder. However, you can create subfolders to arrange your specs but they should be inside the integration folder.

After the above step, we need to create two folders inside src namely page-objects and specs

CypressTypescript
-cypress
--integration
---src
----page-objects
----specs

In order to avoid any confusion. I have explained step by step below.

Step 9: Create page-objects Folder

Open src folder.

Note: src folder is located inside CypressTypescriptcypressintegration

Create one more folder inside src the folder, name it as page-objects . All your page object files should sit here.

Step 10: Create specs Folder

Create specs folder inside src folder, All your spec files should sit here.

Specs Folder In Integration

Note: Creating a separate folder for page objects and specs helps easy maintenance and managing the automation test. It is just a recommendation not mandatory.

After completion of the above step, your project should look like below.

Integration Project Example

Step 11: Create a First Page-Object File Inside the page-objects Folder

Using Visual Studio Code, Create a file named google-search.page.ts . This file should be created inside page-objects folder created in Step 9. Copy and paste the below code inside google-search.page.ts  file.

//Inside your google-search.page.ts file. This is pageobject file.
/// <reference types="cypress" />
export class GoogleSearch{
   googleSearch(){
   return cy.get('input[name="q"]').first();
   }
   googleSearchBtn(){
    return cy.get('input[name="btnK"]').first();
    }
    searchResults(){
        return cy.get('h3').first();
    }
 }

Step 12: Create the First Spec Inside the Specs Folder

Using Visual Studio Code, Create a file named google-search.spec.ts . This file should be created inside spec folder created in Step 10,Copy and paste the below code into the file google-search.spec.ts 

//This is spec file, inside your google-search.spec.ts
import {GoogleSearch} from "../page-objects/google-search.page";
const search = new GoogleSearch();
describe('Google Navigation', () => {
    it('Google Search', () => {
    cy.visit('https://www.google.com')
    search.googleSearch().type("Something");
    search.googleSearchBtn().click();
    search.searchResults().should('be.visible');
    });
});

At this point, your framework should look like below.

Framework Example

Step 13: Configuring tsconfig.json File

So, You have completed, page-object file, spec file. If you see those files you have created file with a .ts extension, that means we are using typescript in this project. In order for Cypress to understand typescript, we need to configure tsconfig.json file. The tsconfig.json file will be located in the root of the project folder that is inside folder CypressTypescript

i. In Step 7 you have already created tsconfig.json file.
ii. Navigate to tsconfig.json file
iii. Remove all default settings inside it. (make it empty)
iv. Copy and paste the below code

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

tsconfig.json

Step 14: Execute Your First Test

In the VisualStudio Code Terminal, Make sure the terminal present working directory is CypressTypescriptType below command

npx cypress open

npx cypress open in Terminal

Wait for the Cypress window to open. The below window appears.

Cypress Window Opening

Now, click on the google.search.spec.ts file in the above window. 

BOOM!!! Your test starts running in the browser.

Selecting google.search.spec.ts

Once it gets finished, you will see the result.

Test Running in Browser

How to Execute Cypress Tests Using the Command-Line Interface Cypress CLI?

To execute cypress tests using the command line. Navigate to the CypressTypescript folder using the command line enter the below command:

npx cypress run --spec="./cypress/integration/src/specs/google-search.spec.ts"

Running Tests from Cypress CLI


Bonus:

By default, Cypress doesn’t support XPath as a selector, if you need XPath support please install the cypress-xpath npm package:

npm i cypress-xpath

To get support for the typescript uses the line /// <reference types=”cypress-xpath” /> in your spec file. Below is the example:

/// <reference types="cypress-xpath" />
describe('Example', () => {
 it('Example', () => {
    //test something
  });
});

If you are looking for any help, support, guidance contact me on LinkedIn|https://www.linkedin.com/in/ganeshsirsi/.



Source link

Write A Comment