E2E Testing with Cypress and Typescript

This post will show you how to install and configure Cypress with Typescript to test simple Form.io forms.

I used formio angular demo application to perform e2e test against. Here is the testing project github-repo.

After creating a project folder and navigating project root directory, as a first step, we need to install Cypress with this command:

• npm install cypress --save-dev
  then we need to install typescript with this command :

• npm install --save-dev typescript

After installing Cypress, we need to start Cypress in open mode with npx cypress open to configure it. Starting Cypress will create cypress.config file and other folders. Inside Cypress folder
we need top add tsconfig.json file like below

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

After that we can change all js file to ts file and ad our first testing file to run

command to run test in headless mode:

• npx cypress run

command to run test in open mode:

• npx cypress open