Creating a Cypress boilerplate using Typescript

 

1. Install nodejs LTS 
2. Install TypeScript globally

npm i -g typescript@latest

3. Create a folder for testing in your project. Say CypressTypescript
4. Run the following command to create a package.json

npm init

5. Install Cypress

npm install cypress --save-dev

6. Run cypress:

npx cypress open

Click E2E-testing to generate basic configuration files:

7. Click Continue in the next screen

8. Create TypeScript config file in the cypress directory where package.json is located.

npx tsc --init

Add the following code in tsconfig:

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

9. Change cypress.config.js to cypress.config.ts and replace the code with the following one:

import { defineConfig } from "cypress";

export default defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
    specPattern: 'cypress/e2e/**/*.cy.{js,jsx,ts,tsx}'
  },
});

10. Create folder page-objects inside cypress folder.
11. Create folders specs inside cypress folder.

Common practices and conventions that we should be following:

1. All the tests should be created in e2e folder.
2. All page objects will be create in page-objects folder. It is good to create further sub-folder if there are multiple pages.
3. All specs should be created under specs folder. Again, sub-folders can be created based on the related specs.
4. All fixtures should be created in fixtures folder. Create sub-folders for related jsons.
5. Any custom commands should be written in command.ts
6. All file names should be kebab-case. example: google-search.page.ts
7. The page-objects files should be ending with .page.ts
8. The specs files should be ending with .specs.js

Github Source

Yay! Happy Coding.