Softestworld: Automation and Manual testing: July 2023


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.
  
  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.
  
  
Step by Step Guide to Configure / Set up Cypress Typescript Automation Framework
Step 1: Create a Project Folder
The first step is to create a new folder on your computer 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

Step 3: Create pacakge.json folder
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
  
iv. New Terminal window appears at the bottom of Visual Studio Code, In the new terminal type 
below command
  
  npm init

v. It will ask you a set of questions if you want to type 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

Step 4: Install Cypress:
In the Visual Studio Code, you need to type below command
npm install cypress --save-dev

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 terminal window
 npx cypress open
After the execution of the above command, it will create, default cypress framework for you and also 
opens the cypress window. At this point just close the Cypress window.

At this point, your CypressTypescript folder should look like this

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 using the 
below command
npx tsc --init
Step 8: Create srcfolder inside e2e Folder
Step 9: Create page-objects a folder
Step 10: Create specs folder

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 sit inside 
page-objects folder created in Step 9.
Copy and paste the below code into the file google-search.page.ts.
  
  //Inside your google-search.page.ts file. This is pageobject file.
/// 
 
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 is 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');
    });
});
  

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 it.

i.In Step 7 you have already created the tsconfig.json file.
ii.Navigate to tsconfig.json file
iii.Remove all default settings inside it.
iv.Copy and paste the below code
  
  {
   "compilerOptions": {
    "target": "es5",
    "lib": ["es5", "dom"],
    "types": ["cypress"]
  },
  "include": ["**/*.ts"]
}
  

Step 14: Execute your first test
In the VisualStudio Code Terminal, Make sure the terminal present working directory is CypressTypescript. 
Type below command
  
npx cypress open

  
Click on the google.search.spec.ts file in the above window. BOOM!!! your tests stats running in the browser.

Once it gets finished you will see the result
  

  
How to Execute Cypress tests using the command-line interface Cypress CLI?
  
npx cypress run --spec="./cypress/integration/src/specs/google-search.spec.ts"
  
  
By default, Cypress doesn’t support XPath as a selector, if you want to use Xpath in cypress please 
install the cypress-xpath npm package
  
  npm i cypress-xpath
To get support for the typescript uses the line ///  in your spec 
file. Below is the example
  
  /// 
describe('Example', () => {
 it('Example', () => {
    //test something
  });
});
  
2.Setting up .gitignorein your project
Once you set up the code definitely you want to check into a git repository, if you are checking in 
the git repository you don’t have to push all the code such as node-modules folder etc. for that 
create one file in your project folder (CypressTypescript) name it as .gitignore any folders and 
files which you mention here will be automatically ignored by git, which will not be checked into 
the repository.

Example code for .gitignore
  
  # End to End Tests
dist/
node_modules/
obj/
logs/
*.log
*.txt
testresults/
screenshots/
package-lock.json