- Install nodejs LTS
- Install TypeScript globally
npm i -g typescript@latest
- Create a folder for testing in your project. Say CypressTypescript
- Run the following command to create a package.json
npm init
- Install Cypress
npm install cypress --save-dev
- Run cypress:
npx cypress open
Click E2E-testing to generate basic configuration files:
7. Click Continue in the next screen
- 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"]
}
- 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}'
},
});
- Create folder page-objects inside cypress folder.
- Create folders specs inside cypress folder.
Common practices and conventions that we should be following:
- All the tests should be created in e2e folder.
- All page objects will be create in page-objects folder. It is good to create further sub-folder if there are multiple pages.
- All specs should be created under specs folder. Again, sub-folders can be created based on the related specs.
- All fixtures should be created in fixtures folder. Create sub-folders for related jsons.
- Any custom commands should be written in command.ts
- All file names should be kebab-case. example: google-search.page.ts
- The page-objects files should be ending with .page.ts
- The specs files should be ending with .specs.js
Yay! Happy Coding.