How to Set up Cypress and Typescript End-to-End Automation Testing Framework From Scratch

Step 10: 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 8. 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 11: 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 9,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({ force: true });
        search.searchResults().should('be.visible');
    });
});

At this point, your framework should look like below.

Step 12: 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"]
}

Step 13: Execute Your First Test

In the VisualStudio Code Terminal, Make sure the terminal present working directory is CypressTypescript. Type below command

npx cypress open

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

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

BOOM!!! Your test starts 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?

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/specs/google-search.spec.ts" 

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